实时更新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); 
}