The chart
component nicely integrates with the <p:poll>
component to update itself with an ever-changing data model.
A basic definition for a chart with live data is given here:
<p:poll interval="2" update="live" /> <p:chart id="live" type="pie" model="#{chartBean.livePieModel}" style="height:250px" />
The randomly generated model for the chart is implemented here:
public PieChartModel getLivePieModel() { int random1 = (int)(Math.random() * 1000); int random2 = (int)(Math.random() * 1000); liveChartModel.getData().put("Candidate 1", random1); liveChartModel.getData().put("Candidate 2", random2); liveChartModel.setLegendPosition("w"); liveChartModel.setShowDataLabels(true); return liveChartModel; }
The visual output will be updated every 2 seconds, and the new model will be rendered with its randomly generated values.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter9/pollingChart.jsf
.