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:

How to do it…

Note

The implementation could either be based on BarChartModel, as given in the preceding graph, or it can be done the other way around by first taking LineChartModel and then adding the series into it.

PrimeFaces Cookbook Showcase application

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.201.217