Making a chart with Google Charts from server side json file

Question

I'm trying to create a chart from a database column. The data from the column is transformed in an array. The array is transformed to json format but something is wrong with the json file. The file that is showing the graph displays only an error: "Table has no columns"

This is the statistics page:

<style type="text/css"></style>  <!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: "getData.php",
      dataType:"json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

</script>    </head> <body><div id="chart_div"></div> </div> </body> </html>

The getData.php file

 <?php  $string = file_get_contents("result.json"); echo $string; ?>

the file that make the array into a json format file:

> <?php  require('required/settings.php');
> include('required/config.php');
> $query = mysql_query("SELECT DISTINCT ModelCode, COUNT(ModelCode) as
> count from flights GROUP BY ModelCode ORDER BY count DESC LIMIT 0,
> 10;");
> $response = array(); $posts = array();
> while($row=mysql_fetch_array($query))  {  $name=$row['ModelCode']; 
> $count=$row['count']; 
> $posts[] = array('name'=> $name, 'count'=> $count);
> } 
> $response['posts'] = $posts;
> $fp = fopen('result.json', 'w'); fwrite($fp, json_encode($response));
> fclose($fp);
> ?>

And the json file created:

{"posts":[{"name":"A320","count":"2703"},{"name":"B738","count":"2212"},{"name":"A321","count":"907"},{"name":"A319","count":"711"},{"name":"A332","count":"373"},{"name":"B773","count":"355"},{"name":"A333","count":"326"},{"name":"A388","count":"299"},{"name":"B737","count":"258"},{"name":"B744","count":"177"}]}

Any ideas? Thank you

//ajax.googleapis.com should probably be `http://ajax.googleapis.com` — cmbarbu, Mar 20 '15 at 22:46

score 0 · Accepted Answer · edited May 23 '17 at 10:10

You are not parsing the json. You can use plain javascript JSON.parse:

    // Create our data table out of JSON data loaded from server.
    var tableData = JSON.parse(jsonData);

Additionally, if you give the data argument of google.visualization.DataTable it must be formated in a very specific way. As this is a bit too complex to make it from scratch, you must feed google.visualization with a simple array of array and not an array of objects like what is returned by JSON.parse for your example json file. For that you can modify your php generating the json to generate a json array of array (see this other question).

The json file becomes:

[["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355],["A333",326],["A388",299],["B737",258],["B744",177]]

And you can plot it using:

    // Create our data table out of JSON data loaded from server.
    var tableData = JSON.parse(jsonData);
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'name');
    data.addColumn('number', 'count');
    data.addRows(tableData);

    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});

}

Additionally, if your first row contains the column names in json:

[["name","count"],["A320",2703],["B738",2212],["A321",907],["A319",711],["A332",373],["B773",355],["A333",326],["A388",299],["B737",258],["B744",177]]

The google DataTable can be made more easily:

    var tableData = JSON.parse(jsonData);
    var data = new google.visualization.arrayToDataTable(tableData);

Can you please give me more detail?i'm not familiar with JQuery at all — Silviu Balaci, Mar 20 '15 at 23:56
Unfortunatly i still get "Table has no columns" errr on the statistics page — Silviu Balaci, Mar 21 '15 at 07:21
Can you check if the new version of the answer solves your issue? — cmbarbu, Mar 24 '15 at 09:59

Making a chart with Google Charts from server side json file

1 Answers1

Linked