Data graphing with html [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack O开发者_运维百科verflow guidelines guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 6 years ago.

Improve this question

A line chart that updates every couple of seconds and doesn't need the page to be refreshed would be the goal (it would get the info from a separate file that updates on a server). Are any JavaScript libs(other than JQuery) that will make this is easy? Could anyone show an example on a webpage?

The data gets updated on a fixed interval. If possible the preference would be to use only CSS HTML5 and javascript.

---

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.

---

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

---

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.

---

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.

---

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.

---

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

---

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]

---

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

<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>

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

---

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

---

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/

---

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

---

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 .

---

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

---

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