在AJAX呼叫的頁面上使用谷歌圖表

我有一個我已經建立的客戶報告區域，它使用谷歌圖表來顯示數據，這一切都很好，並且工作正常（見下圖）。我遇到的問題是管理員用來選擇不同客戶端的下拉框使用ajax更改頁面。

的jQuery：

$("#adminCall").live("submit", function() { 
    var fields = $(this).serialize(); 
     $.ajax({ 
        type: 'POST', 
        url: '/ajax/admin-calls-ajax.php', 
        data: fields, 
        success: function(data) 
        {  
        $("#results").html(data);     
        } 
      }); 
    return false; 
});

被稱爲是一個顯示正確，但通過客戶機ID作爲後變量的文件的精確副本的PHP文件。

的谷歌圖表代碼（兩個文件）

<script type="text/javascript"> 
    function drawVisualization() { 
    // Create our data table out of JSON data loaded from server. 
    var data = new google.visualization.DataTable(<?=$jsonTable?>); 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        isStacked: true, 
        width: 780, height: 300, 
        fontSize: 10, 
        vAxis: {maxValue: <?php echo $maxval; ?>, minValue: 0}} 
      ); 
    } 
    google.setOnLoadCallback(drawVisualization); 
    </script> 
    <div id="visualization" style="width: 780px; height: 300px;"></div>

的JavaScript不火的AJAX調用後，我想我知道應該是這樣的，但想不到的邏輯方式因爲JSON是由AJAX調用的PHP文件生成的。

有沒有人有任何建議？

Image of graphs working correctly

來源

2013-08-12 Dan Taylor

是否通過（檢查瀏覽器的文檔檢查>>網絡）之前和Ajax調用後您的Ajax請求去。如果它確實

嘗試在發送Ajax代碼

google.setOnLoadCallback(drawVisualization)隊列的方法drawVisualization加載頁面時調用PHP文件與drawVisualization()更換google.setOnLoadCallback(drawVisualization);。在通常的Web請求/響應流程中，在加載所有頁面元素（即腳本，樣式表圖像等）後調用此方法。

但是，當您通過ajax調用此頁面時，該頁面已經加載並且永遠不會進行此調用。因此需要使用drawVisualization()直接調用函數。

來源

2013-08-12 09:37:38

謝謝！用drawVisualization（）替換工作！ –

我的榮幸。我解釋了爲什麼這在答案中起作用。你可以選擇並（可選）upvote這個答案，如果它幫助你。 –

在AJAX呼叫的頁面上使用谷歌圖表

回答

相關問題