ppath
Posts: 4
Joined: Fri Jan 09, 2015 3:05 pm

Area selection slow

Hello,

I have a line chart consisted of series of ~4K points each. The performance problem appears even with only one series (so 4K points total) which has the following point distribution:
http://imgur.com/0R4L8J8

Here I explain the problem.. I want to zoom in, so I'm selecting chart areas. Before actually selecting the area, we get a highlighted rectangle until the mouse button is released. When the highlighted area contains plot segments, or even when it's close to plot segments, the program starts slowing down.

From what I understand, the above happens because sequential (in respect to xAxis) points have big differences in their y-values, so the lines that join points are longer. When I am drawing ~4K points that lie on a straight line, there is no performance drop at all.

What is the technical limitation that produces this kind of behaviour? Can I fix it somehow?

Thanks
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Area selection slow

I cannot recreate your error/lag - http://jsfiddle.net/qntfkyrL/

Could you post live example, like jsFiddle?

Highstock offers data grouping - this should increase performance.
Also, you can see FAQ about performance: http://www.highcharts.com/docs/getting- ... erformance
Kacper Madej
Highcharts Developer
ppath
Posts: 4
Joined: Fri Jan 09, 2015 3:05 pm

Re: Area selection slow

Ok, I set some options that improve performance (except data grouping, which I want to avoid for now). I also raised the data points to 20K. You can see it here: http://jsfiddle.net/dtdpa52a/

I did a little more testing. I run the above example on the same browser on different monitors and I get different results. The first one is a retina 2880x1800 display and the second a 1920x1200. By changing the window's size or jsfiddle's vertical bars I manage to have the chart drawn in about the same number of pixels. The strange thing is that while on the 1920x1200 display it runs smoothly, on the retina display it becomes almost completely unresponsive. And that's the main problem.

Another question is that if on the above example I change the points to be on the same line (data = i; //(i%20)-5;), it runs well enough.

Also, on Chrome (and Chromium) it runs much much slower than Firefox.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Area selection slow

Tested in IE11, Firefox 35.0, Chrome 39 and Chrome 40 on different resolutions and all runs smoothly.

On higher resolution more pixels are available and more points and lines are rendered, so usage of CPU is higher.
However if size is the same, then it seems that maybe different monitor's/video driver causes lower performance?
With straight line - number of lines is lower, so performance is better.

You could check performance using Highcharts testing site: http://www.highcharts.com/studies/performance.php
Kacper Madej
Highcharts Developer
ppath
Posts: 4
Joined: Fri Jan 09, 2015 3:05 pm

Re: Area selection slow

Thanks for the answers.

I post what I have observed. There is a huge performance drop with chrome/chromium under Mac OS X either with retina display or with OS version from 10.9.x and above.

I tested it on Macbook Air (no retina) with OS version 10.8.x and it performed ok. I also run it on two Macbook Pros (with retina) and OS version >=10.9.x and the problem appeared, but only when having the browser window on the native laptop display (on external monitor it performed much much better).

Notice that the browsers are up-to-date.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Area selection slow

This issue will be passed on to the second line of support.
Kacper Madej
Highcharts Developer
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Area selection slow

I can't see this problem myself on my system, but here's a general answer:

This probably comes from the complexity of the SVG path itself. When the browser's graphics engine draws the rectangle used for zoom selection, it also has to redraw the SVG, and the more complex it is, the more resources it uses. Retina displays have twice the pixel density, so actually has to redraw 4 times the amount of pixels.

We recently did a quick experiment with sampling long data series internally before drawing the path. It would be interesting to know if this helps for your case. Please see http://jsfiddle.net/highcharts/dtdpa52a/2/ and report back what you find.
Torstein Hønsi
CTO, Founder
Highsoft

Return to “Highcharts Usage”