0

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!

Community
  • 1
  • 1
Chantz
  • 5,883
  • 10
  • 56
  • 79

2 Answers2

2

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 - 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.

Tomasz Nurkiewicz
  • 334,321
  • 69
  • 703
  • 674
  • I agree on both the points, completely. Actually this vis is one part of the page and all other components load pretty fast. I was going to work on reducing number of samples or removing horizontal bar completely anyways. I was just curious as to if having 1000 rows is a reasonable upper bound? If not then are there ways to mitigate the response time. – Chantz Jun 07 '12 at 14:10
  • 2
    @Chantz I don't think 1000 is a reasonable upper limit. If one bar is 20 pixels thick you'll still get ca. 20 screens... I would say 20/50/100 depending on the layout is reasonable. Don't expect JavaScript engine (dynamic, garbage-collected language) to be fast enough to render so much graphics. – Tomasz Nurkiewicz Jun 07 '12 at 14:15
0

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.

Rob Hoexter
  • 1