PrimeFace AreaChart

It is a customized and advanced version of a LineChart where series are filled. It is used to represent statistical data graphically. The <p:chart> is a generic component to create chart in JSF application. We can set type of chart to specify the type pf chart.

The chart has various attributes that are tabled below. These attributes are generic and applicable for all type of charts.

Chart Attributes

Attribute	Default value	Type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It takes boolean value to specify the rendering of the component.
type	null	String	It is used to specify type of the chart.
model	null	ChartModel	It is used to set model object of data and settings.
style	null	String	It is used to set inline style of the component.
widgetVar	null	String	It is a name of the client side widget.
responsive	false	Boolean	In responsive mode, chart is redrawn when window is resized.

Example

Here, in the following example, we are implementing <p:chart> component. This example contains the following files.

JSF File

// area.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Area</title>
</h:head>
<h:body>
<p:chart type="line" model="#{area.drawArea}" style="height:300px" />
</h:body>
</html>

ManagedBean

// Area.java

package com.javatpoint;
import javax.annotation.PostConstruct;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.CategoryAxis;
import org.primefaces.model.chart.LineChartModel;
import org.primefaces.model.chart.LineChartSeries;
@ManagedBean
public class Area implements Serializable {
private LineChartModel drawArea;
@PostConstruct
public void init() {
createDrawArea();
}
public LineChartModel getDrawArea() {
return drawArea;
}
private void createDrawArea() {
drawArea = new LineChartModel();
LineChartSeries boys = new LineChartSeries();
boys.setFill(true);
boys.setLabel("Boys");
boys.set("2010", 140);
boys.set("2011", 120);
boys.set("2012", 64);
boys.set("2013", 170);
boys.set("2014", 45);
LineChartSeries girls = new LineChartSeries();
girls.setFill(true);
girls.setLabel("Girls");
girls.set("2010", 72);
girls.set("2011", 80);
girls.set("2012", 130);
girls.set("2013", 110);
girls.set("2014", 140);
drawArea.addSeries(boys);
drawArea.addSeries(girls);
drawArea.setTitle("Area Chart");
drawArea.setLegendPosition("ne");
drawArea.setStacked(true);
drawArea.setShowPointLabels(true);
Axis xAxis = new CategoryAxis("Years");
drawArea.getAxes().put(AxisType.X, xAxis);
Axis yAxis = drawArea.getAxis(AxisType.Y);
yAxis.setLabel("Births");
yAxis.setMin(0);
yAxis.setMax(300);
}
}

Output: