Попытка загрузить диаграммы Google через ajax-вызов jQuery

Question

Первоначально опубликовано это здесь: Попытка загрузить диаграммы Google с помощью (jQuery) ajax-вызова , но немного изменила мой код, но я все еще не могу заставить его работать должным образом.

Я пытаюсь написать функцию опроса, которая загружает результаты и отображает их на той же странице без обновления.Я использую графики Google Api и JQuery AJAX.

главная страница У меня есть это:

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

В момент на моей странице query.php я просто выплевывает поддельные данные JSON:

<?php 

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

После того, как я нажимаю кнопку «Да», все, что он делает, это показывает изображение ajaxloader.gif.

Я чувствую себя очень расстроенным и не могу понять, почемуэто происходит.Любая помощь приветствуется =)

Answer 1

Ваш оригинальный код:

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

добавьте еще один параметр, и все должно быть в порядке:

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

Answer 2

Сначала я бы проверил, правильно ли работает функция drawChart, затем попробую обновить ваш код до

$.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 3

Похоже, что ответ имеет отношение к типу данных, который должен быть массивом.

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.php) ...{"да": 9, "нет": 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
        );
    });                 
});