Trying to load Google charts through a jQuery ajax

Question

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 write a poll function that loads the results and displays it in the same page without refreshing. I am using google charts api and jquery ajax.

main page I have this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
    google.setOnLoadCallback(function(){  $("#poll_yes").removeAttr('disabled'); });

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


        // Set chart options
        var 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/loading.gif' alt='loading...' />";  

        $("#poll_yes").click(function(){
            $("#result").html(ajax_load); 
            $.post(
                "query.php",  
                {answer: "yes", poll_id: 5},  
                function(response){ 
                    drawChart(response);
                }
            );
        });                 
    }); 
</script>
<input type="submit" value="yes" disabled="disabled" id="poll_yes"/>
<div id="result"><div id="chart_div">&nbsp;</div></div>

At the momemnt in my query.php page I just have it spitting out fake JSON data:

<?php 

if(isset($_POST['answer']))
{
    echo "{\"yes\": 14,\"no\": 9}";
}
else
{
    echo "{\"yes\": 9,\"no\": 14}";
}
?>

After I hit the 'yes' button all it does is show the ajaxloader.gif image.

I'm feeling very frustrated and cannot for the life of me figure out why this is happening. Any help is appreciated =)

Answer 1

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 is
          drawChart(response);
        },
        'json' // the expected response data type
);

Answer 2

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

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


    // Set chart options
    var 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 is
                  drawChart(response);
                },
                'json' // the expected response data type
        );
    });                 
}); 

Answer 3

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