Error: You called the draw() method with the wrong type of data rather than a DataTable or DataView

Question

I create a google chart using MYSQL-PHP-JSON-Javascript the code for the chart is here:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.load = google.load || google.charts.load;
    google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;
    // 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() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);

      var options = {
            title: 'Req',
          is3D: 'true',          
          width: 750,
          height: 450,
          slices: [{'color':'#581845'},{'color': '#900C3F'},{'color': '#C70039'},{'color': '#FF5733'},{'color': '#FFC300'},{'color': '#DAF7A6'},{'color': '#3498DB'}]
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
</script>

When I load the page it shows me an error:

You called the draw() method with the wrong type of data rather than a DataTable or DataView.

A refresh on the page removes this error and displays my pie chart perfectly.

I have read the posts on google forum/stackoverflow and added the extra code

google.load = google.load || google.charts.load;
google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;

and also added the loader.js script. Nothing seems to fix this problem. Is there something else that can be done to fix this problem?

I used this to create the json table: PHP MySQL Google Chart JSON - Complete Example

My Json table is like:

({"cols":[{"label":"Components","type":"string"}, 
{"label":"Count","type":"number"}],"rows":[{"c":[{"v":"SWa"},{"v":600}]}, 
{"c":[{"v":"Sris"},{"v":142}]},{"c":[{"v":"Sgri"},{"v":86}]},{"c": 
[{"v":"Shw"},{"v":36}]},{"c":[{"v":"Syus"},{"v":23}]},{"c":[{"v":"Other"}, 
{"v":21}]},{"c":[{"v":"yutf"},{"v":45}]},{"c":[{"v":"yutr"},{"v":11}]},{"c": 
[{"v":"duh"},{"v":4}]},{"c":[{"v":"Fgth"},{"v":5}]},{"c":[{"v":"Sys"}, 
{"v":34}]},{"c":[{"v":"Opyu"},{"v":6}]},{"c":[{"v":"jth"},{"v":78}]},{"c": 
[{"v":"Unspecified"},{"v":1}]}]});

So this is what goes into google.visualization.DataTable and the dataTable is passed to the variable data: var data = new google.visualization.DataTable();

I use mysql with php to create the json table i use for the data of the google chart. Referring this:stackoverflow.com/questions/12994282/… — Aastha Anand
@FunkFortyNiner How is this unclear? what more information would you require? — Aastha Anand
Because; people such as I / others, expect to see related code which is misleading. That's what makes it unclear. — Funk Forty Niner
I am sorry about that. I have added the link to the code in php-mysql i followed here. — Aastha Anand

WhiteHat WhiteHat · Accepted Answer · 2018-08-08T17:38:19

remove jsapi and just use loader.js

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

when using loader.js, the load statement should be...

google.charts.load('current', {packages: ['corechart']});

and the callback...

google.charts.setOnLoadCallback(drawChart);

Error: You called the draw() method with the wrong type of data rather than a DataTable or DataView

1 Answers