Primefaces Chart in a nutshell

by

Do you need to include cool charts in your Web application and you want to do it really quickly? Have a look at Primefaces which features a large set of to chart components to render your data.

Set up your Primefaces project

Firstly, to kickstart your Primefaces application include the following dependencies in your project’s pom.xml:

<dependencies>
    <dependency>
        <groupId>jakarta.platform</groupId>
        <artifactId>jakarta.jakartaee-api</artifactId>
        <version>8.0.0</version>
        <scope>provided</scope>
    </dependency>

    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>10.0.0</version>
    </dependency>
</dependencies>

With that in place, we are ready to add your first Primefaces Chart.

Create a Primefaces Line Chart

Our first example includes a Line Chart. The Client side API to display a Line Chart is pretty simple:

<p:lineChart model="#{lineChart.lineModel}" style="width: 50%; height: 50%;"/>

The element lineChart maps a Managed Bean which contains the graph data in the LineChart Bean and the lineModel field. Here is the LineChart Bean:

package com.mastertheboss.model;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.inject.Model;

import org.primefaces.model.charts.*;
import org.primefaces.model.charts.line.*;
import org.primefaces.model.charts.optionconfig.title.Title;

@Model
public class LineChart {
    private LineChartModel lineModel;

    @PostConstruct
    public void init() {
        lineModel = new LineChartModel();
        ChartData data = new ChartData();
        
        LineChartDataSet dataSet = new LineChartDataSet();
        List values = new ArrayList<>();
        values.add(15);
        values.add(2);
        values.add(10);
        values.add(25);
        values.add(19);
        values.add(23);
 
        dataSet.setData(values);
        dataSet.setFill(false);
        dataSet.setLabel("Acme Gross Incomes");
        dataSet.setBorderColor("rgb(75, 192, 192)");
        dataSet.setLineTension(0.1);
        data.addChartDataSet(dataSet);
        
        List<String> labels = new ArrayList<>();
        labels.add("January");
        labels.add("February");
        labels.add("March");
        labels.add("April");
        labels.add("May");
        labels.add("June");
 
        data.setLabels(labels);
        
        //Options
        LineChartOptions options = new LineChartOptions();        
        Title title = new Title();
        title.setDisplay(true);
        title.setText("Line Chart");
        options.setTitle(title);
        
        lineModel.setOptions(options);
        lineModel.setData(data);
    }

    public LineChartModel getLineModel() {
        return lineModel;
    }
}

Deploy your application on the application server. In our case, we will target the application on WildFly application server using its Maven plugin:

$ mvn install wildfly:deploy

Here is your Primefaces graph in action:

primefaces chart tutorial

Create a Primefaces Bar Chart

Our second example uses a Bar Chart to provide a way of showing data values represented as vertical bar. The Client API does not differ too much from the LineChart component:

<p:barChart model="#{barChart.barModel}" style="width: 50%; height: 50%;"/>

The Model is contained in the BarChart Bean which follows here:

package com.mastertheboss.model;

import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.inject.Model;

import org.primefaces.model.charts.*;
import org.primefaces.model.charts.axes.cartesian.CartesianScales;
import org.primefaces.model.charts.axes.cartesian.linear.CartesianLinearAxes;
import org.primefaces.model.charts.axes.cartesian.linear.CartesianLinearTicks;
import org.primefaces.model.charts.bar.*;
import org.primefaces.model.charts.optionconfig.legend.Legend;
import org.primefaces.model.charts.optionconfig.legend.LegendLabel;
import org.primefaces.model.charts.optionconfig.title.Title;

@Model
public class BarChart {
    private BarChartModel barModel;

    @PostConstruct
    public void init() {
        barModel = new BarChartModel();
        ChartData data = new ChartData();
        
        BarChartDataSet barDataSet = new BarChartDataSet();
        barDataSet.setLabel("Acme Gross Incomes");
        
        List<Number> values = new ArrayList<>();
        values.add(65);
        values.add(59);
        values.add(80);
        values.add(81);
        values.add(56);
        values.add(55);
        values.add(40);
        barDataSet.setData(values);
        
        List<String> labels = new ArrayList<>();
        labels.add("January");
        labels.add("February");
        labels.add("March");
        labels.add("April");
        labels.add("May");
        labels.add("June");
        labels.add("July");
        data.setLabels(labels);

        //Data
        barModel.setData(data);
        
        //Options
        BarChartOptions options = new BarChartOptions();
        CartesianScales cScales = new CartesianScales();
        CartesianLinearAxes linearAxes = new CartesianLinearAxes();
        CartesianLinearTicks ticks = new CartesianLinearTicks();
        ticks.setBeginAtZero(true);
        linearAxes.setTicks(ticks);
        cScales.addYAxesData(linearAxes);
        options.setScales(cScales);
        
        Title title = new Title();
        title.setDisplay(true);
        title.setText("Bar Chart");
        options.setTitle(title);

        Legend legend = new Legend();
        legend.setDisplay(true);
        legend.setPosition("top");
        LegendLabel legendLabels = new LegendLabel();
        legendLabels.setFontStyle("bold");
        legendLabels.setFontColor("#2980B9");
        legendLabels.setFontSize(24);
        legend.setLabels(legendLabels);
        options.setLegend(legend);

        barModel.setOptions(options);
    }

    public BarChartModel getBarModel() {
        return barModel;
    }
}

If you want to have different colors for your single bars, you can add to your ChartData instance the RGB colors for each entry:

List<String> bgColor = new ArrayList<>();
bgColor.add("rgba(255, 99, 132, 0.2)");
bgColor.add("rgba(255, 159, 64, 0.2)");
bgColor.add("rgba(255, 205, 86, 0.2)");
bgColor.add("rgba(75, 192, 192, 0.2)");
bgColor.add("rgba(54, 162, 235, 0.2)");
bgColor.add("rgba(153, 102, 255, 0.2)");
bgColor.add("rgba(201, 203, 207, 0.2)");
barDataSet.setBackgroundColor(bgColor);

List<String> borderColor = new ArrayList<>();
borderColor.add("rgb(255, 99, 132)");
borderColor.add("rgb(255, 159, 64)");
borderColor.add("rgb(255, 205, 86)");
borderColor.add("rgb(75, 192, 192)");
borderColor.add("rgb(54, 162, 235)");
borderColor.add("rgb(153, 102, 255)");
borderColor.add("rgb(201, 203, 207)");
barDataSet.setBorderColor(borderColor);
barDataSet.setBorderWidth(1);

data.addChartDataSet(barDataSet);

Deploy your application again and check the result:

primefaces chart tutorial

Using an Horizontal Bar Chart

If you want to switch to an Horizontal Chart for your bars, all you need is to replace the BarChartModel with an HorizontalBarChartModel and a BarChartDataSet with an HorizontalBarChartDataSet:

    private HorizontalBarChartModel hbarModel;

    @PostConstruct
    public void init() {
        hbarModel = new HorizontalBarChartModel();
        ChartData data = new ChartData();
        
        HorizontalBarChartDataSet hbarDataSet = new HorizontalBarChartDataSet();

Other Primefaces Graphs

As you can see from Primefaces show case, there are several other charts available out of the box. We will mention a few options taken from the showcase:

Pie Chart

Include in your HTML page:

  <p:pieChart model="#{chartJsView.pieModel}" style="width: 100%; height: 500px;"/>

In your Bean:

    private void createPieModel() {
        pieModel = new PieChartModel();
        ChartData data = new ChartData();

        PieChartDataSet dataSet = new PieChartDataSet();
        List<Number> values = new ArrayList<>();
        values.add(300);
        values.add(50);
        values.add(100);
        dataSet.setData(values);

        List<String> bgColors = new ArrayList<>();
        bgColors.add("rgb(255, 99, 132)");
        bgColors.add("rgb(54, 162, 235)");
        bgColors.add("rgb(255, 205, 86)");
        dataSet.setBackgroundColor(bgColors);

        data.addChartDataSet(dataSet);
        List<String> labels = new ArrayList<>();
        labels.add("Red");
        labels.add("Blue");
        labels.add("Yellow");
        data.setLabels(labels);

        pieModel.setData(data);
    }

Bubble Chart

In your HTML page:

 <p:bubbleChart model="#{chartJsView.bubbleModel}" style="width: 100%; height: 500px;"/>

In your Managed Bean:

    public void createBubbleModel() {
        bubbleModel = new BubbleChartModel();
        ChartData data = new ChartData();

        BubbleChartDataSet dataSet = new BubbleChartDataSet();
        List<BubblePoint> values = new ArrayList<>();
        values.add(new BubblePoint(20, 30, 15));
        values.add(new BubblePoint(40, 10, 10));
        dataSet.setData(values);
        dataSet.setBackgroundColor("rgb(255, 99, 132)");
        dataSet.setLabel("First Dataset");
        data.addChartDataSet(dataSet);
        bubbleModel.setData(data);
    }

Donut Chart

In your HTML Page:

  <p:donutChart model="#{chartJsView.donutModel}" style="width: 100%; height: 500px;"/>

In your Managed Bean:

public void createDonutModel() {
    donutModel = new DonutChartModel();
    ChartData data = new ChartData();

    DonutChartDataSet dataSet = new DonutChartDataSet();
    List<Number> values = new ArrayList<>();
    values.add(300);
    values.add(50);
    values.add(100);
    dataSet.setData(values);

    List<String> bgColors = new ArrayList<>();
    bgColors.add("rgb(255, 99, 132)");
    bgColors.add("rgb(54, 162, 235)");
    bgColors.add("rgb(255, 205, 86)");
    dataSet.setBackgroundColor(bgColors);

    data.addChartDataSet(dataSet);
    List<String> labels = new ArrayList<>();
    labels.add("Red");
    labels.add("Blue");
    labels.add("Yellow");
    data.setLabels(labels);

    donutModel.setData(data);
}

Conclusion

We have discussed how to create a different set of Primefaces chart to be used in a Web application. To test our application we have used as target server WildFly application server.

The source code for this tutorial is available here: https://github.com/fmarchioni/mastertheboss/tree/master/web/primefaces/chart

Was this article helpful? We need your support to keep MasterTheBoss alive!