How to render a chart inside a tabView with PrimeFaces
I need to display a lot of charts on some kind of status page. The charts should be grouped in tabView
and accordionPanel
. This setup works nice with PrimeFaces 2.2.1. Because of some features of the new version (and because the charts are no longer Flash) I am trying to migrate to PrimeFaces 3 (3.0.M3 at the moment).
<p:tabView>
<p:tab title="One">
<p:pieChart value="#{myBean.myChartOne}" />
</p:tab>
<p:tab title="Two">
<p:pieChart value="#{myBean.myChartTwo}" />
</p:tab>
</p:tabView>
With PrimeFaces 3 the charts don't show up. There is a bug report describing this problem and stating that there should be lazy loading for charts in 3.0 M4.
Update:
I am now using PrimeFaces 3.0 M4-snapshot with lazy lo开发者_如何学编程ading charts. It looks like this:
<p:tabView>
<p:tab>
<p:accordionPanel>
<p:tab title="All time">
<p:commandButton value="load chart" type="button" onclick="onTimeChartAll.init(); buttonOnTimeChartAll.disable();"
widgetVar="buttonOnTimeChartAll"/>
<p:pieChart value="#{myBean.onTimeChartAll}" lazy="true"
widgetVar="onTimeChartAll" />
</p:tab>
<p:tab title="30 Days">
<p:commandButton value="load chart" type="button" onclick="onTimeChart30Days.init();buttonOnTimeChart30Days.disable();"
widgetVar="buttonOnTimeChart30Days"/>
<p:pieChart value="#{myBean.onTimeChart30Days}" lazy="true" widgetVar="onTimeChart30Days" />
</p:tab>
</p:accordionPanel>
</p:tab>
[...] <!-- and so on -->
</p:tabView>
I can open a tab and click on the button to load the chart. Now I want to find a solution to automatically load the chart when a tab is opened. The Is there a solution to automatically load the chart, when the tab is opened? For p:accordionPanel
and p:tabView
there is the onTabShow
attribute, but I think I would need it for p:tab
. Or is there a possibility to address the widgetVar
of the currently opened tab via onTabShow
and var
?
The primefaces project lead just wrote a blog post saying that this should be fixed in 3.0.M4:
We are glad to share that upcoming PrimeFaces 3.0.M4 has a generic solution for this, so on page you don’t need to deal with these as PrimeFaces handles these under the hood for you.
精彩评论