Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Daniel1
Partner - Contributor II
Partner - Contributor II

How can you tell when all objects in a Mashup have loaded?

Hi there,

I have a mashup which displays a couple of simple KPI's and charts, but it can take a second or two to load. What I've added is a pulsing company logo on the screen that is hidden once all data is loaded.

However using $(document).ready(function() or window.onload function() fires as soon as the page is built but still waits a second or two for the object data to be pulled. I'm using app.getObject( method to retrieve the object from the app.

Does anyone have any suggestions on how I can check that an object has loaded, as in pulled data and presenting it to the user so I can then fire the change to hide the pulsing logo?

Thanks in advance!

Labels (3)
1 Solution

Accepted Solutions
oz_moyal
Creator
Creator

Hi,

There is two things here, 
One is if u want to know if all objects fisnihed loading - ie all app.getObject are resolved. this is u can do in js by storing all the promises and check if all are resolved. or u can also load the objects in sequence:

app.getObject('QVobject-1','xxxxx').then( function ( model ) {
    app.getObject('QVobject-2','xxxxx').then( function ( model ) {
       app.getObject('QVobject-3','xxxxx').then( function ( model ) {
					    document.body.className = "loaded"
       })
    })
 });



but the other issue is that app.getobject is resolved when the the data has loaded, but not when the chart is rendedred, so on slow devices the time difference can be noticed.
I did find a way to see when the chart has finished rendering (but i don't think it is documented, so use on your own risk):

app.visualization.get('xxxxx').then(function (vis) { 
    vis.show("QVobject-1", { noSelections: true }); 
    vis.rendered.promise.then(function () { 
        console.log('Chart Rendered!'); 
    }); 
});

 



View solution in original post

5 Replies
Daniel1
Partner - Contributor II
Partner - Contributor II
Author

Update: I've found that applying the change after calling for the object is slightly better, but there is still lag between this and the object actually being rendered for the user to see.

		app.getObject('QVobject-1','xxxxx').then( function ( model ) {
					    document.body.className = "loaded"
				  });

Would love to know how I can check once all objects are loaded!

oz_moyal
Creator
Creator

Hi,

There is two things here, 
One is if u want to know if all objects fisnihed loading - ie all app.getObject are resolved. this is u can do in js by storing all the promises and check if all are resolved. or u can also load the objects in sequence:

app.getObject('QVobject-1','xxxxx').then( function ( model ) {
    app.getObject('QVobject-2','xxxxx').then( function ( model ) {
       app.getObject('QVobject-3','xxxxx').then( function ( model ) {
					    document.body.className = "loaded"
       })
    })
 });



but the other issue is that app.getobject is resolved when the the data has loaded, but not when the chart is rendedred, so on slow devices the time difference can be noticed.
I did find a way to see when the chart has finished rendering (but i don't think it is documented, so use on your own risk):

app.visualization.get('xxxxx').then(function (vis) { 
    vis.show("QVobject-1", { noSelections: true }); 
    vis.rendered.promise.then(function () { 
        console.log('Chart Rendered!'); 
    }); 
});

 



Daniel1
Partner - Contributor II
Partner - Contributor II
Author

Thanks @oz_moyal , the chaining looks to be a good solution - currently I just took to the slowest one and used that but think it would be good to check them all.

It appears as though when using Chrome to throttle the connection it also slows down the rendering, but when using shared WiFi connections (like on a train) which are truly slow then waiting on the promise worked a treat.

donquixote
Contributor
Contributor

Hello,
I am a bit confused by this.

In one snippet you call "app.getObject()" to render the chart.
In the other snippet you call "vis.show()".

For me, "app.getObject()" does cause the chart to be rendered, but the events on "rendered" are not triggered.

So what is the difference or relationship between app.getObject() and vis.show()?
Is one included in the other?
What happens if I call both?

alex_colombo
Employee
Employee

getObject and visualization.get basically have the same goal, render an object, but they are separates methods.

With getObject you can direclty render an object into your HTML.

With visualization.get you can apply custom configuration to your chart before render, such as showTitle (you can hide titles before rendering). Here all the options available for each chart.

You should never use both at the same time for the same object, this could cause a double request to the engine for the same object and the double use of engine resource.