Home Forums Chart Support Collection data with Ajax Reply To: Collection data with Ajax

#10390

Michael,

You can parse the JSON data and pass dataPoints to respective dataSeries in chart options as shown below

$.ajax({
  type: 'GET',
  url: 'https://api.npoint.io/191c62a905159a49256e',
  dataType: 'json',
  success: function(field) {
    for (var i = 0; i < field.length; i++) {
      dataPointsA.push({
        x: field[i].time,
        y: field[i].xxx
      });
      dataPointsB.push({
        x: field[i].time,
        y: field[i].yyy
      });
    }

    var chart = new CanvasJS.Chart("chartContainer", {
      title: {
        text: "JSON from External File"
      },
      exportEnabled: true,
      data: [{
        type: "line",
        name: "line1",
        xValueType: "dateTime",
        dataPoints: dataPointsA
      }, {
        type: "line",
        name: "line2",
        xValueType: "dateTime",
        dataPoints: dataPointsB
      }, ]
    });

    chart.render();

  }
});

Here is an example for loading JSON data from external source using AJAX.

Rendering Chart from External JSON File using AJAX

You can also refer loading data from external JSON in this example.

Rendering Chart from External JSON File

—-
Vishwas R
Team CanvasJS