title: Google chart "Table has no columns"
body: <p>I am generating a DataTable for a google area chart.  The table I generate is the below JSON.  The JSON validates, and looks correct, but when fed to the chart, the chart displays a "table has no columns" error.</p>
  
  <p>The JSON also appears to match the JSON in the sample file on <a href="https://developers.google.com/chart/interactive/docs/php_example" rel="nofollow">this page</a></p>
  
  <p>Here is my JSON data:</p>
  
  <pre><code>{
    "cols":[
      {"id":"","label":"date","type":"string"},
      {"id":"","label":"run","type":"number"},
      {"id":"","label":"passed","type":"number"}
    ],
    "rows":[
      {"c":[{"v":"2012-07-20"},{"v":0},{"v":0}]},
      {"c":[{"v":"2012-07-23"},{"v":0},{"v":0}]}
    ]
  }
  </code></pre>
  
  <p>Here is how I am fetching the data and giving it to the chart:</p>
  
  <pre><code>function loadData()
  {
      var request=new XMLHttpRequest();
      request.onreadystatechange=function()
      {
          if (request.readyState==4 &amp;&amp; request.status==200)
          {
              return request.responseText;
          }
      }
      request.open("GET","testsrun.php?json=true&amp;branch=test",true);
      request.send();
  }
  
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
      var json = loadData();
      var data = new google.visualization.DataTable(json);
  
      var options = {
          vAxis: {minValue: 0}
      };
  
      var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
      chart.draw(data, options);
  }
  </code></pre>
  
  <p>Also, I am aware that I can use a date object instead of a string for the date, I would prefer not to overcomplicate this until I have solved the initial problem.</p>