[tabview] Dynamically add tabs containing chart

[zimounof]

Hello,

I'm experiencing some trouble adding dynamically tabs that contains a chart to a tabview, using the "DataModel" feature.
The charts are added fine, but disappear once switching to another tab.

Here's the offending .xhtml:

Code: Select all

<h:panelGroup id="east-tabview-container">
	<p:tabView id="east-tabview" scrollable="true" prependId="false"
		value="#{bean.tabs}" var="tab"
		rendered="#{not empty bean.tabs}">
		<p:tab title="#{tab.title}">
			<p:chart type="line" model="#{tab.model}" />
		</p:tab>
	</p:tabView>
</h:panelGroup>

And the corresponding backing bean (simplified)

Code: Select all

@Named
@ViewScoped
public class Bean implements Serializable {
        private List<TabItem> tabs = new ArrayList<TabItem>();
        // + GETTER / SETTER

	public class TabItem implements Serializable {
		public String title;
		public ChartModel model;
                // + GETTER / SETTER
	}
}

After processing some logic which basically creates a ChartModel object, a new tab is added with:

Code: Select all

tabs.add(new TabItem(title, model));

and the tabview updated with:

Code: Select all

RequestContext.getCurrentInstance().update("east-tabview-container");

With this code, when the first tab is added, its chart is displayed. But when a second tab is added and switched to, its chart is empty.

If I add something like (or bind activeIndex attribute, no matter):

Code: Select all

TabView tabView = (TabView) ComponentUtils.findComponent("east-tabview");
tabView.setActiveIndex(tabs.size() - 1);

... the newly added tab is selected and its chart is displayed, but others are then emptied

I've tried with all possible combinations of "dynamic" and "cache" attributes, which just change the behavior of the disappearings... that unfortunately still occur

Am I doing something wrong ? I've browsed many topics of this forum related to tabview and charts, but can't find any hint (except maybe dynamic and cache atributes, but they won't help).

Any help will be greatly appreciated after so many hours of pulling out my hair
Thanks in advance

[Juned S]

Hi,

Really its been annoying. I have searched through entire form but could not find one working solution. At least a work around. But the work around the developers have proposed is replot the charts on tab show. Which too don't work. In one form I saw Optimus saying use init on chart widget. I dont know where did he find init on chart widget . Another topic in this forum says add lazy attribute to chart then call init, they should add this attribute back and then .

Its a genuine issue and many people are facing but they are not even giving a possible work around.

[jamie]

I'm seeing the behavior you are when I have dynamic="true" (which is not the default) and cache="true" (which is the default). If I remove the cache attribute, I still see the issue. If I remove the dynamic="true" or set it to false, since I am actually using model based dynamic tabs, my charts do not get rendered because they are based on the model, which is not yet available at render time. I may try and work around this.

However, when I explicitly set cache="false", I get all of the charts, and haven't been able to see the bug where they disappear. Unfortunately, now it takes too long to switch between tabs.

I think I will try and find a solution where I can get my charts to render even when dynamic="false".

[kukeltje]

try setting an explicit width and height on the charts