2011-11-18 5 views
2

원래 여기에 게시 : Trying to load Google charts through a (jQuery)ajax call하지만 내 코드는 약간 수정되었지만 여전히 올바르게 작동하지 않습니다.jQuery ajax 호출을 통해 Google 차트를로드하려고 시도했습니다.

결과를로드하고 새로 고치지 않고 동일한 페이지에 표시하는 폴링 함수를 작성하려고합니다. Google 차트 api 및 jquery ajax를 사용하고 있습니다. 난 그냥 가짜 JSON 데이터 뱉어 한 내 query.php 페이지의 momemnt에서

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

:

메인 페이지 나는이가 내가 공격 후

<?php 

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

을 '예' 버튼 만 누르면 ajaxloader.gif 이미지가 표시됩니다.

저는 매우 좌절감을 느낍니다. 왜 이런 일이 일어나고 있는지 알 수 없습니다.

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

하나 더 추가 : 어떤 도움을하여 drawChart 기능이 제대로 작동하는 경우

+0

기능 사이트에 대한 링크가 있거나 jsFiddle에 코드를 게시 할 수 있습니까? –

답변

3

우선 다음이

$.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 
); 
9

에 원래 코드를 코드를 업데이트하려고 확인 할) = 감사합니다 매개 변수이며 확인해야합니다.

+0

이 간단한 변경이 놀라운 일이지만 setTimeout()을 사용하여 다양한 해결 방법을 찾기 위해 오랫동안 해답을 찾고있었습니다. 고맙다고 말하고 싶습니다. –

+0

매우 유용한 코드 조각 !! – Nich

1

응답이 다음과 관련이있는 것으로 보입니다. 배열 것으로 생각되는 데이터의 유형 ..

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 
     ); 
    });     
}); 
관련 문제