Building array and formatting JSON for Google Charting API

Question

I am working on a project where I am making use of the Google Charting API and I want to populate the chart using json to build the data table.

As a test I am trying to build a simple array before I try and do it with dynamic data from a database but I am having a problem getting the json in the correct format.

In the google documentation it says the json content should be in the following:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

I am calling a function which returns the json code.

Below is how the function is called

print json_encode(test());

and the test function is

function test()
{
    $array = array();
    $array['cols'][] = "20-01-13";
    $array['cols'][] = "21-01-13";
    $array['cols'][] = "22-01-13";
    $array['rows'][] = 22;
    $array['rows'][] = 26;
    $array['rows'][] = 12;

    return $array;
}

The javascript that generates the chart is as follows

<script>
            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: "loadGraph.php",
                 dataType:"json",
                 async: false
                }).responseText;

                var data = new google.visualization.DataTable(jsonData);

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

When I echo the json it is being returned in the following format

{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}

and if I try and use this for the datasetfor the google chart I get the following message

Cannot read property of '1' of undefined

I am only building a simple line chart which will just contain a date along the x axis and a count of how many times something happened on that date along the y axis.

How do I nee to build up the array to get it in the correct format for the google api chart.

Thanks for any help you can provide.

Answer 1

This may come a bit late but anyway, here's what worked for me (needed to create a barchart).

1. Get the server code to return the json string representing an array e.g. something like:

   [{
     "score": 12,
     "subject": "Computer Graphics"
   }, {
     "score": 65,
     "subject": "Entreprenuership"
   }, {
     "score": 82,
     "subject": "C++Programming"
   }]
   

2. Parse the string using eval() or JSON.parse() to get the JavaScript object.

   var chartData = JSON.parse(jsonStringFromServer);
   

3. Create a DataTable object as such:

   var dTable = new google.visualization.DataTable();
   

4. Add columns to the dataTable :

   dTable.addColumn('string','Subject'); 
   dTable.addColumn('number','Score'); 
   //more columns if needed...
   

5. Loop through the javascript array (chartData) and for each object in the array, add a new row to the dataTable:

   for(i=0;i<chartData.length;i++){
       var currentObj = chartData[i];
       dTable.addRow([currentObj.subject,currentObj.score]);
   }
   //set options for the chart e.g title, width etc
   // create the chart ...
   

Answer 2

it should be like:

array(10) {
  [0]=>
  array(2) {
    [0]=>
    string(2) "en"
    [1]=>
    int(104)
  }
  [1]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    int(70)
  }
  [2]=>
  array(2) {
    [0]=>
    string(2) "zh"
    [1]=>
    int(13)
  }
  [3]=>
  array(2) {
    [0]=>
    string(2) "ru"
    [1]=>
    int(10)
  }
  ...

then

var data = google.visualization.arrayToDataTable(<?php echo json_encode($our_array); ?>);

var chart = new google.visualization.PieChart(document.getElementById('someId'));
chart.draw(data, options);

Answer 3

You need to specify the parameter type for cols. Refer to Google Charts JSON Format

Your PHP code should look similar to:

function test()
{
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');

    $array['rows'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22)) );
    $array['rows'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26)));
    $array['rows'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12)));

    return $array;
}

print json_encode(test());

Your json code would look more like:

{
  "cols": [
    {"type": "string"},
    {"type": "string"},
    {"type": "string"}
    ],
  "rows": [
    {"c":[{"v":"20-01-13"}, {"v":22} ]},
    {"c":[{"v":"21-01-13"}, {"v":26} ]},
    {"c":[{"v":"22-01-13"}, {"v":12} ]}
  ]
}