title: How to render a chart inside a tabView with PrimeFaces
body: <p>I need to display a lot of charts on some kind of status page. The charts should be grouped in <code>tabView</code> and <code>accordionPanel</code>. This setup works nice with <em>PrimeFaces 2.2.1</em>. Because of some features of the new version (and because the charts are no longer <em>Flash</em>) I am trying to migrate to <em>PrimeFaces 3</em> (3.0.M3 at the moment).</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;p:tabView&gt;  
    &lt;p:tab title="One"&gt;  
      &lt;p:pieChart value="#{myBean.myChartOne}" /&gt;
    &lt;/p:tab&gt;
    &lt;p:tab title="Two"&gt;  
      &lt;p:pieChart value="#{myBean.myChartTwo}" /&gt;
    &lt;/p:tab&gt;
  &lt;/p:tabView&gt;
  </code></pre>
  
  <p>With PrimeFaces 3 the charts don't show up. There is a <a href="http://code.google.com/p/primefaces/issues/detail?id=2535" rel="nofollow">bug report</a> describing this problem and stating that there should be lazy loading for charts in 3.0 M4. </p>
  
  <p><strong>Update:</strong></p>
  
  <p>I am now using PrimeFaces 3.0 M4-snapshot with lazy loading charts. It looks like this:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;p:tabView&gt;  
        &lt;p:tab&gt;
          &lt;p:accordionPanel&gt;  
              &lt;p:tab title="All time"&gt;  
                  &lt;p:commandButton value="load chart" type="button" onclick="onTimeChartAll.init(); buttonOnTimeChartAll.disable();"
                      widgetVar="buttonOnTimeChartAll"/&gt;
                  &lt;p:pieChart value="#{myBean.onTimeChartAll}" lazy="true" 
                      widgetVar="onTimeChartAll" /&gt;
              &lt;/p:tab&gt;
              &lt;p:tab title="30 Days"&gt;  
                  &lt;p:commandButton value="load chart" type="button" onclick="onTimeChart30Days.init();buttonOnTimeChart30Days.disable();"
                      widgetVar="buttonOnTimeChart30Days"/&gt;
                  &lt;p:pieChart value="#{myBean.onTimeChart30Days}" lazy="true" widgetVar="onTimeChart30Days" /&gt;
              &lt;/p:tab&gt;
          &lt;/p:accordionPanel&gt;
      &lt;/p:tab&gt;
      [...] &lt;!-- and so on --&gt;
  &lt;/p:tabView&gt;
  </code></pre>
  
  <p>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 <code>p:accordionPanel</code> and <code>p:tabView</code> there is the <code>onTabShow</code> attribute, but I think I would need it for <code>p:tab</code>. Or is there a possibility to address the <code>widgetVar</code> of the currently opened tab via <code>onTabShow</code> and <code>var</code>?</p>