I'd like to get a callback from visjs after it finishes loading a chart so I can then unhide the chart and stop a loading animation. However, i don't see anyway to registrar a callback in the docs.

Now, I'm new to javascript so perhaps i'm not thinking about this correctly? Hoping someone can point me in the right direction. Thanks!

I'd like to get a callback from visjs after it finishes loading a chart so I can then unhide the chart and stop a loading animation. However, i don't see anyway to registrar a callback in the docs.

Now, I'm new to javascript so perhaps i'm not thinking about this correctly? Hoping someone can point me in the right direction. Thanks!

• javascript
• vis.js

• Are you loading the data asynchronously? – Yogi Commented Dec 30, 2015 at 20:43
• The data is loaded asynchronously, and i get a callback when the load is pleted. Then, i process the data and call visjs. I assume the visjs process is running asynchronously because my code continues to execute and returns control the to browser...but then i have to wait for the graphic to show up. I want to instead display a loading graphic and then get a signal when the visjs graphic is finished 'rendering'. – Aquadisco Commented Jan 1, 2016 at 19:14
• I looked at the visjs documentation and, like you, didn't find a way to do it. Yet, there are alternative graph libraries if that's an option for your project. The one I like is webix which is well designed and very easy to use. For parison, here is a list of their graph events and some sample graphs – Yogi Commented Jan 1, 2016 at 20:46
• @Roberto see my answer below. – Jos de Jong Commented Jan 4, 2016 at 9:13

4 Answers 4

I'm one of the creators of vis.js.

The visualizations of vis.js should load synchronously so there is no need for a callback. After checking though for the Timeline and Graph2d I saw this is not the case anymore, this is no intentional behavior. I've opened an issue for this here: https://github./almende/vis/issues/1541

I don't know which visualization you're using, but a workaround for the Timeline and Graph2d is: the visualization is loaded synchronously, and the items are loaded on the next tick. So you can set a callback on a timeout after 0 ms:

var timeline = new vis.Timeline(...);

alert('The Timeline is visible but the items not yet (this is a bug)')

setTimeout(function () {
  alert('Now everything is loaded!');
}, 0);

i solved the trouble with change event on first show.

 var firstshow=true;
 $scope.timeline.on("changed", function (properties) {
                if(firstshow)
                {
                    $scope.timeline.focus($scope.timeline.getVisibleItems());
                    firstshow=false;
                }

Seems this still hasn't been fixed. You can also hook into the currentTimeTick Timeline event. Note this events keep triggering so you can unsubscribe after the first time it triggers.

this.timeline.on("currentTimeTick", (prop) => {
        // Do something here
        // After fired the first time we un-subscribed
        this.timeline.off("currentTimeTick")
    })

The solution that worked for me was this:

timeline.on('finishedRedraw', function() {

    console.log('do something');

});