Primefaces AreaChart

by Online Tutorials Library July 14, 2022

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.tutoraspire;  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:

PrimeFaces AreaChart 1

Next TopicPrimeFaces PieChart

Primefaces AreaChart

PrimeFace AreaChart

Chart Attributes

Example

JSF File

ManagedBean

SSRS vs Power BI

Backtracking in Prolog

You may also like