PrimeFaces PieChart

Primefaces Piechart with primefaces tutorial, primefaces introduction, primefaces features, primefaces configuration, ajax, event, listener, actionlistener, ajax process, ui component, autocomplete, inputtextarea, boolean button, boolean checkbox, calendar, inputtext, inputmask, select one list box, select many box, select checkbox etc.

PrimeFaces PieChart

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

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:p="http://primefaces.org/ui">  
  6. <h:head>  
  7. <title>PieChart</title>  
  8. </h:head>  
  9. <h:body>  
  10. <p:chart type="pie" model="#{pieChart.pieModel}" style="width:400px;height:300px" />  
  11. </h:body>  
  12. </html>  

ManagedBean

// PieChart.java

  1. package com.tpoint;  
  2. import javax.annotation.PostConstruct;  
  3. import java.io.Serializable;  
  4. import javax.faces.bean.ManagedBean;  
  5. import org.primefaces.model.chart.PieChartModel;  
  6. @ManagedBean  
  7. public class PieChart implements Serializable {  
  8. private PieChartModel pieModel;  
  9. @PostConstruct  
  10. public void init() {  
  11. createPieModels();  
  12. }  
  13. public PieChartModel getPieModel() {  
  14. return pieModel;  
  15. }  
  16. private void createPieModels() {  
  17. createPieModel();  
  18. }  
  19. private void createPieModel() {  
  20. pieModel = new PieChartModel();  
  21. pieModel.set("Mercedess"700);  
  22. pieModel.set("BMW"300);  
  23. pieModel.set("Volvo"400);  
  24. pieModel.setTitle("Car Brands");  
  25. pieModel.setLegendPosition("c");  
  26. }  
  27. }