3

We are trying to choose SVG (HighCharts, D3) or Canvas for our application. Plotting efficiency is critical for us. So I did a very simple benchmarking on the rect drawing. Please check:

It turns out that highcharts spends around 900ms to plot, D3 spends around 50ms~70ms, while Canvas spends ~1ms to plot (check console.log).

I expected SVG may be slower than Canvas. But I never expect the gap is so big. Even worse, if I change the iteration number to be 10000, Canvas finishes within 10ms, while SVG runs for around 28s!!! Our application would not have so many objects, but this performance is not acceptable if we want to scale up.

Did I do anything wrong? How to write a more efficient code for SVG? The SVG exporting feature is also important for us.

Joy
  • 9,430
  • 11
  • 44
  • 95
  • What connection does drawing 10000 rect elements have with drawing a plot (which you'd do with a single path element)? – Robert Longson Feb 27 '14 at 09:55
  • Performance-wise, we're also finding that all the SVG elements in a chart can make DOM operations (reflow/repaint) on a page containing charts to be very, very slow, particularly on a dashboard page that combines many different charts. Whereas, canvas is one element per chart, no matter how complex the render, and changes inside a canvas don't even trigger browser reflow operations. There are clearly other advantages to using SVG, but we're finding that when the question is scale and overall UX performance after the initial plot, canvas is clearly preferable, by at least an order of magnitude. – XML Apr 22 '14 at 15:47

1 Answers1

1

You should compare rendering the same object, not initialize full chart and use renderer. In this scenario you should use this solution:

http://jsfiddle.net/jxpSk/2/

$(function () {

        var startTime = $.now();
        var ren = new Highcharts.Renderer($('#container')[0],600,1000);

        for (var i = 0; i < 1000; i++) {
            ren.rect(i, i, 100, 100, 0).attr({
                fill: '#FF0000'
            }).add();
        }

        var endTime = $.now();
        console.log('Time: ' + (endTime - startTime));
    });

then will be more objective.

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • @Bochan, thanks. But I need the 'chart' object to add the tooltips. And why it is faster? But the timing is speeded to ~350ms, which is still much worse than D3. What is the reason? – Joy Feb 27 '14 at 09:36
  • You can get rid of jquery and try to use standlaone wrapper http://www.highcharts.com/component/content/article/2-news/58-highcharts-standalone-framework – Sebastian Bochan Feb 27 '14 at 09:38
  • Ok, but in highcharts you can try to not use it, at this moment it is our efficient and we still develop our products to achieve better performance. Second solution is try to use a render chart on canvas like here: http://stackoverflow.com/questions/8995177/render-highcharts-canvas-as-a-png-on-the-page – Sebastian Bochan Feb 27 '14 at 10:19
  • 2
    We did some profiling, and it turned out Highcharts calls two methods that are not necessary when creating simple rectangles. With the updated code the performance is about the same as D3: http://jsfiddle.net/highcharts/jxpSk/3/ – Torstein Hønsi Feb 27 '14 at 10:53
  • @TorsteinHønsi. Thanks. Yeah, the newest HighCharts is faster. But could you please have a look at http://stackoverflow.com/questions/22067388/highcharts-performance-degrades-dramatically-with-chart-and-renderer-togethe? – Joy Feb 27 '14 at 11:40