1

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:enter image description here

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();  
  }
Melloware
  • 10,435
  • 2
  • 32
  • 62
Mani Ratna
  • 883
  • 1
  • 11
  • 30
  • You mentioned your PrimeFaces version as 6.1 but what version of Primefaces Extensions are you using? GChart is an Extensions component. Seems to be working fine on the showcase can you compare your code to showcase? https://www.primefaces.org/showcase-ext/sections/gchart/basic.jsf – Melloware Apr 26 '20 at 14:39
  • primefaces extension version is 6.0.0 – Mani Ratna Apr 26 '20 at 14:51
  • 1
    OK that is problem #1 your PFE version should match your PF version so if you are using 6.1 you need to use PFE 6.1.1 found here: https://search.maven.org/artifact/org.primefaces.extensions/primefaces-extensions/6.1.1/jar – Melloware Apr 26 '20 at 14:58
  • I changed primefaces extension from 6.0.0 to 6.1.1 and it worked. Very much grateful to @Melloware – Mani Ratna Apr 27 '20 at 03:20
  • I posted it as the answer that solved your problem if you wan to mark it solved. – Melloware Apr 27 '20 at 11:12

1 Answers1

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.

Melloware
  • 10,435
  • 2
  • 32
  • 62