Graph disappears on rich:tabpanel

[GoogleCodeExporter]

    <h:head>
<!--
<script 
src="https://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyD7J1JTFBVB5Jd4y
9nXyjR_LXIXaVN7pTY&amp;sensor=false&amp;" type="text/javascript"></script>  
-->
        <script src="https://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;" type="text/javascript"></script>  
        <jsflot:resources debug="true"/>
    </h:head>
    <h:form>
        <div class="buttons">
            <rich:tabPanel headerAlignment="left">
                <rich:tab header="Daten" render="test">
                    <jsflot:flotChart chartType="line" width="640" height="400" id="test" value="#{chartBean.series}">
                    </jsflot:flotChart>
                </rich:tab>
                <rich:tab header="Karte">
                    <m:map
                        id="map"  
                        type="G_PHYSICAL_MAP" 
                        zoom="#{trackBean.zoomLevel}"
                        latitude="#{trackBean.selectedActivity.centerLatitude}" 
                        longitude="#{trackBean.selectedActivity.centerLongitude}"
                        width="100%"
                        enableScrollWheelZoom="false"
                        partiallyTriggered="true"
                        >

                        <m:mapControl name="GLargeMapControl"/>

                        <m:polyline lineWidth="2" hexaColor="#ff0000" geodesic="true"> 
                            <ui:repeat value="#{trackBean.selectedActivity.locations}" var="loca">
                                <m:point latitude="#{loca.latitude}" longitude="#{loca.longitude}" /> 
                            </ui:repeat>
                        </m:polyline> 
                    </m:map>                            
                </rich:tab>
            </rich:tabPanel>    
        </div>
    </h:form>

The graph disappears from the first tab if I select 'Karte' and then 'Daten' 
again ...

Running RichFaces 4 and Apache Tomcat 7....

Would be great if you could give me a hint or workaround

Original issue reported on code.google.com by xfer...@gmx.de on 1 Jun 2012 at 5:41

[GoogleCodeExporter]

I found a good solution to this frustrating problem.  The graph can be manually 
redrawn with a javascript function already defined.  You just have to call it 
on the right event on the tab panel:

onitemchange="repweb_sectorAlloc_chart_drawJSFlotChart(); return true;"

where "sectorAlloc" is my chart div id and repweb is my application name.  
JSFlot builds the javascript function name.  If you have trouble finding the 
function name, view source in browser and you should see it.  Call that 
function on the tab change event and it works like a charm

-Jae F. Muzzin (jmuzzin@sterlingmutuals.com)

Original comment by jaemuz...@gmail.com on 24 Jul 2015 at 9:06