title: Building array and formatting JSON for Google Charting API
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>In the google documentation it says the json content should be in the following:</p>
  
  <pre><code>{
    "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}]}
        ]
  }
  </code></pre>
  
  <p>I am calling a function which returns the json code. </p>
  
  <p>Below is how the function is called</p>
  
  <pre><code>print json_encode(test());
  </code></pre>
  
  <p>and the test function is </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>The javascript that generates the chart is as follows</p>
  
  <pre><code>&lt;script&gt;
              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});
              }
          &lt;/script&gt;
  </code></pre>
  
  <p>When I echo the json it is being returned in the following format</p>
  
  <pre><code>{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}
  </code></pre>
  
  <p>and if I try and use this for the datasetfor the google chart I get the following message</p>
  
  <pre><code>Cannot read property of '1' of undefined
  </code></pre>
  
  <p>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. </p>
  
  <p>How do I nee to build up the array to get it in the correct format for the google api chart. </p>
  
  <p>Thanks for any help you can provide.</p>