PrimeFaces - Line Chart Example

In this example, we will learn how to use PrimeFaces chart tag and LineChartModel to draw 2d graph.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin-left:50px">
    <h2>PrimeFaces Linear Chart Example</h2>
    <p:chart type="line" model="#{lineChartBean.lineModel}" style="height:400px;width:600px"/>
</h:body>

The manage bean

@ManagedBean
@ViewScoped
public class LineChartBean {
  private LineChartModel lineModel;

  @PostConstruct
  public void init() {
      lineModel = new LineChartModel();
      LineChartSeries s = new LineChartSeries();
      s.setLabel("Population");

      s.set(1, 5.20);
      s.set(2, 19.63);
      s.set(3, 59.01);
      s.set(4, 139.76);
      s.set(5, 300.4);
      s.set(6, 630);

      lineModel.addSeries(s);
      lineModel.setLegendPosition("e");
      Axis y = lineModel.getAxis(AxisType.Y);
      y.setMin(0.5);
      y.setMax(700);
      y.setLabel("Millions");

      Axis x = lineModel.getAxis(AxisType.X);
      x.setMin(0);
      x.setMax(7);
      x.setTickInterval("1");
      x.setLabel("Number of Years");

  }

  public LineChartModel getLineModel() {
      return lineModel;
  }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jstl 1.2 javax.servlet:jstl
• JDK 1.8
• Maven 3.3.9