Using the Google Graphs API with dynamic data

Question

Just managed to grab some data from the Google Analytics service for my admin dashboard. This is the format it's in when sent to the browser (JSON encoded).

[["20161207","11"],["20161208","9"],["20161209","15"],["20161210","2"],["20161211","4"],["20161212","1"],["20161213","3"],["20161214","10"],["20161215","5"],["20161216","4"],["20161217","3"],["20161218","1"],["20161219","2"],["20161220","5"],["20161221","1"],["20161222","3"],["20161223","1"],["20161224","2"],["20161225","0"],["20161226","0"],["20161227","0"],["20161228","0"],["20161229","1"],["20161230","4"],["20161231","2"],["20170101","1"],["20170102","1"],["20170103","4"],["20170104","0"],["20170105","2"],["20170106","4"],["20170107","0"],["20170108","0"],["20170109","0"],["20170110","0"],["20170111","0"],["20170112","0"],["20170113","0"],["20170114","0"],["20170115","0"]]

I then want to display it in a chart through JavaScript. My code is below:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
$.get("api.php", function(response, status){

t = [];
response = JSON.parse(response);
            for (var i = 0; i < response.length; i++) {
                t[i] = [response[i][0], response[i][1]];
            }
});

        var data = google.visualization.arrayToDataTable(t);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

I'm getting absolutely nothing back. The graph is adapted from this example in the docs. The response, for some reason, just does not seem to be valid as an array so I need that extra loop in, although that brings up a blank page, no errors. If I hard-code it, it works. Does anyone have any ideas what could be the problems?

** Latest code **

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart()
{
    $.ajaxSetup({
        cache: false,
    });

    $.get("api.php", function(response, status)
    {
        t = [];
        response = JSON.parse(response);
                for (var i = 0; i < response.length; i++)
                    t[i] = [response[i][0], response[i][1]];

        alert(response);
    });

        var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        response,
    ]);

    //data.addColumn('string', 'Employee Name');
    //data.addColumn('string', 'Employee Name123');

    var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
        vAxis: {minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

Try adding a row of column headings before loading the data rows -- any errors in the console? — WhiteHat, Jan 06 '17 at 16:51
Just tried this now ... when using the 't' array, I got these errors: CrossPageChannel: Can't connect, peer window-object not set Line 775 Error: CustomError: Error in protected function: Configuration error when load Line: 215 Error: Not an array After using 'response' instead, I only get the last error once. — Chris98, Jan 06 '17 at 17:06
Ok, now create a new DataTable directly, instead of passing nothing to arrayToDataTable — WhiteHat, Jan 06 '17 at 17:10
Tried doing this now, and for some reason, despite when using the alert() the data appears, but later down I'm getting a 'response' is undefined error?? Latest code above again. — Chris98, Jan 06 '17 at 17:21

score 0 · Accepted Answer · answered Jan 06 '17 at 19:51

just noticed the second column is encoded as a string,
and needs to be converted to a number,
before creating the data table...

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = [["20161207","11"],["20161208","9"],["20161209","15"],["20161210","2"],["20161211","4"],["20161212","1"],["20161213","3"],["20161214","10"],["20161215","5"],["20161216","4"],["20161217","3"],["20161218","1"],["20161219","2"],["20161220","5"],["20161221","1"],["20161222","3"],["20161223","1"],["20161224","2"],["20161225","0"],["20161226","0"],["20161227","0"],["20161228","0"],["20161229","1"],["20161230","4"],["20161231","2"],["20170101","1"],["20170102","1"],["20170103","4"],["20170104","0"],["20170105","2"],["20170106","4"],["20170107","0"],["20170108","0"],["20170109","0"],["20170110","0"],["20170111","0"],["20170112","0"],["20170113","0"],["20170114","0"],["20170115","0"]];

  var chartData = [];
  chartData.push(['Name', 'Number']);

  data.forEach(function (row) {
    chartData.push([row[0], parseFloat(row[1])]);
  });

  var dataTable = google.visualization.arrayToDataTable(chartData);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(dataTable, options);
}

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

Using the Google Graphs API with dynamic data

1 Answers1