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

Answer 1

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.

Answer 2

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).

Answer 3

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/

Answer 4

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".

Answer 5

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 .

Answer 6

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.