Representing sparse data in a Highcharts series

Question

I'm trying to generate a stacked column chart. What I want is similar to this JSfiddle example. However, I have around 30 categories and 1000 series. The series are rather sparse. There are only about 200 values. But because highcharts needs each series to have values across the x-axis categories, I'm forced to submit 1000 series each having 30 values (mostly zeroes). The chart takes over a minute to render. How can I improve this performance?

score 3 · Accepted Answer · answered Mar 22 '13 at 18:09

3

There is another way you can pass the data to highcharts, where you specify x and y for each point. This means you can skip the 0 values. In the fiddle you quoted, I modified one line to be:

data: [{x:1,y:5}, {x:3,y:7}],

http://jsfiddle.net/rh9aK/

I expect that 1000 series and 30 categories may still be too much, but this is worth a try.

One other thing, have you made sure that you don't have any series which only contain zeros ? If so, you may as well remove them before rendering.

answered Mar 22 '13 at 18:09

SteveP

18,840
9
47
60

Ah! I didn't realize you could simply refer to x-axis categories via indices. Let me test and see if that works. That my just solve my issue. – Καrτhικ Mar 22 '13 at 18:35
Great. Surprising how much data highcharts can cope with – SteveP Mar 22 '13 at 19:06

score 0 · Answer 2 · answered Mar 22 '13 at 17:59

0

JS charts, in you case, will produce too many DOM elements. It will be too complex for browser. You need some server-side solution which generate graps inside image.

answered Mar 22 '13 at 17:59

Ilya Gruzinov

31
2

Representing sparse data in a Highcharts series

2 Answers2