1

I am new to PHP and first time using JSON for plotting graphs using Google charts. I am pulling data from sql server database and generate JSON file.

JSON file is generated fine on the server as below:

{"cols":[{"label":"SecurityID","type":"string"},{"label":"PositionDate","type":"string"},{"label":"LastUpdate","type":"string"}],"rows":[{"c":[{"v":"528228"},{"v":"10-08-2017"},{"v":"10 Aug 2017 19:47:04:067"}]},{"c":[{"v":"271239"},{"v":"07-09-2017"},{"v":"06 Sep 2017 15:07:08:023"}]},{"c":[{"v":"271240"},{"v":"08-09-2017"},{"v":"12 Sep 2017 09:42:09:883"}]},{"c":[{"v":"614800"},{"v":"08-09-2017"},{"v":"15 Oct 2017 14:26:10:600"}]},{"c":[{"v":"703806"},{"v":"15-09-2017"},{"v":"15 Sep 2017 16:24:20:913"}]},{"c":[{"v":"580428"},{"v":"20-09-2017"},{"v":"19 Sep 2017 17:35:15:130"}]},{"c":[{"v":"267909"},{"v":"22-09-2017"},{"v":"21 Sep 2017 18:06:05:800"}]},{"c":[{"v":"639862"},{"v":"27-09-2017"},{"v":"06 Nov 2017 11:58:12:310"}]}]}

while, I try to plot it I get no output. Looking at error on chrome I see below:

Uncaught (in promise) Error: https://www.gstatic.com/charts/45.2/js/jsapi_compiled_format_module.js Invalid JSON string:

My code to plot is as below:

<html>   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "getData.php",
          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>
miken32
  • 42,008
  • 16
  • 111
  • 154
Zulfiqar Dholkawala
  • 458
  • 2
  • 5
  • 19
  • when creating a google data table directly from json, the json must be in a specific format, see --> [Format of the Constructor's JavaScript Literal data Parameter](https://developers.google.com/chart/interactive/docs/reference#dataparam) -- here is [an example](https://stackoverflow.com/a/38955110/5090771) – WhiteHat Nov 06 '17 at 15:55
  • yes seems like that was the issue. json good but format was not valid for google charts. I got my code updated to generate json in format expected by google charts. Now, running plotting on it gives me error "Table has no columns". – Zulfiqar Dholkawala Nov 06 '17 at 16:25
  • still can't figure out why graph is not displayed with JSON file is good? – Zulfiqar Dholkawala Nov 08 '17 at 13:44
  • the posted json is valid for google charts, however, each chart type also has a specific data format -- for instance, the [data format](https://developers.google.com/chart/interactive/docs/gallery/piechart#data-format) for a `PieChart` requires the first column type to be `'string'`, and the second column type to be `'number'`, if there is a third column, it can only be `role: 'tooltip'` of type `'string'`... – WhiteHat Nov 08 '17 at 13:57
  • hmm. let me have a look as both my columns are string type. may be thats causing issue here based on what you said. – Zulfiqar Dholkawala Nov 08 '17 at 14:02

0 Answers0