How to load data into a CanvasJS graph

Question

I am learning how to get the data from a JSON file to be displayed on a graph in CanvasJS. I only need the integer values from this JSON file as the Y axis values. the X axis values at the moment can be hardcoded or anything. eventually they will have to be a timestamp. I currently am struggling with thinking of how to get the data i need from this file to a variable and then access the correct piece of data in order to load it into the graph. Thank you! this is the JSON files contents:

  "tables": [
    {
      "tableName": "RSRP",
      "series": [
        {
          "index": "",
          "column": "Time",
          "size": 31
        },
        {
          "index": "",
          "column": "RSRP",
          "size": 31
        },
        {
          "index": "",
          "column": "RSRQ",
          "size": 31
        },
        {
          "index": "",
          "column": "SNR",
          "size": 31
        }
      ],
      "internalChange": true
    }
  ]
}

Answer 1

You need to loop through your JSON data and parse it to the dataPoints format accepted by CanvasJS . After parsing the data, you can pass that dataPoints to chart options to render the chart as per your requirement. Take a look at the code snippet below.

 var jsonData = { "tables": [ { "tableName": "RSRP", "series": [ { "index": "", "column": "Time", "size": 31 }, { "index": "", "column": "RSRP", "size": 31 }, { "index": "", "column": "RSRQ", "size": 31 }, { "index": "", "column": "SNR", "size": 31 } ], "internalChange": true } ] } var dps = []; jsonData.tables[0].series.forEach(function(data) { dps.push({label: data.column, y: data.size}) }) var chart = new CanvasJS.Chart("chartContainer", { theme: "light2", title:{ text: "Data from JSON" }, data: [ { type: "column", dataPoints: dps } ] }); chart.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 370px; width: 100%;"></div>