Fast and responsive interactive charts/graphs: SVG, Canvas, other?

Question

I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation

Answer 1

I recently worked on a near-realtime dashboard (refresh every 5 seconds) and chose to use charts that render using canvas.

We tried Highcharts(SVG based JavaScript Charting library) and CanvasJS(Canvas based JavaScript Charting library). Although Highcharts is a fantastic charting API and offers way more features we decided to use CanvasJS.

We needed to display at least 15 minutes of data per chart (with option to pick range of max two hours).

So for 15 minutes: 900 points(data point per second) x2(line and bar combination chart) x4 charts = 7200 points total.

Using chrome profiler, with CanvasJS the memory never went above 30MB while with Highcharts memory usage exceeded 600MB.

Also with refresh time of 5 seconds CanvasJS rendering was allot more responsive then Highcharts.

We used one timer (setInterval 5 seconds) to make 4 REST API calls to pull the data from back end server which connected to Elasticsearch. Each chart updated as data is received by JQuery.post().

That said for offline reports I would go with Highcharts since its more flexible API.

There's also Zing charts which claims to use either SVG or Canvas but haven't looked at them.

Canvas should be considered when performance is really critical. SVG for flexibility. Not that canvas frameworks aren't flexible, but it takes allot more work for canvas framework to get the same functionality as an svg framework.