实时更新 ajax 图表

Question

I have a website which serves around 20 - 50 widgets per second and I wanted to create a chart that automatically gets data from the server and then updates the chart and I want the chart to run from right to left as more data is added and remove the old values and add the new values. I would like a javascript and php solution.

I have tried google and cannot find any solutions for this and I found a tutorial once but now I have lost that link:( So any kind of help in form of a link, piece of code or what to look for will help.

One thing that I wanted was having the widget start with a delay of fetch data but start displaying the data after 5 seconds of the intial fetch and then fetch data every 2 seconds, however load data second by second. This would ease the load on the server while also generating smooth graphs.

Any help would be appreciated....

Something Like this for php http://support.nevron.com/KB/a175/implement-real-time-chart-in-aspnet-application-using-ajax.aspx

Answer 1

So you just need two functions running at different intervals that have access to the same variable where all the data will be stored

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); 
}