Real time data graphing on a line chart with html5

Question

I want to make a line chart that updates every couple of seconds and doesn t need the page to be refreshed it would get the info from a separate file that updates on a server   is their any JavaScript libs other than JQuery  that will make this is easy  could anyone show mean example on a webpage  On a scale from 1 to 10 how hard would this be  10 being hard   Also the data gets updated on a fixed interval of 10s if that matters  And if possible I would like to stick to just CSS3 HTML5 and javascript

User · Answer

http   www rgraph net  is excellent for graph and charts

User · Answer

You might also give Meteor Charts a try  it s super fast  html5 canvas   has lots of tutorials  and is also well documented   Live updates work really well   You just update the model and run chart draw   to re-render the scene graph   Here s a demo   http   meteorcharts com demo

User · Answer

I believe this is exactly what you re looking for   http   www highcharts com demo dynamic-update  Open source  although a license is required for commercial websites   cross device browser  fast

User · Answer

You might also want to look at CanvasJS Chart which is built on top of HTML5 Canvas Element  It renders really fast and can be updated every 50-100 milliseconds without getting into memory issues    Full disclosure  I am part of the team

User · Answer

Here s a gist I discovered for real-time charts in ChartJS  https   gist github com arisetyo 5985848  ChartJS looks like it s simple to use and looks nice   Also there s FusionCharts  a more sophisticated library for enterprise use  with a demo of real time here   http   www fusioncharts com explore real-time-charts  EDIT I also started using Rickshaw for real time graphs and it s easy to use and pretty customizable  http   code shutterstock com rickshaw

User · Answer

Several things that might help you     Canvas Express is a powerful charting library    http   canvasxpress org   Here you can find a tutorial about rolling your own equation based graphs    http   www html5canvastutorials com labs html5-canvas-graphing-an-equation   Using a canvas solution is very easy  You can retrieve your periodic data for the graph using ajax  and redraw the graph every time you retrieve new data  Since it s all client side you won t have to refresh the page   If you knwo your way aroudn javascript and ajax  then it s gonna be a medium difficulty  If you don t then you ll probably have to post some more questions on Stack Ovreflow to help you with the parts you get stuck with

User · Answer

There are several charting libraries that can be used   gRaphael  Highcharts and the one mentioned by others  These libraries are quite easy to use and well-documented  lets say 1 on the difficulty scale    AFAIK  these libs are not  real-time  because they don t give the possibility to add new points on the fly  To add new point  you need to redraw the full chart  But I think this is not a problem because redrawing the chart is fast  I ve made some tries with gRaphael and I didn t notice any problem with this approach  If you update rate is 10s that should work ok  but it may depends on the complexity of your charts     If redrawing the full chart is a problem  you may have to develop a chart by yourself with a vector graphics lib like Raphael or paper js  That will be a bit harder than using a charting lib but should be feasible   Let say 5 on the difficulty scale    As you are getting the data on a fixed intervall  you can use a regular ajax lib  jQuery is ok for me but there are some other choices  That may not be the best choice for a non-fixed interval and in this case you may have to look at something like socket io but it would have consequences on the server side too   Note1  Raphael  gRaphael and Highcharts are not purely HTML5 but SVG VML but I guess this is an acceptable choice too    Note2  it seems that Highchart doesn t require to redraw the chart when inserting new points  See http   www highcharts com documentation how-to-use live-charts

User · Answer

You get the data from server  update your previously available datasetand then probably use one of the freely available libraries to draw the graph  eg  http   www rgraph net  Things you might want to considering   If your chart is represents a state   get only the new data with xhr   update data on client and draw

User · Answer

Flotr2 and Envision are options  Flotr2 has a real time example on the doco page I linked  Envision is a bit tougher to get started with  so try Flotr2

User · Answer

Addition from 2015  As far as I know there is still no runtime oriented line chart lib  I mean chart which behaviors  request new points each N sec    purge old data  you could setup  declarative  way   Instead there is graphite api http   graphite-api readthedocs org en latest   for server side  and number of client side plugins that uses it   But actually they are quite limited  absent advanced features that we like  data scroller  range charts  axeX segmentation on phases  etc    It seems there is fundamental difference between tasks  show me reach chart  and have  real time chart

User · Answer

In order to complete this thread  I would suggest you to look into    d3 js  This is a library that helps with tons of javascript visualizations  However the learning curve is quite steep    nvd3 js  A library that makes it easy to create some d3 js visualizations  with limitations  of course

User · Answer

The easiest way may be to use plotti co - the microservice I created exactly for this  It depends on how you get the data  but general usage pattern is including an SVG image into your html like   lt object data  http   plotti co FSktKOvATQ8H plot svg  type  image svg xml   gt    and feeding your data in a GET request to your hash  or using a  new Image 1 1   src     JavaScript method from same or any other page  like this   http   plotti co FSktKOvATQ8H d 1 2 3  setting it up locally is also straightforward

User · Answer

I would suggest Smoothie Charts     It s very simple to use  easily and widely configurable  and does a great job of streaming real time data   There s a builder that lets you explore the options and generate code   Disclaimer  I am a contributor to the library

User · Answer

This thread is perhaps very very old now  But want to share these results for someone who see this thread  Ran a comparison betn  Flotr2  ChartJS  highcharts asynchronously  Flotr2 seems to be the quickest  Tested this by passing a new data point every 50ms upto 1000 data points totally  Flotr2 was the quickest for me though it appears to be redrawing charts regularly   http   jsperf com async-charts-test 2

[javascript] Real time data graphing on a line chart with html5

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to canvas

Examples related to html5-canvas