實時更新 ajax 圖表

Question

我有一個網站，每秒提供大約 20 - 50 個小部件，我想創建一個圖表，自動從服務器獲取數據，然后更新圖表，我希望圖表在添加和刪除更多數據時從右到左運行舊值並添加新值。 我想要一個 javascript 和 php 解決方案。

我試過谷歌，找不到任何解決方案，我找到了一個教程，但現在我失去了那個鏈接:(所以任何形式的鏈接、代碼或要尋找的幫助都會有所幫助。

我想要的一件事是讓小部件以延遲獲取數據開始，但在初始獲取 5 秒后開始顯示數據，然后每 2 秒獲取一次數據，但每秒加載數據。 這將減輕服務器上的負載，同時還可以生成平滑的圖形。

任何幫助，將不勝感激....

php http://support.nevron.com/KB/a175/implement-real-time-chart-in-aspnet-application-using-ajax.aspx這樣的東西

Answer 1

因此，您只需要兩個以不同時間間隔運行的函數，它們可以訪問存儲所有數據的同一個變量

function runChart() {
  var dataObject = [];

  fetchFromServer = function() {
    //Make your Ajax call here
    //and then update 'dataObject'
  }

  //set fetchFromServer to fire every 5 seconds
  setInterval( function () { fetchFromServer() }, 5000 ); 

  loadToChart = function() {
    //In here keep track of what was the last data you added to the chart
    //pull data-points from 'dataObject' 
    //and display the next data-point on the graph
  }
  //set loadToChart to fire every second
  setInterval( function () { loadToChart() } ,1000); 
}