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

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} ]}
  ]
}