CODEWITHSUNDEEP
ajaxjsongoogle-visualization
user2954658
user2954658

Reputation: 89

How do I format JSON data to display correctly with Google Charts?

Here's my code, I've spent hours and hours Google searching this with no success... 

google.load('visualization', '1', {packages: ['corechart']});

google.setOnLoadCallback(drawVisualization);

function drawVisualization(){
      var jsonData = $.ajax({
          url: "FinancialData.php",
    //    data: "ChartRequest=" + "Employees",
          dataType:"json",
          async: false, 
          }).responseText;
          window.alert(jsonData); //this always returns correctly formatted data

    var data = new google.visualization.DataTable(jsonData); //this never works


    var chart = new google.visualization.PieChart(document.getElementById('visualization'));
    chart.draw(data, {title:"Progress Fest Financial Information, Fall 2013"});
};

Code returns "Table has no columns"

Upvotes: 1

Views: 663

Answers (1)

Barmar
Barmar

Reputation: 780779

responseText is the response as a string, not parsed by JSON into a Javascript object. jQuery passes the parsed result to the AJAX completion function, but you're not using that, so you don't get it. You need to call $.parseJSON explicitly:

var jsonData = $.parseJSON($.ajax({
    ...
}).responseText);

Or you can use the completion function (so you don't need to use async: false):

$.ajax({
    ...
}).done(function(jsonData) {
    window.alert(jsonData);
    var data = new google.visualization.DataTable(jsonData);
    var chart = new google.visualization.PieChart(document.getElementById('visualization'));
    chart.draw(data, {title:"Progress Fest Financial Information, Fall 2013"});
});

Upvotes: 1

Related Questions