Improve the rendering time of jsplumb chart

Sujeet Singh 0
Viewed 17

I am creating a chart using jsplumb having around 300 nodes and more than 1000 connections, it takes more than 10 sec to create the connection, render and sometimes it even causes the browser to forcefully exit the tab. I am already using doWhileSuspended() while loading the data.

  instance.doWhileSuspended(function() {

    // other lines of code
    instance.addEndpoint(priority_no, {
        uuid:priority_no + "-left",
        anchor:anchor_parent,
        maxConnections:-1,
        endpoint:"Blank"
    });

    instance.addEndpoint(child_no, {
        uuid:child_no + "-right",
        anchor:anchor_child,
        maxConnections:-1,
        endpoint:"Blank",
        isTarget: true,
    });
    
    instance.connect({
        uuids:[child_no + "-right", priority_no + "-left" ], 
        overlays: [[ "Arrow", { location:0.5}, { foldback:.7, fillStyle:color, width:8 , length:8} ]],
        connector:connector,
        paintStyle:{ strokeStyle:stroke, lineWidth:1.5},
    }); 
  }

Is there any way to fasten the rendering time of the chart?

jsplumb rendering performance charts javascript
1 Answers

There is a load test inside the repo that renders 1000 connections and 1000 endpoints in roughly 900ms, so this number is unexpected. It would probably be better to open an issue on the Github repo and try to provide a test case that replicates your situation.

jsPlumb Team0
Related