Unresponsive Script and/or high response time for bar chart using HighCharts

Question

I am facing an issue when I try to render a bar chart which has large number of data points. But this happens only in FireFox. A popup shows up saying unresponsive script after 10 secs & if I continue it takes around 20 secs to display. I have set up a standalone example http://jsfiddle.net/tankchintan/UWB8h/5/

In Chrome although it takes around 5 seconds it still renders without issue. I was wondering if there is a fix for this? Or can I do something to get the response time to go down? There are around 1000 rows, which IMHO is not that high.

Thanks for the help!

Answer 1

You are hurting your users in two ways:

• first they have to wait few second for the page to render and the whole browser freezes because JS engine is unresponsive

• but more importantly, you are hurting them because you are displaying a bar chart with almost 1000 horizontal bars!

The second point is actually more important. Of course browsers vary in JavaScript performance (Chrome is known to be faster, however Firefox doesn't hang on my computer - but I know what you mean). Probably one day all browsers will happily render this chart in no-time.

But will your users appreciate a chart that is 10 screens long? Imagine a web page with thousands of rows in a single table. To the point - think about different data representation: maybe truncate the data after 20 samples and display extra "Others..." bar?

BTW I had a similar problem with jqplot - I was rendering 10+ simple charts on the same page. Just like in your case Firefox was screaming about script running too long. I fixed it by rendering one chart at a time with pauses. The page works like a charm, is much more responsive and pleasant.

Answer 2

I agree with the difficulty of showing this number of data points. This occurs, mostly in FF in other types of chart as well, in my case the column chart.

The difference here, is that there can be reasons for showing a trend over a large dataset, and Highcharts Zoom functionality makes such charts much more usable. The user can spot high spots and anomalies in a larger set, and zoom in to view the individual columns within that region. Also with column charts, the entirety of the presentation is on one page.

That said, the unresponsive script issue remains, and regardless of this type of requirement, it will be necessary to require the user to specify a subset of the data before rendering the chart.