用彗星實時更新谷歌圖表

我想使用谷歌圖表創建一個實時更新的條形圖。當用戶加載頁面時，我想顯示當前結果。但只要數據庫中的數據發生變化，我想將這些更改推送到客戶端並更新圖表。用彗星實時更新谷歌圖表

下面是來自谷歌圖表頁面條形圖例如：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn('number', 'Expenses'); 
    data.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script>

我想我可以用一個Ajax請求提取數據每隔幾秒鐘，並重新繪製圖表。但也許有一些inbuild方法在我失蹤的Google Charts中。我也讀了很多關於Comet，但我從未實現過這個概念。

有沒有其他人遇到過這個問題？

來源

2012-04-15 Pascal Klein

上的定時器實現AJAX是最簡單的解決方案：

// using jQuery for simplicity, but you can implement in other libraries or vanilla javascript if you want 
function drawChart() { 
    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 

    function updateChart() { 
     $.ajax({ 
      url: 'path/to/data/source/', 
      data: {/* any parameters you need to pass to the server to get your data back */}, 
      dataType: /* text, json, XML, whatever your server returns */, 
      success: function (response) { 
       // use response to create/update DataTable 
       chart.draw(data, options); 
       // update the chart again in 2 seconds 
       setTimeout(updateChart, 2000); 
      }, 
      error: function (response) { 
       // handle errors 
      } 
     }); 
    } 
    updateChart(); 
}

使用彗星服務更復雜一點來實現，因爲它需要建立在JavaScript和服務器上像Socket.Io。

使用Comet服務將始終保證圖表中最新鮮的數據，而AJAX更易於實現。彗星需要維持與服務器的有效連接，而AJAX會提出多個獨立請求。

來源

2013-07-26 15:17:22 asgallant

用彗星實時更新谷歌圖表

回答

相關問題