Looking for a javascript chart library that can draw ~200,000 points on a scatter plot [closed]

Question

I am building a web application who's interface includes a large scatter plot to give the user an overview of his data. The scatter plot has about 200,000 points. Currently I am using the JFreeChart Java library server side which does a great job of drawing the plot - it only takes around a second to render it.

To make my app more interactive, I'd like to switch to using Javascript to draw the chart client-side. This would let me include interactive filtering of points, tooltips, clickable points, etc. I've experimented with Google Charts, but this takes an age to render and brings the browser to a standstill.

Does anybody know of a Javascript charting library that can cope with such a large dataset? Or should I abandon the idea and stick with JFreeChart? I don't mind if the page itself will take a while to load (this is inevitable given the large amount of data to be transferred) but I need the chart to update in reasonable time in response to user input.

Olli

Good question. With a data set that large, I'm thinking you may want to build a heatmap instead though – Misshapen

Answer 1

My suggestion would go to Highcharts and Highcharts Stocks (http://www.highcharts.com).

You can find a demo there with 52k datapoints, with zoom, tooltips and interaction : http://www.highcharts.com/stock/demo/data-grouping, and the chart takes about 90ms to build on my (quite fast) machine.

However, very large datasets are most likely to pose big performance issues, whether it is on network transfer, memory consumption, display time, etc... Moreover, 200k data points amount to about 1 data point/pixel on a 600*400 graphic, or 400 data points per column, it just makes no sense. Maybe some grouping and/or filtering would be useful.

Slothful

Answer 2

For those of you who are looking at this question today, DC.js is a powerful library for charting large datasets, which is built on D3.js. It has several chart types including scatterplot, bar, and line graphs. They run though Square's crossfilter library to map-reduce data before plotting.

Abner

DC.js is great library but it simply is not performant enough to display a large number of nodes. I came to this question to look for an alternative library that can draw scatter plots in the size of 5k nodes. SVG-based libraries, like dc.js, simply cannot draw that amount of data points, but instead crashes the browser. – Prissy

Answer 3

As others have pointed out -

Creating such a high-node interactive plot in a limited space is virtually useless - the points would be unclickable and the plot would be overpopulated, to say the least.

You can use the current viewport and the current zoom level to limit what you need to show

Zoom level grouping and breaking down

You can use the current zoom level to draw your charts accordingly, such that a zoomed-out view presents grouped together info and as you zoom-in to a particular region you break down the data into more plots.

I would suggest that you group together small variations of your data and as your user zooms in, you can break down the currently-viewable data into smaller chunks.

Current viewport/draw only data that is in the viewport

Draw points only when they are only in the viewport - avoid drawing all of the points of you scatter plot on each zoom level. Your user most likely wants to concetrate on a point - that would be the reason he zoomed in to that point - therefore avoid drawing all of broken-down points of that particular zoom level.

Don't limit yourself to plotting libraries

A scatter plot is fairly simple to implement in any Canvas/SVG library that allows the basic operations of drawing shapes/points - Since this is a fairly advanced use-case, I would ditch the idea of limiting myself to libraries that allow plotting and look around for general libraries that allow SVG/Canvas drawings.

---

A crazy idea but I would try it:

There is a library that uses WebGL for 2D drawings on HTML5 canvas(it uses the graphics card as well as the CPU to draw graphics), called Pixi.js.

It's targeted to game development mostly but it would be a slam-dunk to draw a scatter plot with it, zoom around and allow for click events on your points.

Sassaby

Answer 4

As an interim or alternate solution, consider deploying your JFreeChart via Java-Web-Start. This example suggests ways in which to update a chart's appearance interactively.

Unamuno

Answer 5

If you have the luxury of not developing for IE7 or IE8, then for large numbers of data points, you might want to try to leverage your graphics card via webgl. I haven't tried it yet but three.js looks interesting.

Biplane

Answer 6

You might want to experiment with charting libraries that are built upon raphael.js. Not sure about their rendering performance, but they are excellent html5 libraries. Worth a try.

http://g.raphaeljs.com/

Maxim

Answer 7

I suggest to use graph ExtJs 4 library

http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.html

You need to transfer data as json if it's large data.

Enterectomy