Performance, onComplete? Queuing

10 views
Skip to first unread message

Anthong Redbeard

unread,
Jun 23, 2009, 9:55:06 PM6/23/09
to google-excanvas
I am using this library with JQuery FLOT for charting. Everything
works fine at a very basic level. When I have several charts on the
same page with a few hundred plot pints each I reach some significant
performance issues (Works great in FF 3+ of course). I need a way to
improve the performance, and/or allow the user to see some stuff
drawing on the screen periodically.

The problem I'm having is that all of the javascript goes through and
then the browser appears to be completed locked up until it finishes
rendering the VML. I tried creating ssome onComplete events and
queueing the charts so they would draw one at a time, but each method
I tried seemed to produce the same result where all the javascript
would fly through and then the browser would stall until all charts
were rendered.

The only improvement I was able to add is to on render the visible
charts instead of ones below the fold, but it;s not enough.

I would greatly appreciate any ideas in being able to have an
onComplete event that trigggers AFTER the canvas/VML is complete for a
FLOT chart, and/or some tips for making it faster.

thanks.
-Anthony

Emil A Eklund

unread,
Jun 23, 2009, 10:09:19 PM6/23/09
to Anthong Redbeard, google-excanvas


ExCanvas creates a new VML element for every stroke so it's not that
surprising that you're running into performance issues on pages with
multiple large charts.

There are a few things you can do to speed things up however.

1) If you update a chart try clearing the canavs first instead of just
drawing a new layer on top. That way the VML elements for the old layer
are removed, thus reducing the size of the DOM.

2) Try drawing off screen like you suggested by setting display to none
before you start and restoring it once done drawing. You shouldn't have
to wait for any type of event here, resetting it to display the element
will trigger a reflow drawing the chart.

3) Use the silverlight implementation of ExCanvas instead of the VML one
when available. The silverlight implementation is much, much faster
(last time we checked it was faster than the native canvas
implementation in firefox). As silverlight is installed for an
increasingly large percentage of IE users this might be viable and it'ss
certainly the easiest way to drastically speed things up in IE.


--
Emil A Eklund
em...@eae.net

signature.asc

Fabien

unread,
Jun 24, 2009, 3:19:22 AM6/24/09
to google-excanvas
I think Flot needs to be displayed to draw a graph, at least at the
beginning (especially to get the container dimensions). There ar maybe
events fired during this process, so you maybe can use them to hide
the graph during the VML render and show it at the end.
How many graphs do you have on the same page ? and with how many
points ?
> e...@eae.net
>
>  signature.asc
> < 1 000AfficherTélécharger
Reply all
Reply to author
Forward
0 new messages