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.

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.

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.