Rendering Dashboard into Hidden DIV (Visualize.js)

Hello All,

I want to render several dashboards into separate tabs. Any two tabs are hidden at any time: the selected tab will show the current dashboard.

Typically in Javascript, this is done by making a DIV (or SECTION) hidden until a button (or tab in this case) click from the user, then the appropriate DIV is set to visible.

However, in a Jaspersoft Dashboard, each report element does not appear to render correctly. Rather, the containing report elements render into some minimum dimensions. So, when the dashboard is finally made visible, it is incorrectly rendered.

Relatedly, this issue is also exercised when resizing a hidden DIV containing a dashboard: all containing report elements are reset to some minimum dimensions.

Here's a simplified example of the problem:

In this fiddle, the dashboard is initially rendered into a hidden DIV. Pressing the button displays that DIV. Note that the dashboard report elements are not properly dimensioned.

Further note that by resizing the window, the containing dashboard reports correctly refresh and are now properly dimensioned.

Any suggestions on how best to resolve this issue?



richbl's picture
Joined: May 22 2014 - 7:14pm
Last seen: 5 years 9 months ago

@dpetzold: Thanks for the suggestion to load a single dashboard on each tab select (options 1&2). That's our current solution, and can get rather tiresome to have to reload each resource because of a redraw issue. But it does work.

As for option #3, this is not a good solution as you'll end up with scrollbars and flickering, and it requires a specific design that could take advantage of this approach.

On your last comment, yes, that's really the issue: rendering into a div that isn't displayed, yet still render correctly. It may be possible to render into offscreen coordinates, but this is generally a frowned-upon practice.





richbl - 6 years 10 months ago

1 Answer:

In this case it would seem the variable is never updated when the element changes height, so it uses the 0px height it gets when the div is not yet visable.

Here are a few possible solutions with Visualize.js today...

1. You could simply dynamically pull in each dashboard from an input control selection much like you see in the report "from a list" fiddle from the Visualize.js live samples guide. Simply create your own input control that is a set of tabs or buttons to dynamically load inside the same div rather then using multiple divs that are hidden. This will simulate similar behaviour.

2. You may want to set up seperate functions that are called (from the tabs) to essentially load each dashboard once the div is no longer hidden.

3. Or if you don't want to have to reload the dashboards at all (having them all load in the background) you could try an approach where the first dashboard is rendered in a div at the top of the page with a set of "tabs" or buttons to scroll down the page to the next div or dashboard with a similar set of controls. This vertical scroll trick may or may not work with your current design.

There also may be some way to dynamically change the divs from visable to hidden allowing the dashboards to render beforehand. Something like...




Today it's not yet possible to render a dashboard accuretly through Visualize.js while a div is actively hidden.


dpetzold's picture
Joined: May 12 2014 - 10:47am
Last seen: 5 years 7 months ago