Creating combined charts

The chart component supports combining multiple data series into one cartesian model.

How to do it…

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:

Note

The implementation could either be based on BarChartModel...