Google chart prints "Table has no columns" in all cases?

Question

I'm trying to generate a line graph with the help of google chart. But, I see "table has no columns". I tried example given on google site and observed the same. Following is my code:

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
  var jsonDataString = "{\"cols:\":{\"Time\":\"\",\"Sensor-1\":\"\",\"Sensor-2\":\"\",\"Sensor-3\":\"\",\"Sensor-4\":\"\"},\"rows\":[{\"1\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"2\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"3\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"4\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"5\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"6\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"7\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"8\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"9\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]},{\"10\":[{\"Sensor-1\":1024,\"Sensor-2\":1024,\"Sensor-3\":1024,\"Sensor-4\":1024}]}]}"; 
  var jsonData = JSON.parse(jsonDataString);
  console.log(jsonData);
  var data = new google.visualization.DataTable(jsonData);

    var options = {
      title: 'time - temp',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);

  }
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

Any idea, where am I going wrong? Thanks.

The document isn't ready yet. Check out the accepted answer http://stackoverflow.com/questions/556406/google-setonloadcallback-with-jquery-document-ready-is-it-ok-to-mix — Eric Guan, Mar 06 '16 at 19:51
@EricGuan Nopes, that shouldn't be the case since setOnLoadCallback is triggered after document ready and google API have been loaded. — Ashwin Jugurnauth, Mar 08 '16 at 09:49

score 0 · Answer 1 · answered Mar 08 '16 at 09:53

Your JSON object isn't formatted properly to generate a datatable directly from it. The accepted JSON format is :

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

A nested JSON object with a 'cols' array containing X number of objects, where X = your number of columns, and a 'rows' array, containing Y number of 'c' nodes, where Y = your number of rows, and inside each 'c' node, Z number 'v' nodes, where Z = your number of columns.

You should check google documentation here :

Google JSON DATA

P.S Try replace your JSON string by the one provided in my example and you'll see that your line chart will be drawn as I don't see any errors in your code.

Google chart prints "Table has no columns" in all cases?

1 Answers1