CODEWITHSUNDEEP
javascriptjquerychartsgoogle-visualization
Aastha Anand
Aastha Anand

Reputation: 57

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

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();

Upvotes: 4

Views: 4381

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

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);

Upvotes: 2

Related Questions