CODEWITHSUNDEEP
javascriptnode.jspromisevis.js
sparkhead95
sparkhead95

Reputation: 435

Vis.js callback when the network finishes loading

I'm using a vis.js network that takes in some data and add's said data as nodes within the network.

The only issue is that after the network has been declared (using the nodes and edges specified, which may be a lot) it takes a while for the nodes in the network to render in.

Even when I declare the network like so:

var network = new vis.Network(container, data, options);

And then follow it up with making the container visible:

$('#BreakdownBox').css('display','inline');

It still becomes visible before the nodes have finished buffering, showing a blank canvas until they've rendered in.

My Question: How can I only make it visible once it's finished loading the nodes? Is there a way to use the promises.js with this? Something like:

var network = new vis.Network(container, data, options).done(function{
    $('#BreakdownBox').css('display','inline');
});

Upvotes: 1

Views: 2674

Answers (3)

Sameer Basil
Sameer Basil

Reputation: 496

Try this. Your code will be executed once after drawing has finished. Since your code is bound to the afterDrawing event instead of the stabilizationIterationsDone event it will be executed even if you have physics disabled.

network.once('afterDrawing', () => {

    // Your code

});

Upvotes: 3

freakuency
freakuency

Reputation: 91

You can refer the example visjs loading bar.

What you need is listening on the "stabilizationIterationsDone" event to hide your progress bar

network.once("stabilizationIterationsDone", function() {
   $('#BreakdownBox').css('display','none');

});

Upvotes: 3

sparkhead95
sparkhead95

Reputation: 435

In the end I used the native loading bar to vis.js, using their example code here

It's a little faulty but it's all I needed.

Upvotes: -2

Related Questions