PrimeFace AreaChart

Primefaces AreaChart 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.

PrimeFace AreaChart

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.


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

JSF File

// area.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">  
  3. <html xmlns=""  
  4. xmlns:h=""  
  5. xmlns:p="">  
  6. <h:head>  
  7. <title>Area</title>  
  8. </h:head>  
  9. <h:body>  
  10. <p:chart type="line" model="#{area.drawArea}" style="height:300px" />  
  11. </h:body>  
  12. </html>  



  1. package com.tpoint;  
  2. import javax.annotation.PostConstruct;  
  3. import;  
  4. import javax.faces.bean.ManagedBean;  
  5. import org.primefaces.model.chart.Axis;  
  6. import org.primefaces.model.chart.AxisType;  
  7. import org.primefaces.model.chart.CategoryAxis;  
  8. import org.primefaces.model.chart.LineChartModel;  
  9. import org.primefaces.model.chart.LineChartSeries;  
  10. @ManagedBean  
  11. public class Area implements Serializable {  
  12. private LineChartModel drawArea;  
  13. @PostConstruct  
  14. public void init() {  
  15. createDrawArea();  
  16. }  
  17. public LineChartModel getDrawArea() {  
  18. return drawArea;  
  19. }  
  20. private void createDrawArea() {  
  21. drawArea = new LineChartModel();  
  22. LineChartSeries boys = new LineChartSeries();  
  23. boys.setFill(true);  
  24. boys.setLabel("Boys");  
  25. boys.set("2010"140);  
  26. boys.set("2011"120);  
  27. boys.set("2012"64);  
  28. boys.set("2013"170);  
  29. boys.set("2014"45);  
  30. LineChartSeries girls = new LineChartSeries();  
  31. girls.setFill(true);  
  32. girls.setLabel("Girls");  
  33. girls.set("2010"72);  
  34. girls.set("2011"80);  
  35. girls.set("2012"130);  
  36. girls.set("2013"110);  
  37. girls.set("2014"140);  
  38. drawArea.addSeries(boys);  
  39. drawArea.addSeries(girls);  
  40. drawArea.setTitle("Area Chart");  
  41. drawArea.setLegendPosition("ne");  
  42. drawArea.setStacked(true);  
  43. drawArea.setShowPointLabels(true);  
  44. Axis xAxis = new CategoryAxis("Years");  
  45. drawArea.getAxes().put(AxisType.X, xAxis);  
  46. Axis yAxis = drawArea.getAxis(AxisType.Y);  
  47. yAxis.setLabel("Births");  
  48. yAxis.setMin(0);  
  49. yAxis.setMax(300);  
  50. }  
  51. }