Take the 2-minute tour ×

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.

FYI: I'm about to go to sleep so don't expect a response until tomorrow morning

share|improve this question
check out raphaeljs.com –  Zevan Jun 28 '11 at 7:19
add comment

10 Answers

up vote 16 down vote accepted

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

share|improve this answer
I also initially tried to find solutions to "not redraw the entire chart every time" for performance reasons. But then I realised that this is a fallacy. Any solution must redraw the chart for every frame. Think about it: how does your monitor work? It continually refreshes itself from scratch, it doesn't move pixels around. Therefore any charting library that allows you to "not redraw the chart" is just providing an abstraction for you. This abstraction is convenient and desireable; nevertheless performance-wise it is still redrawing the chart in the background for every frame. –  Fletch Nov 30 '12 at 11:52
add comment

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.

share|improve this answer
Thanks its just what I needed –  Mehran Jun 28 '11 at 15:13
add comment

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 .

share|improve this answer
add comment

I believe this is exactly what you're looking for:


Open source (although a license is required for commercial websites), cross device/browser, fast.

share|improve this answer
add comment

Have you checked out ZingChart? It renders charts in HTML5 Canvas, SVG and Flash (and VML for old IE fallback). API and live data feeds allow for data updating without full chart or page refresh. see http://www.zingchart.com/learn/api/api.php

I'm on the team. You can reach our team at support[at]zingchart.com with any questions, or twitter.com/zingchart.


share|improve this answer
add comment

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.

share|improve this answer
I'd recommend this one too. It's a very solid lib. –  bottleboot Nov 30 '12 at 9:38
The flotr2 example is not real-time... it's just redrawing the whole chart repeatedly. –  tybro0103 Sep 24 '13 at 15:16
@tybro0103 Exactly, that is real-time. At first I thought like you but then I realised that this is the only way to do it. How does a movie work? Flash through 25 different pictures in a second and it looks like motion. How does a monitor work? Continually redrawing the pixels according to what is now meant to be shown, the speed of this redrawing is measured in Hertz. You can't move a pixel on a chart. You have to redraw the chart with the new locations. Even if the library abstracts it and makes you feel like you are moving pixels, it's still just redrawing behind the scenes. –  Fletch Sep 25 '13 at 20:24
@Fletch You're right in that it does have to redraw the whole thing in order to show new data. However, what I meant to say is that it reloads the whole data set repeatedly. Check the source and you'll see that the code for (...) {data.push(...)} is executed each time the chart renders. This is wasting CPU and can be a real problem when there are thousands of data points per second. A better real-time chart will allow you to simply append a single data point at a time, rather than reset the entire dataset each time you have a new point. –  tybro0103 Sep 25 '13 at 21:24
SmoothieCharts does it right: smoothiecharts.org/tutorial.html –  tybro0103 Sep 25 '13 at 21:24
show 1 more comment

http://www.rgraph.net/ is excellent for graph and charts.

share|improve this answer
add comment

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.

share|improve this answer
Really nice, although it would also be nicer if it would be able to also plot static data and even plot dynamic data over static data, for example yesterday's evolution of some price and today's current evolution, so it is easy to compare. –  Javier Mr Nov 6 '13 at 10:09
add comment

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:


share|improve this answer
add comment

Here's a gist I discovered for real-time charts in ChartJS:

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:

share|improve this answer
add comment

Your Answer


