实时更新ajax图表

Question

我有一个网站，每秒提供大约20-50个小部件，我想创建一个图表，该图表可自动从服务器获取数据，然后更新该图表，并且我希望该图表在添加和删除更多数据时从右到左运行旧值并添加新值。我想要一个javascript和php解决方案。

我尝试过google，但找不到任何解决方案，但我一次找到了教程，但现在我失去了该链接:(因此，以链接，代码段或查找内容的形式提供的任何帮助都将有所帮助。

我想要做的一件事是让窗口小部件以获取数据的延迟开始，但在初始获取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); 
}