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.
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: http://jsfiddle.net/richbl/5sobonv8/
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?
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.