The chart
component supports combining multiple data series into one cartesian model.
A basic definition for a chart with one line and bar model is given here:
<p:chart type="bar" model="#{chartBean.combinedModel}" style="height:250px" />
The combined model definition is given here:
CartesianChartModel combinedModel = new BarChartModel(); public CartesianChartModel getCombinedModel() { LineChartSeries sales = new LineChartSeries(); sales.setLabel("Sales"); sales.set(2004, 1000); sales.set(2005, 1170); sales.set(2006, 660); sales.set(2007, 1030); BarChartSeries expenses = new BarChartSeries(); expenses.setLabel("Expenses"); expenses.set("2004", 400); expenses.set("2005", 460); expenses.set("2006", 1120); expenses.set("2007", 540); combinedModel.addSeries(sales); combinedModel.addSeries(expenses); return combinedModel; }
The visual output of the chart is given here:
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/combinedChart.jsf
.