PrimeFaces Extensions Gchart is not working properly

Question

I am using PrimeFaces version 6.1. I need to show my data in chart format. For this i implemented the GChart component as link https://www.primefaces.org/showcase-ext/sections/gchart/basic.jsf . I have added link in my form and on click of that link, i have rendered the chart. I need to show different chart in that form. So i have different panels for showing different charts on click of different buttons. when the page loads and on click of a link for first time, chart renders properly. Next time when i click the same link the whole page goes blank. I searched for error in console and error appears as shown below:

I need to refresh the page in order to get my page in working condition. I tried by giving id for pe:gChart tag and when i click on a link chart appears and on next click page goes blank and error appears as the container with new given id is not defined. My view code is like this:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<h:form id="dash">
<p:commandLink id="savButton" class="small-box-footer" action="#{dashboardMB.createPieModel1}" update="@form">
                    <h:outputLabel  styleClass="np" value="#{text.Detail}"/>
                    <i class="fa fa-arrow-circle-right"></i>

</p:commandLink>
<p:panel header="#{text.Saving}"  rendered="#{dashboardMB.savVisible}" id="panelSav" closable="false" toggleable="true" >


            <p:outputPanel id="container1" layout="block">


                <div id="savChart">
                    <pe:gChart value="#{dashboardMB.savingChartModel}" width="400" height="400"
                        title="Saving Wise">

                    </pe:gChart>
                </div>



            </p:outputPanel>


</p:panel>

My managed bean code is like this:

public void  createPieModel1() {  

            isSavVisible=true;
            DashboardModel dashObj=new DashboardModel();
            dashObj=dashBoardEJB.getvalues();
            chartSavingModel = new GChartModelBuilder()
                    .setChartType(GChartType.COLUMN)  
                    .addColumns("Topping", "Slices")
                    .addRow("A", dashObj.getCount1())  
                    .addRow("V", dashObj.getCount2())
                    .addRow("Z", dashObj.getCount3())
                    .addRow("W", dashObj.getCount4())
                    .build();  
  }

Answer 1

You have a version mismatch. You are using PrimeFaces 6.1 but only using PrimeFaces Extensions 6.0.0. You PF and PFE versions must always match.

You can read the release notes guide to find out which version always lines up: https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/Release-Notes

So by upgrading to PFE 6.1.1 that will match your version and fix your issues.