IE Plotting performance for large graphs

[GoogleCodeExporter]

Hi,

I am using Flot 0.7 to plot a large amount of acceleration data, with HTML 
elements overlayed on top of the canvas. It works great on Google Chrome, 
Safari etc. but in IE (IE9 and 8) it either doesnt plot at all, or stops 
plotting after a few thousand points.

I have noticed that the width of the plot seems to make a difference (even 
Chrome refuses to plot with a width > 30,000px) but its difficult to tell what 
is causing the problem as there are no JS errors and the canvas element is 
being created without errors

Can anyone either suggest a way to fix this (without reducing the no. points), 
or at least, a way to debug the plotting process (can I trigger an event if it 
stops plotting?)

The data contain ~100,000 points btw

Thanks in advance

David

Original issue reported on code.google.com by da...@222sports.co.uk on 12 Jul 2012 at 5:21

[GoogleCodeExporter]

It sounds like an issue with Excanvas.  Could try Flashcanvas 
(http://flashcanvas.net/) instead, and let me know whether you still see the 
problem?

Original comment by dnsch...@gmail.com on 15 Jul 2012 at 8:08

• Changed state: Needinfo

[GoogleCodeExporter]

Thanks for suggestion but im not using Excanvas or Flash with IE9 (I use them 
from IE7 & 8 only), IE9 works ok with Flot out of the box

Original comment by da...@222sports.co.uk on 15 Jul 2012 at 8:41

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 15 Jul 2012 at 8:43

• Changed state: New

[GoogleCodeExporter]

Found out this is not actually a performance issue but IE9 Canvas is limited to 
8000(ish) pixels in height/width, the rest of the canvas is created but it 
stops drawing beyond this boundary.

Surprised this isnt better documented, I think il have to stitch the graphs 
together to get around this one

Cheers

Original comment by da...@222sports.co.uk on 7 Aug 2012 at 11:12

[GoogleCodeExporter]

Out of curiosity, what are you working on that requires 30k pixel canvases?

I'd guess that the reason it isn't documented better is because you're actually 
the first to try it; even stretching a single view across 5 HD monitors is less 
than 10k, and virtually all uses of canvas never exceed 1-2k.

Thank you for reporting and following up on this; it's useful information.

Original comment by dnsch...@gmail.com on 8 Aug 2012 at 10:35

• Changed state: WontFix

[GoogleCodeExporter]

The graph is plotting motion data from a wristband that records movement during 
sports, I am using flot to draw the raw data output then adding html elements 
on top to show particular points during the exercise. The plot overflows the 
screen width so the user uses a separate navigation panel to jump to particular 
points in the data.

I guess you are right it is a bit of an unusual request, but all other browsers 
seem happy to plot 30-40k pixels in width without any noticeable lag

Regards

David

Original comment by da...@222sports.co.uk on 8 Aug 2012 at 10:44

[GoogleCodeExporter]

Normally when you have more data than is visible on screen at a time, you'd use 
the navigation plug-in, or some simple custom code, to draw only what's visible 
and update the min/max and redraw as the visible area changes.  This way your 
canvas is only ever 1-2k pixels in size, which will give you better (perhaps by 
a lot) performance even on those browsers that don't limit the size.

Is there a reason that won't work in your case?

Original comment by dnsch...@gmail.com on 8 Aug 2012 at 10:52

[GoogleCodeExporter]

The html overlays are all positioned absolutely with their offsets based on the 
width of the canvas element so it would become tricker if the data was being 
introduced like that. Also from a UI perspective its a lot more seamless to 
load the whole lot in one go.

Thanks for the suggestion though, I think this is the route I will have to go 
down to accomodate IE

Original comment by da...@222sports.co.uk on 8 Aug 2012 at 11:02