High performance JavaScript chart API for Mobile applications through HTML

Question

I'm working on a cross-platform mobile application through MoSync. Regarding a JavaScript chart for displaying data come from Bluetooth in the mobile device, I need a JavaScript chart API which has a very high rendering speed and performance. It should be fast enough to draw/redraw/update the chart as the data will be injected to the Webview. AFAIK from testing couple of APIs, data injection reduce the speed in the mobile applications. FFI, following points could be helpful to show how fast the chart should be in order to run smoothly in the application.

1. Update: every 500ms or possibly 250ms
2. New data per update: three arrays with size 50 for three series
3. Data traverse (from Bluetooth to chart API): c++ >> UI (HTML) >> WebView >> chart API

Note that I am aware of tons of available JavaScript chart APIs, however I need a piece of advice which has considered the explained situation.

Solution 1

Below you'll find my research. Hopefully, this helps you find a solution.

1. Comparison of JavaScript Data Visualization Libraries specifically says that flotr2 is built for performance. It was posted on June, 2012.

   Mobile friendly: Yes, built for performance and includes touch events / multi touch

   Interesting features: extensible plugin framework, tuned for performance. JSON api, programmable for interactivity

2. RGraph: Notable solution that specifically addresses performance and mobile issues. They have a whole page breaking down how they achieve superior performance.

3. JSXGraph: The comparison article 13 Chart and Graph plotting javascript plugins states that "special care has been taken to optimize the performance." However, I didn't see anything on the site about mobile support.

4. You might want to have a look at these:

   http://jsperf.com/search?q=chart

   The only one I can see there that would be any use for you is flot vs. raphael, though. Of course you can always try to build on top of that and write your own tests for other libs you're interested in.

   via https://stackoverflow.com/a/9900526/1085891

5. Unfortunately, Javascript Graphs and Charts libraries comparison does not have a performance criteria but I thought might still be helpful.

6. Another via r/programming: https://canvasjs.com

Extra: JavaScript Performance On Mobile Devices

Solution 2

Here is another High Performance Charting Library called CanvasJS

It renders over 100,000 datapoints in 100-200ms. Because it is based on Canvas, it works on most modern devices.

Solution 3

I've had excellent experiences with the Highcharts charting library with large datasets (up to 10000 points). It uses SVG and VML for rendering, which is much faster than canvas based solutions. Plus, because it doesn't use flash, it will work on most mobile devices.