Data Table : Table has no columns

Question

I am getting Table has no columns.× issue and i am not able to figure out why... Can you please help me understand whats wrong?

My HTML:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    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: "<JSON URL>",
          dataType: "json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

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

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

JAVA CODE:

I am using code similar to one presented in the example

https://github.com/google/google-visualization-java/blob/master/examples/src/java/SimpleExampleServlet.java

MY JSON :

{
  "rows":[
    {
      "cells":[
        {
          "value":{"value":"A","objectToFormat":"A","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        },
        {
          "value":{"value":"1","objectToFormat":"1","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        }
      ],
      "customProperties":{}
    },
    {
      "cells":[
        {
          "value":{"value":"B","objectToFormat":"B","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        },
        {
          "value":{"value":"0","objectToFormat":"0","null":false,"type":"TEXT"},
          "formattedValue":null,
          "customProperties":{},
          "null":false,
          "type":"TEXT"
        }
      ],
      "customProperties":{}
    }
  ],
  "customProperties":{},
  "warnings":[],
  "localeForUserMessages":null,
  "numberOfRows":2,
  "numberOfColumns":2,
  "columnDescriptions":[
    {"id":"Option","type":"TEXT","label":"Option","pattern":"","customProperties":{}},
    {"id":"Count","type":"TEXT","label":"Count","pattern":"","customProperties":{}}
  ]
}

Answer 1

As were noted, google.visualization.DataTable expects JSON data to be provided in the format that is different from the one specified in question. Basically there are two options available:

modify Java servlet to generate JSON in format supported by google.visualization.DataTable
convert the generated JSON data

Below is demonstrated how to convert the provided JSON data to be compatible with google.visualization.DataTable (second option)

 // Load the Visualization API and the piechart package. 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: "<JSON URL>", dataType: "json", async: false }).responseText;*/ var jsonData = { "rows": [ { "cells": [ { "value": { "value": "A", "objectToFormat": "A", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" }, { "value": { "value": "1", "objectToFormat": "1", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" } ], "customProperties": {} }, { "cells": [ { "value": { "value": "B", "objectToFormat": "B", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" }, { "value": { "value": "0", "objectToFormat": "0", "null": false, "type": "TEXT" }, "formattedValue": null, "customProperties": {}, "null": false, "type": "TEXT" } ], "customProperties": {} } ], "customProperties": {}, "warnings": [], "localeForUserMessages": null, "numberOfRows": 2, "numberOfColumns": 2, "columnDescriptions": [ { "id": "Option", "type": "TEXT", "label": "Option", "pattern": "", "customProperties": {} }, { "id": "Count", "type": "TEXT", "label": "Count", "pattern": "", "customProperties": {} } ] }; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(convertToDataTableJson(jsonData)); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, { width: 400, height: 240 }); } function convertToDataTableJson(json) { var outJson = { cols: [], rows: []}; json.columnDescriptions.forEach(function(c){ outJson.cols.push({ "id": c.id, "label": c.label, "pattern": c.pattern, "type": c.type == "TEXT" ? "string" : "number" }); }); json.rows.forEach(function(r){ var cells = {c : []}; r.cells.forEach(function(c){ cells.c.push({ "v": c.value.value, "f": null }); }); outJson.rows.push(cells); }); return outJson; }

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <div id="chart_div"></div>

Data Table : Table has no columns

Question

1 answers

solution1
1 ACCPTED 2015-10-29 13:36:13

Data Table : Table has no columns

Question

1 answers

solution1 1 ACCPTED 2015-10-29 13:36:13

solution1
1 ACCPTED 2015-10-29 13:36:13