JFreeChart : Create Auto-Refreshing Pie Chart in Servlet dynamically

This post explains the step by step process of creating a pie chart in Servlet with values retrieved from mysql database and displaying it in an auto-refreshing JSP page with an example using Jfreechart library. It is always good to represent statistical data in graphical format instead of just displaying it in rows and columns of a table, for better understanding and easy interpretation. Pie Chart is one way of producing analyzable data in graphical representation. In Java, you can draw a pie chart using methods from Graphics class of java.awt package. But it is quite tedious to design your own class for the creation of pie charts and populating it with appropriate data with the generic Graphics class of the Java API. Still, if you choose to draw your own pie chart you can have a look at this.

There are many open source Java libraries available for instant creation of pie chart in your Java application, among which Jfreechart is easiest and the most widely used one.  In this post I am going to provide a simple example for creating pie chart using Jfreechart to represent statistical data. When I say statistical data, in most of the cases it comes from a database. Here, I am going to retrieve data from mysql database, create pie charts in a Servlet and display it using JSP. I am using JSP to display the created pie chart not only to keep the presentation aside from the logic but mainly to provide auto-refreshing pie charts in order to keep the data in the pie chart and database in sync.

Add Jfreechart library to your Web Application

1. First and foremost download Jfreechart library from here.

2. I am using Apache Tomcat and Eclipse IDE to create a simple application to demonstrate pie chart creation. 

From the downloaded folder, copy jfreechart-x.x.x.jar and jcommon-x.x.x.jar (x.x.x in the jar file name denotes the version of the library), and paste it in the tomcat/lib directory.

3. Create a "Dynamic Web Project" in Eclipse IDE. In this example, I have named it as 'PieChartExample'.
Now go to Project Explorer, right click on 'PieChartExample' -> Build Path -> Configure Build Path -> Add External Jars. Add jfreechart-x.x.x.jar and jcommon-x.x.x.jar files and click OK. 

Now the setup is complete and is ready for programming.

Create Pie Chart in Servlet from database values

4. Create a Servlet in your web application. I have created a servlet named 'PieChartDemo' under the package 'com'.

5. Identify the database that is going to feed the pie chart with values to represent. I have created a sample table called 'country_revenue' in mysql database, that consists of country based revenue details of a company. Here is the data contained in the sample database,

+------+---------+---------+

| id   | country | revenue |

+------+---------+---------+

| C001 | US      |  100000 |

| C002 | UK      |   90000 |

| C003 | RUSSIA  |   34000 |

| C004 | CHINA   |   90500 |

| C005 | INDIA   |  340000 |

+------+---------+---------+

6. Now copy the below code and paste it in the servlet.

package com; 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.BasicStroke;
import java.awt.Color;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartRenderingInfo;
import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.entity.StandardEntityCollection;
import org.jfree.data.jdbc.JDBCPieDataset;
import java.io.OutputStream;
import java.sql.SQLException;
import java.sql.DriverManager;
import java.sql.Connection; 
public class PieChartDemo extends HttpServlet {

private static final long serialVersionUID = 1L;
public PieChartDemo() {

} 
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
Connection connection = null;
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
try {
connection=
DriverManager.getConnection("jdbc:mysql://localhost/databasename?user=yourusername&password=yourpassword&useUnicode=true&characterEncoding=utf-8");
} catch (SQLException e) {
e.printStackTrace();
}
}catch (InstantiationException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} 
catch (ClassNotFoundException e) {
e.printStackTrace();
}
JDBCPieDataset dataset = new JDBCPieDataset(connection);
try {
dataset.executeQuery("Select country,revenue From 
                country_revenue order by revenue desc");
JFreeChart chart = ChartFactory.createPieChart
         ("Country - Revenue Chart", dataset, true, true, false);
chart.setBorderPaint(Color.black);
chart.setBorderStroke(new BasicStroke(10.0f));
chart.setBorderVisible(true);
if (chart != null) {
int width = 500;
int height = 350;
final ChartRenderingInfo info = new ChartRenderingInfo
                               (new StandardEntityCollection());
response.setContentType("image/png");
OutputStream out=response.getOutputStream();
ChartUtilities.writeChartAsPNG(out, chart, width, height,info);
}
}catch (SQLException e) {
e.printStackTrace();
}
} 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}
}

In the above code, we have created connection to the database with the DriverManager.getConnection method. Do not forget to replace the parameters of this method with your database name, username and password. Jfreechart provides JDBCPieDataSet method to retrieve appropriate data from database and createPieChart() method creates the pie chart with the populated dataset. writeChartAsPNG() is the method that is responsible for rendering the image in png format. Always set the content type to the appropriate image format before trying to write it with the writeChartAs method. Here the content type is set as 'image/png' since I have used writeChartAsPNG() method. You can also use writeChartAsJPEG() method to render a JPEG image.

9. Do the following in the web.xml deployment descriptor file to map this servlet to an url pattern,

<servlet>
<servlet-name>PieChartDemo</servlet-name>
<servlet-class>com.PieChartDemo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PieChartDemo</servlet-name>
<url-pattern>/chart</url-pattern>
</servlet-mapping>

10. Now right click the servlet and using Run as -> Run on Server option, run the servlet to see the newly created pie chart.

As you see in the above image, pie chart is generated that represents country based revenue of a company. But, this page is static since servlet itself is static in nature. Though we have fetched values from database, it does not display the current or updated data from the database. For displaying pie chart with values from a database that is frequently updated, you need to recall the servlet. In order to achieve this I suggest you to use a JSP page to display the servlet and refresh it automatically at regular intervals.

Display pie chart in JSP page and auto-refresh it

11. Create a JSP page and paste the following code in it.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pie Chart Demo</title>
<script language="Javascript">
function refreshpage(){
document.forms.form1.submit();
}
</script>
</head>
<body>
<h1>JFreechart: Create Pie Chart Dynamically</h1>
<%response.setIntHeader("Refresh",5);%>
<form id="form1">
  <img src="chart" width="600" height="400" border="0"/>
  <input type="button" onclick="refreshpage()" value="Refresh"/>
</form>
</body>
</html>

In the above code, servlet is called from the img tag's src attribute. This triggers the servlet whenever the image is rendered on the page. To automate the page refreshing process,

response.setIntHeader("Refresh",5);

is used which sends back header "Refresh" to the browser along with an integer value which indicates time interval in seconds. Here the time interval is 5 seconds, which means the page will refresh and render updated data from database for every 5 seconds.

Output:

You can set the time interval for page refresh based on how often your database gets updated, but never set it to less than a second to avoid over CPU load. This automatic refreshing can also be achieved using Javascript or HTML page refresh. But it is a good practice to have a 'Refresh' button to enable the end-users to decide on when to refresh the page.

I hope this post helped you to create your own pie chart in your web application using JFreeChart. Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts.

Subscribe to GET LATEST ARTICLES!