Using CanvasJS with ASP.NET C# and SQL

• September 12, 2017 at 5:06 pm #16022
  
  abraham1973

  Hi,
  I developed an application that was showing trend of event for period of years and i want to using CanvasJS to visualize the trend.
  The Data’s are return in a DataTable containing Years and Values. I declare the DataTable as public parameter and pass it to Jquery as datapoints: [‘<%=this.mDataTable%>’]
  This did not work for me, i have been on this for three(3) weeks now with no result. I need your technical assistance to get this to work.

  Thank you

  September 13, 2017 at 10:35 am #16029
  
  Suyash Singh

  @abraham1973,

  Unless we look into your code, we can’t predict what went wrong in it. Can you kindly create a sample project and share your code, so that we can look into it and help you out.

  ___
  Suyash Singh
  Team CanvasJS

  September 14, 2017 at 2:47 am #16039
  
  abraham1973

  Many Thanks, i don’t know if i can reply via this medium below is a section of my code that return datatable and convert to JSON

  What I have tried:

  unit of my code:

  `mData = ConnectAll.GetDataObject(“Select sum(totalg9) as Total from tbl_htc2 group by months”);
  try
  {
  var JSONString = new StringBuilder();
  if (mData.Rows.Count > 0)
  {
  JSONString.Append(“[“);
  for (int i = 0; i < mData.Rows.Count; i++)
  {
  JSONString.Append(“{“);
  for (int j = 0; j < mData.Columns.Count; j++)
  {
  if (j < mData.Columns.Count – 1)
  {
  JSONString.Append(“\”” + mData.Columns[j].ColumnName.ToString() + “\”:” + “\”” + mData.Rows[i][j].ToString() + “\”,”);
  }
  else if (j == mData.Columns.Count – 1)
  {
  JSONString.Append(“\”” + mData.Columns[j].ColumnName.ToString() + “\”:” + “\”” + mData.Rows[i][j].ToString() + “\””);
  }
  }
  if (i == mData.Rows.Count – 1)
  {
  JSONString.Append(“}”);
  }
  else
  {
  JSONString.Append(“},”);
  }
  }
  JSONString.Append(“]”);
  }

  Response.Redirect(string.Format(“~/data_load/monthly_trend.aspx?mData={0}”, JSONString.ToString()));

  The page that render the chart :

  window.onload = function () {
  var mTD = ‘ <%=this.DT%>’
  var chart = new CanvasJS.Chart(“chartContainer”,
  {
  title: {
  text: “Trend Analysis”
  },
  axisY: {
  // minimum: 50,
  maximum: 300,
  interval:50
  },
  axisX: {
  // minimum: 50,
  maximum: 200
  //interval:-10
  },
  data: [
  {
  type: “column”,
  dataPoints: [
  mTD
  ]
  }
  ]
  });

  chart.render();
  }

  September 14, 2017 at 6:19 pm #16045
  
  Suyash Singh

  @abraham1973,

  Since you are reading data from the database, it would be helpful if you could share your sample project along with sample data via onedrive. It would help us in understanding your requirements better and help you out.

  ___
  Suyash Singh
  Team CanvasJS