Real Time data graph [closed]

问题

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 7 years ago.

I would like to build a web-based real time data graph and i'm looking at the different options such as:

• Html5 canvas
• JS libraries with graph support such as Extjs

By real time i mean, either the client polling the web server say every second or using reverse ajax; the server pushes data to the client when available.

Can you please recommend any?

回答1:

You may want to consider using Flot, an open-source plotting library based on jQuery.

I'm assuming that by real-time you mean that the graph will update automatically. The following is how your code would look like if you were to fetch and plot the data using AJAX polling at 1 second intervals:

function fetchData() {
   $.ajax({
      url:      'json_fetch_new_data.php',
      method:   'GET',
      dataType: 'json',
      success:  function(series) {
         var data = [ series ];

         $.plot($('#placeholder'), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

Make sure to check out the following demo to see it in action (Click on the "Poll for Data" button):

• Flot Examples - Updating graphs with AJAX

For further information on Flot:

• Flot Project Site
• Flot Examples
• Other Flot Examples

回答2:

There is also SmoothieCharts that is designed more for this use-case.

回答3:

Other solution with design more nice and possibilities:

https://changelog.com/posts/rickshaw-realtime-javascript-graphing-library

example: http://shutterstock.github.com/rickshaw/examples/extensions.html

code: https://github.com/shutterstock/rickshaw

来源：https://stackoverflow.com/questions/3792750/real-time-data-graph