ZetCode

Java Servlet chart tutorial

last modified July 13, 2020

Java Servlet chart tutorial shows how to create a chart with JFreeChart and serve it in Servlet. The example produces a pie chart.

Servlet is a Java class which responds to a particular type of network request - most commonly an HTTP request. Servlets are used to implement web applications in Java. They run in a servlet container such as Tomcat or Jetty. In modern days, Java web programmers use frameworks that are built on top of servlets to develop applications.

Jetty is an HTTP server and Servlet container capable of serving static and dynamic content either from a standalone or embedded instantiations.

JFreeChart is a popular Java chart library. It allows to create a variety of both interactive and non-interactive charts.

Java Servlet chart example

The following example creates a pie chart with JFreeChart library and serves it in a Java Servlet.

pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.zetcode</groupId>
    <artifactId>servletchart</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>12</maven.compiler.source>
        <maven.compiler.target>12</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.jfree</groupId>
            <artifactId>jfreechart</artifactId>
            <version>1.5.0</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.2.2</version>
            </plugin>

            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.14.v20181114</version>
            </plugin>
        </plugins>
    </build>

</project>

The javax.servlet-api dependency is a library for building Java servlets. The jfreechart is a dependency for JFreeChart library.

The maven-war-plugin collects all artifact dependencies, classes and resources of the web application and packages them into a web application archive (WAR). The jetty-maven-plugin allows us to run embedded Jetty server with mvn jetty:run.

pom.xml
src
├───main
│   ├───java
│   │   └───com
│   │       └───zetcode
│   │           └───web
│   │                   DoChart.java
│   ├───resources
│   └───webapp
│           index.html
└───test
    └───java

This is the project structure.

webapp/index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Chart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="showChart">Show chart</a>
    </body>
</html>

In the index.html file, we have a link that calls a servlet, which servers the pie chart.

com/zetcode/web/DoChart.java
package com.zetcode.web;

import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartUtils;
import org.jfree.chart.JFreeChart;
import org.jfree.data.general.DefaultPieDataset;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.OutputStream;

@WebServlet(name = "DoChart", urlPatterns = {"/showChart"})
public class DoChart extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException {

        response.setContentType("image/png");

        OutputStream os = response.getOutputStream();

        JFreeChart chart = getChart();
        int width = 500;
        int height = 350;

        ChartUtils.writeChartAsPNG(os, chart, width, height);
    }

    public JFreeChart getChart() {

        var dataset = new DefaultPieDataset();

        dataset.setValue("Croatia", 22);
        dataset.setValue("Bohemia", 34);
        dataset.setValue("Bulgaria", 18);
        dataset.setValue("Spain", 5);
        dataset.setValue("Others", 21);

        JFreeChart chart = ChartFactory.createPieChart("Popular destinations",
                dataset, true, false, false);

        chart.setBorderVisible(false);

        return chart;
    }
}

The DoChart servlet returns a pie chart to the client.

@WebServlet(name = "DoChart", urlPatterns = {"/showChart"})

The @WebServlet annotation maps the request with showChart URL pattern to the DoChart servlet.

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws IOException {

The request is a GET request, so we serve it in the doGet() method.

response.setContentType("image/png");

The chart is served as an image in the PNG format; therefore, we set the content type of the response to image/png.

OutputStream os = response.getOutputStream();

From the response object, we get the OutputStream. We serve the chart to the client by writing to the servlet's OutputStream.

ChartUtils.writeChartAsPNG(os, chart, width, height);

The ChartUtils.writeChartAsPNG() converts the chart into a PNG file and writes it into the output stream.

public JFreeChart getChart() {

    var dataset = new DefaultPieDataset();

    dataset.setValue("Croatia", 22);
    dataset.setValue("Bohemia", 34);
    dataset.setValue("Bulgaria", 18);
    dataset.setValue("Spain", 5);
    dataset.setValue("Others", 21);

    JFreeChart chart = ChartFactory.createPieChart("Popular destinations",
            dataset, true, false, false);

    chart.setBorderVisible(false);

    return chart;
}

In the getChart() method, we generate the chart. The DefaultPieDataset contains the data for the pie chart.

JFreeChart chart = ChartFactory.createPieChart("Popular destinations",
        dataset, true, false, false);

The pie chart is created with ChartFactory.createPieChart().

Bar chart

The following code is an alternative solution sending a bar chart.

public JFreeChart getChart() {

    DefaultCategoryDataset dataset = new DefaultCategoryDataset();
    dataset.setValue(46, "Gold medals", "USA");
    dataset.setValue(38, "Gold medals", "China");
    dataset.setValue(29, "Gold medals", "UK");
    dataset.setValue(22, "Gold medals", "Russia");
    dataset.setValue(13, "Gold medals", "South Korea");
    dataset.setValue(11, "Gold medals", "Germany");

    JFreeChart barChart = ChartFactory.createBarChart(
            "Olympic gold medals in London",
            "",
            "Gold medals",
            dataset,
            PlotOrientation.VERTICAL,
            false, true, false);

    return barChart;
}

A bar chart is created with ChartFactory.createBarChart().

$ mvn jetty:run

Run the Jetty server and navigate to the localhost:8080.

In this tutorial, we have used created a pie chart with JFreeChart library in a Java servlet and served it to the client.

You might also be interested in the following related tutorials: JFreeChart tutorial, and Java tutorial.

List all Java Servlet tutorials.