I have some realtime data: 3 integers that are changing over time. These integers are from my accelerometer readings: x, y, and z. I was thinking of a way to plot these data so it will be easier to trend the changes.

There are many chart libraries are out there such as flot. What I want to do is represent the integers as bar heights. There are two methods I can use to display the bar graph:

1. Use divs for the bars which will be appended to a parent div.

2. Use an HTML5 canvas to draw the bars that will represent the integers.

My question is: which of these two methods will work better from the performance perspective, assuming the data update frequency is 50 msec (i.e., data will change every 50 milliseconds).

I have some realtime data: 3 integers that are changing over time. These integers are from my accelerometer readings: x, y, and z. I was thinking of a way to plot these data so it will be easier to trend the changes.

There are many chart libraries are out there such as flot. What I want to do is represent the integers as bar heights. There are two methods I can use to display the bar graph:

1. Use divs for the bars which will be appended to a parent div.

2. Use an HTML5 canvas to draw the bars that will represent the integers.

My question is: which of these two methods will work better from the performance perspective, assuming the data update frequency is 50 msec (i.e., data will change every 50 milliseconds).

• javascript
• jquery
• html
• charts

• i would think that for rapid-fire real-time, re-using the same bars over and over would be more efficient than having to re-draw the whole chart, but canvas is getting more and more GPU help these days as well... – dandavis Commented Jun 3, 2014 at 15:57
• @dandavis i dont care about the gpu , i care about the cpu , and i will add new bars , i will not use same bars , each time the integer changes , a new bar will be added . – ProllyGeek Commented Jun 3, 2014 at 15:58
• well, it you add a new bar each time, you have to use canvas: the dom will eventually crash if adding tens of thousands of bars. i was thinking more you show a full screen width of them, say 100, and just scoot the heights down one, new values on the right, old values discarded on the left. That would likely be much faster than redrawing a raster each time, and all youd'e need to do is adjust the height of each bar in a loop... – dandavis Commented Jun 3, 2014 at 16:02
• @dandavis what if i want to keep the old data to scroll back and watch it ? – ProllyGeek Commented Jun 3, 2014 at 16:03
• use pagination techniques and templating so you can store the past in "json" instead of html for max/unlimited capacity. – dandavis Commented Jun 3, 2014 at 16:04

5 Answers 5

To a certain extent this depends, it's going to depend on a few factors:

• The number of items you've got that you need to update (are you talking 10s, 100s, 1000s or more)
• The frequency that you want to update is going to be a big factor, you're limited based upon the speed that the browser can execute the JavaScript.
• The browser - some browsers can render content at significantly different speeds.

A good example to pare is looking at some of the D3 performance parisons. Because the core library is doing the same work underneath, this is paring the render speed between SVG (DOM based) and Canvas rendering. Take a look at these two swarm examples first:

• Canvas Swarm
• SVG Swarm

If you start scaling up the frequency and the number of items Canvas is going to outperform SVG, because it's a much lighter workload for the browser. It doesn't have to manipulate the DOM in the same way, check CSS rules to apply etc. However SVG is more powerful because of these.

There's a really good breakdown of performance in this post on the D3 google group which pares browser render times. To pull out some numbers as an example (although these figures are a little old):

• Chrome was 74x slower rendering SVG over Canvas.
• Firefox was 150x slowe rendering SVG over Canvas.
• Opera was lightening fast at SVG but 71x slower at render Canvas over SVG.

Here is a fiddle showing both a flot bar chart and a DOM / div approach. You can run them seperately or together and pare the look and the cpu load with your taskmanager.

This is based on my answer to this question (which gave the Windows 7 Task Manager style to the chart.)

The update loops for both methods:

function update() {
    GetData();
    $.plot($("#placeholder"), dataset, options)
    timerFlot = setTimeout(update, updateInterval);
}

function updateDom() {
    GetData();
    $('#domtest').html('');
    for (var i = 0; i < data.length && i < 100; i++) {
        $('#domtest').append('<div class="bar" style="height: ' + (3 * data[i][3]).toString() + 'px; top: ' + (300 - 3 * data[i][4]).toString() + 'px;"></div>');
    }
    timerDom = setTimeout(updateDom, updateInterval);
}

I would remend using d3 and a plimentary charting library to plot out your bar chart. You can then use svg which is more performant than appending dom nodes. I would check out c3

I would second Sean's answer about D3. Coupling that with either jQuery or D3's native json handling you can pull data quite rapidly. For instance, I've written code to pull LDAP query data with records numbering in the 1000's with turnaround times of a second or so. But that's server side.

On the rendering side, see these examples paring the difference between canvas and SVG rendering performance. It's not a benchmark per se but you can see pretty clearly that performance not an issue.

bl.ocks/mbostock/1276463 - bl.ocks/mbostock/1062544 - bl.ocks/mbostock/9539958

But to your question about charts, D3 very elegantly handles data updates with data joins. Here is a nice article about updating a data series over time. bost.ocks/mike/path/

Hope that helps.

I would suggest going through the Canvas approach.

Changing the Dom elements causes the DOM repaint to be called to paint the element on the screen. In your case there are 3 elements which will be changing frequently.

The internal operation of animation will be done this way: An element with x height to changed to x+3. First step the browser changes the height of the element to +1 repaints adjusts all the children within it. And then increases it by +1 and repaints and adjusts the children and so on. Every time it changes the element there will be lot of happenings inside the browser.

Coming to canvas: it's like a painting board no matter how many cycles you increase or decrease canvas will not make any iterative paint calls.

Hope this provide some info.