jsplumb is working slow

[Jamshid HASHIMI]

Hello,

I am working over a huge database, where we want to visualize the
dependency of searched keyword to overall records (if they have
dependency) via jsplumb.

When trying to work like here:
http://olegpuzanov.com/2010/06/08/visualise-your-twitter-friends-with-jsplumb-jquery/
and when the count of the items (In above link, the sizeof($this-
>followers) in displayHtml() function) is equal to 200 or more, then
it takes lots of time getting the visualized data in the browser. IE
alerts to stop the script or not and Chrome and Firefox just wait so
much time to get the result.

Is there anyway to optimize the jsplumb to work faster or is there any
alternatives I have for this purpose?

Thanks

Regards

[Simon Porritt]

You can try making this call before you start creating connections:

jsPlumb.setSuspendDrawing(true);

and then when you want it to draw again:

jsPlumb.setSuspendDrawing(false, true);

the second argument is optional and tells jsPlumb to do a full repaint immediately after that call (otherwise you can call jsPlumb.repeaintEverything() manually).

This will most likely help.  But be aware that browsers do just get slow when you have hundreds of connections and nodes, particularly IE of course.  

[Simon Porritt]

I just saw your tweet. Got any timing figures?  I'm always interested in ways of making it faster.

[Jamshid HASHIMI]

Hello Simon,

Thanks for fast reply.

I finally decide to draw connections with jsplumb in pagination
format, 50 connection in every page. If the dependent records are
more, then the user can go next and previous to get the results.

I think, jsplumb is slow not because it has any problems, but it is
the browser which cannot handle lots of graphic rendering operations.

For now, i think this is a better way to go on. I hope, you are also
agree with me.

Thanks

On Jun 3, 3:00 am, Simon Porritt <simon.porr...@gmail.com> wrote:
> I just saw your tweet. Got any timing figures?  I'm always interested in
> ways of making it faster.
>

> On Sat, Jun 2, 2012 at 3:39 PM, Simon Porritt <simon.porr...@gmail.com>wrote:
>
>
>
>
>
>
>
> > You can try making this call before you start creating connections:
>
> > jsPlumb.setSuspendDrawing(true);
>
> > and then when you want it to draw again:
>
> > jsPlumb.setSuspendDrawing(false, true);
>
> > the second argument is optional and tells jsPlumb to do a full repaint
> > immediately after that call (otherwise you can call
> > jsPlumb.repeaintEverything() manually).
>
> > This will most likely help.  But be aware that browsers do just get slow
> > when you have hundreds of connections and nodes, particularly IE of course.
>

> > On Sat, Jun 2, 2012 at 3:32 PM, Jamshid HASHIMI <jamshidhash...@gmail.com>wrote:
>
> >> Hello,
>
> >> I am working over a huge database, where we want to visualize the
> >> dependency of searched keyword to overall records (if they have
> >> dependency) via jsplumb.
>
> >> When trying to work like here:
>

> >>http://olegpuzanov.com/2010/06/08/visualise-your-twitter-friends-with...

[Simon Porritt]

Hi

I think that's probably the best approach, yep. The graphics speed varies very much between different browsers.  

I must admit I was surprised about your figure of 100 connections, though: there's a test page on jsplumb.org which is not linked to but which I use to get a rough feel for how much you can load up each browser:

http://jsplumb.org/jquery/loadTest.html

I've currently got that painting 300 connections and on FF on my Mac the whole thing takes about 1.5 seconds (Chrome is about half that).  I'm not sure what the time is on IE at the moment....I've got too many apps running to be able to start up my VM to check ;)

[Jamshid HASHIMI]

Thanks Simon for great help.

After applying these lines; I see some great changes in the speed of my charts:

jsPlumb.setSuspendDrawing(true);

jsPlumb.setSuspendDrawing(false, true);

Thanks once again.