Visualize.js render dashboard with different loading mask

Hi All,

We're using visuailize.js for integration. We create a dashboard with 4 reports in jasper server. And in our application,we implemented like below:

if (currentDashboard) {
  , failInRendering);
        } else {
            currentDashboard = v.dashboard({
                container : main,
                resource : dashboardUri,
                linkOptions : {
                    events : { // link events
                        "click" : hyperlinkClick
                success : finishRendering,
                error : failInRendering,
                params : parameters
The expected behavior should be dashboard ui firstly render the layout and then asyncronizily call report execution. When report running, each report ui will be overloaded by the grey loading mask. One report, one mask.
The problem is when first loading, the loading mask won't appear for a while, and then shortly flashed one by one. But when changing the parameter and rerun the dashboard, the loading mask appeared at the same time as expected.
Could someone give a suggestion?
qin.qian's picture
Joined: Jul 8 2015 - 8:08pm
Last seen: 6 years 2 weeks ago

2 Answers:

Yip I have noticed this as well. Was wondering how to fix this as well. 

joseng62's picture
Joined: Dec 5 2014 - 2:43am
Last seen: 1 month 4 weeks ago

Seems that the grey loading mask is generated by highcharts and not Jasper. 
You can edit the loading text via "highchart api" use this a proprty in you chart. 

We could not figure out how to replace the loading mask. 
Instead we implemented our own loading mask. Our loading masks check for the report execution is done and then the mask is set to hide. Only work around we could figure. 

joseng62's picture
Joined: Dec 5 2014 - 2:43am
Last seen: 1 month 4 weeks ago