how to read data from an JSON file and pass it to google chart rows (javascript)

Question

have the following function JSONChart() it reads json data from var "allText" and should be able to parse the data and use it as row data for google charts.

Commenting out the adding row part displays the column data correctly with empty graph.

Need a way to parse the given sample data from a file and display it as row data in the google chart.

function JSONChart() {
google.charts.load('current', {'packages':['corechart']});
 var data = new google.visualization.DataTable();
   data.addColumn('string', 'Time stamp');
   data.addColumn('number', 'CPU');
   data.addColumn('number', 'MEMORY');
   data.addColumn({type:'string', role:'annotation'});
   data.addColumn({type:'string', role:'annotationText'});
   var data1  = JSON.parse(allText);
   var dataTableData = google.visualization.arrayToDataTable(data1);
   data.addRows (dataTableData);

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// Set chart options
   var options = {'title' : 'CPU & Memory',
      hAxis: {
         title: 'Time'
      },
      vAxis: {
         title: 'Percentage'
      },
      'width':1400,
      'height':600,
      curveType: 'function'
   };

chart.draw(data, options);
}

window.onload = function() {
  google.charts.setOnLoadCallback(JSONChart());
};

Sample JSON passed into variable "allText"

{"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}

Answer 1

a few things...

1) arrayToDataTable expects a simple array, not a json object
it also returns an entire data table, which has already been created --> data
instead, convert each json object to an array,
then use addRows to add the data to the existing data table --> data

something like...

for (var date in data1) {
  if (data1.hasOwnProperty(date)) {
    chartData.push([
      date,
      parseFloat(data1[date].MEMORY.replace('%', '').trim()),
      parseFloat(data1[date].CPU.replace('%', '').trim()),
      data1[date].SCREEN,
      ''  // not sure what value you want to use here
    ]);
  }
}
data.addRows(chartData);

2) google.charts.load -- this statement waits for the window / document to load, before calling the callback
no need for --> window.onload = function() {...

google.charts.load actually returns a promise,
so you can do something like...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // draw chart code here...  

3) when passing a callback function to setOnLoadCallback,
a reference to the function should be passed --> JSONChart
not the result of a function --> JSONChart() (remove parens)

4) recommend similar setup as following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time stamp');
  data.addColumn('number', 'CPU');
  data.addColumn('number', 'MEMORY');
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type:'string', role:'annotationText'});

  var chartData = [];
  var data1 = {"2017/11/03 01:06:51":{"SCREEN":" ABC ","MEMORY":" 32.0142% ","CPU":" 9.1% "},"2017/11/03 02:22:20":{"SCREEN":" XYZ ","MEMORY":" 31.101% ","CPU":" 10.3% "}};
  for (var date in data1) {
    if (data1.hasOwnProperty(date)) {
      chartData.push([
        date,
        parseFloat(data1[date].MEMORY.replace('%', '').trim()),
        parseFloat(data1[date].CPU.replace('%', '').trim()),
        data1[date].SCREEN,
        ''  // not sure what value you want to use here
      ]);
    }
  }
  data.addRows(chartData);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  var options = {'title' : 'CPU & Memory',
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Percentage'
    },
    height: 600,
    curveType: 'function'
  };

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>