2013-02-27 60 views
0

我有一個控制器,它以Google Charts預期的格式返回(很好)格式化的JSON。我可以通過導航到http://localhost:9000/manager/echoVariables查看輸出,並且OP如下所示:[["foo",3],["foo",3]]如何使用AJAX查詢動態填充Google圖表,獲取DOM異常8

我想要做一個AJAX調用,並且不能將此JSON傳遞給Google Charts。我可以確認收到的是JSON,我在Chrome的瀏覽器檢查器的「網絡」選項卡中進行了驗證。

但是我在將這個JSON字符串傳遞給Google Charts的過程中收到DOM Exception 8

這是創建圖形視圖:

#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreScripts'} 
#{/set} 
<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

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

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 

<script type="text/javascript"> 
//$.get() 
$(document).ready(function() { 
    $("#result").html(); 
    $.get(
     '/manager/echoVariables', 
     {var1: "foo", var2: 5}, 
     function(responseText){ 
      $("#result").html(responseText); 
     }, 
     "json" 
    ); 
}); 


</script> 

<body> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 
    <div id="result"></div> 
</body> 

如何使餅圖顯示我的價值觀,而不是在該段給出的那些?

謝謝。

回答

1

您的代碼有兩個問題。首先,您在#result div上使用jQuery的html()函數,但是您傳遞的是JavaScript對象而不是像函數期望的那樣的字符串。如果你只是想看看數據,你會改變,要像

$.get(
    '/manager/echoVariables', 
    {var1: "foo", var2: 5}, 
    function(responseText){ 
     $("#result").html(JSON.stringify(responseText)); 
    }, 
    "json" 
); 

另一個問題,當然是,你沒有真正的結果數據傳遞給谷歌圖表API。要做到這一點,您需要使用從AJAX調用中取回的數據而不是示例中的數據調用chart.draw

+0

謝謝傑夫,我會試試看。 – theTuxRacer 2013-02-28 07:10:01

+0

是的傑夫,我能夠做到。 JS不是我的特長,我想知道你是否會幫我清理它? – theTuxRacer 2013-02-28 08:01:16

相關問題