Trying To Load Google Charts Through A Jquery Ajax Call

Originally posted this here: Trying to load Google charts through a (jQuery)ajax call but have modified my code a bit but I still can't get it to work properly. I am trying to wri

Solution 1:

Your original code:

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

add one more parameter and it should be OK:

google.load('visualization', '1.0', {'packages':['corechart'], **"callback": drawChart**});

Solution 2:

First i would check if the the drawChart function behave correctly, next try updating your code to this

$.post(
       "query.php",  
        {answer: "yes", poll_id: 5},  
        function(response){ 
          console.log(response); // check what the response from the server isdrawChart(response);
        },
        'json'// the expected response data type
);

Solution 3:

The response appears to have something to do with the type of data that is suppose to be an array..

Uncaught Error: Argument given to addRows must be either a number or an array format+en,default,corechart.I.js:152 L.addRows format+en,default,corechart.I.js:152 drawChart

Test Data (test.php)... {"yes": 9,"no": 14}

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawChart}); // Load the Visualization API and the piechart package.
google.setOnLoadCallback(function(){  $("#poll_yes").removeAttr('disabled'); });

functiondrawChart(rows) 
{
    // Create the data table.var data = new google.visualization.DataTable();
    data.addColumn('string', 'Answers');
    data.addColumn('number', 'Number');
    data.addRows(rows);


    // Set chart optionsvar options = 
    {
        'title'             :'Do you Like my poll?',
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);              
}       

jQuery(document).ready(function() {
    $.ajaxSetup ({  
        cache: false  
    }); 
    var ajax_load = "<img src='images.jpg' alt='loading...' />";  

    $("#poll_yes").click(function(){
        $("#result").html(ajax_load); 
        $.post(
               "test.php",  
                {answer: "yes", poll_id: 5},  
                function(response){ 
                  console.log(response); // check what the response from the server isdrawChart(response);
                },
                'json'// the expected response data type
        );
    });                 
});