primefaces charts not updating when submit a new request - jsf

Question

I submit data and a chart has been displayed But again when I submit it by inserting new values in form,chart doesn't update itself.Another thing I saw is when I refresh the page then it update the chart and chart with new values get display.
For instance If I give values Wheat=40 and Sugar=60and submit , It will display the chart.Now when I submit Wheat=90 and Sugar=10 , it displays nothing but the old chart remain present on the page.Now If I refresh the page , The chart with updated values will be availabe.How can I get rid of that problem :( Please suggest a solution if any one have.
Here is my code
Chart Code
<p:barChart id="horizontal"
value="#{reportingCharts.categoryModel}" legendPosition="se"
style="width:635px;height:500px" title="Horizontal Bar Chart"
orientation="horizontal" min="0" max="150" animate="true"
zoom="true" barMargin="90"
rendered="#{chartsRendering.barCharts}" showDatatip="true" shadow="true" />
Button Code
<h:commandButton id="btnLanguage" action="#{reportingCharts.getGraphValuesOnLanguageBasis}"
value="Plot Chart Language">
</h:commandButton>
getGraphValuesOnLanbguageBasis method
public void getGraphValuesOnLanguageBasis() {
categoryModel = null;
resList = (ArrayList<ChartResult>) serviceObj
.getChartByLanguage(ranks, language);
if (chartType.equalsIgnoreCase("bar")
|| chartType.equalsIgnoreCase("line")
|| chartType.equalsIgnoreCase("column")) {
categoryModel = new CartesianChartModel();
ChartSeries langChart = null;
for (int a = 0; a < ranks.length; a++) {
langChart = new ChartSeries();
if(a == 0){
for(int z=0;z<language.length;z++){
langChart.set(languageMap.get(Integer.parseInt(language[z])),0);
}
}
String rank = "";
boolean rankAvailable = false;
for (int x = 0; x < resList.size(); x++) {
if(Integer.parseInt(resList.get(x).getRankId()) == Integer.parseInt(ranks[a])){
rank = resList.get(x).getRankName();
x = resList.size();
rankAvailable = true;
}
}
if(rankAvailable == false){
langChart.setLabel(rankMap.get(Integer.parseInt(ranks[a])));
}
else{
langChart.setLabel(rank);
}
for (int x = 0; x < resList.size(); x++) {
if (Integer.parseInt(resList.get(x).getRankId()) == Integer
.parseInt(ranks[a]) && rankAvailable == true) {
langChart.set(languageMap.get(Integer.parseInt(resList.get(x).getCriteria())), Integer
.parseInt(resList.get(x).getNoOfPersons()));
}
}
categoryModel.addSeries(langChart);
}
} else if (chartType.equalsIgnoreCase("pie")) {
pieModel = new PieChartModel();
for (int x = 0; x < resList.size(); x++) {
pieModel.set(languageMap.get(Integer.parseInt(resList.get(x).getCriteria())), Integer
.parseInt(resList.get(x).getNoOfPersons()));
}
}
ChartsRendering chartRenderer1 = (ChartsRendering) FacesContext
.getCurrentInstance().getExternalContext().getSessionMap()
.get("chartsRendering");
if (chartType.equalsIgnoreCase("bar")) {
chartRenderer1.showBarChart();
} else if (chartType.equalsIgnoreCase("line"))
chartRenderer1.showLineChart();
else if (chartType.equalsIgnoreCase("column"))
chartRenderer1.showColumnChart();
else if (chartType.equalsIgnoreCase("pie"))
chartRenderer1.showPieChart();
}

Answer 1

The chart won't update itself after you change the model values but you can update it through ajax. For example if you have a chart:
<p:barChart id="myBarChart" value=#{yourChartBean.chartModel} ..../>
and a selecteOneMenu which sends new values to your backing bean, define a method which will update the model in your backing bean:
<p:selectOneMenu id="aMenu" value="#{yourChartBean.menuValue}">
<p:ajax event="change" update="myBarChart" listener="#{yourChartBean.refreshChart()}"/>
<f:selectItem itemLabel="This value" itemValue="tv"/>
<f:selectItem itemLabel="Another value" itemValue="av"/>
</p:selectOneMenu>
in this case the refreshChart() method is intended to update your chart model:
public void refreshChart() {
buildChart();
}
private void buildChart() {
chartModel = new CartesianChartModel();
ChartSeries series1 = new ChartSeries();
...
ChartSeries series2 = new ChartSeries();
...
categoryModel.addSeries(series1);
categoryModel.addSeries(series2);
}

Answer 2

Chart should be visible when page loads...after that all ajax request properly renders your chart.
To do that just provide a dummy series data like (0,0) for series 1 and (0,0) for series 2 when page loads, after that everything works fine