Javascript big-data visualisation

Question

I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data: 5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.

The question is what presentation library? The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update. I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/ I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)

Answer 1

Well, I think I'll give everyone my own answer to my question: Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs. Way to go, Dygraphs!

Answer 2

Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.

My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.

Good luck!

Answer 3

I am developing a very similar application.

I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.

I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.

This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).

Another option is Hightcharts, but that's not free.

Answer 4

Check raphael js Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.