PrimeFaces PieChart

It is a type of graph in which a circle is divided into sectors and each sector represent some statistic. It is a way to represent statistical data graphically.

The <p:chart> component is used to create chart. Here, we need to set type = "pie" to create pie chart. It uses all the attributes of chart component that have discussed in previous chapter.

Example

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

JSF File

// pieChart.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>PieChart</title>
</h:head>
<h:body>
<p:chart type="pie" model="#{pieChart.pieModel}" style="width:400px;height:300px" />
</h:body>
</html>

ManagedBean

// PieChart.java

package com.javatpoint;
import javax.annotation.PostConstruct;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import org.primefaces.model.chart.PieChartModel;
@ManagedBean
public class PieChart implements Serializable {
private PieChartModel pieModel;
@PostConstruct
public void init() {
createPieModels();
}
public PieChartModel getPieModel() {
return pieModel;
}
private void createPieModels() {
createPieModel();
}
private void createPieModel() {
pieModel = new PieChartModel();
pieModel.set("Mercedess", 700);
pieModel.set("BMW", 300);
pieModel.set("Volvo", 400);
pieModel.setTitle("Car Brands");
pieModel.setLegendPosition("c");
}
}

Output: