Improve the rendering time of jsplumb chart

80 views Asked by At

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?

1

There are 1 answers

0
jsPlumb Team On

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.