Real time data graphing on a line chart with html5

javascript jquery html canvas html5-canvas
Mehran picture Mehran · Jun 28, 2011 · Viewed 109.6k times · Source

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.

Answer

Drew Noakes picture Drew Noakes · Jul 25, 2013

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.

Related questions

Get pixel color from canvas, on mousemove

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.…

Read More
jQuery equivalent of getting the context of a Canvas

I have the following working code: ctx = document.getElementById("canvas").getContext('2d'); Is there any way to re-write it to use $? Doing this fails: ctx = $("#canvas").getContext('2d');

Read More
How to identify the type of a selected object?

I am placing Text, Image and Shapes on canvas using Fabric.js. I have made Three different Edit-Panels for all three. When user select text I want to show text panel. like wise for image and shapes. How to identify …

Read More