Reply To: Display Chart using JSON data in ASP MVC

[Anjali]

@lonwabogiqwa,

You basically need to loop through the JSON data and parse it to the format accepted by CanvasJS before passing it to the chart options. Please check the below code snippet –

var dataPoints =[];	
$.getJSON("/Dashboard/GetData/",function(data) {
  for(var i=0; i<=data.length-1; i++) {
    dataPoints.push({label:data[i].Title,y:parseInt(data[i].Credits)});
  }
  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    title: {
      text: "CanvasJS Charts in ASP.Net MVC using AJAX & JSON"
    },
    data: [
      {
        type: "column",
        dataPoints: dataPoints
      }
    ]
  });
  chart.render();
});