Adding Charts to Web-Based J2EE Applications

Business applications typically manage data. Therefore, developers often need to provide components that enable users to analyze that data. One way to do this is by providing users access to text-based reports. Another option is to provide a view to the data through a series of graphical charts. Charts can be an extremely useful tool because they allow users to visually compare data elements, spotting trends and patterns not easily discernable through reports when dealing with large amounts of data. Much of today’s business software is Web-based and delivered through a browser. Nevertheless, requirements for these applications, namely data analysis requirements, remain the same. Luckily, if you are developing software with J2EE technologies, there are some open-source options to assist you. This article will demonstrate how J2EE developers can quickly add visually-appealing, graphical charts to their work.

JFreeChart and Cewolf—A Powerful Combination

  /**Inner Class to generate tool tips for data.*/
  PieToolTipGenerator pieTG = new PieToolTipGenerator() {
    public String generateToolTip(PieDataset dataset,
                                  Comparable section, int index) {
        return String.valueOf(dataset.getValue(index) +
                              " employees total" );
    }
  };
  public PieToolTipGenerator getPieTG() {
     return this.pieTG;
  }

The new and improved piechart.jsp includes a second pie chart with many enhancements. Near the top of the page, you obtain an instance of your PieToolTipGenerator:

<% pageContext.setAttribute("pieChartViewToolTips",
                            pieChartView.getPieTG()); %>

An additional tag, map, needs to be included within the img tag in order to use tool tips:

<cewolf:map tooltipgeneratorid="pieChartViewToolTips"/>

While adding tool tips to this second pie chart, I modified the JSP tags to include additional features. The chart image is now of type ‘pie3d’ and the chart’s legend is now generated separately from the chart. More importantly, you now pass an input parameter, inputYear, using the producer tag (nested within the chart tag). The ability to parameterize a chart is the key to providing users with dynamic charts. In a typical application, these parameter values might be input from an HTML form that a user submits to customize his or her chart:

<cewolf:producer id="pieChartView" >
  <cewolf:param name="year" value="<%=(Serializable)inputYear%>"/>
</cewolf:producer>

In EmployeesByDept, you check for an input parameter. If a parameter is supplied, you filter our data by year. Figure 1 shows the JSP page displaying both pie charts. Note that the second chart displays the tool tip text ‘6 employees total’ over the series that represents HR employees. Here’s the 3-dimensional pie chart graphic (without a legend, which was a separate image in this example):

Figure 1. 3-D Pie Chart

More Advanced Charts

You have thus far seen examples of pie charts. More complex types of charts can show one or more series within one or more categories. JFreeChart’s CategoryDataset interface represents data containing series grouped within categories.

I have created a second Java class in the file EmployeesByDeptAndQtr.java. Like the previous class, EmployeesByDeptAndQtr also implements Cewolf’s DatasetProducer interface. As its name implies, this class executes a database query that will display head counts for each department, categorized by the quarter of the employee’s hire date. Here’s the query sent to the database:

SELECT COUNT(emp_id), QUARTER(emp.hire_date) quarter, dept.name
   FROM emp, dept
   WHERE emp.dept_id = dept.dept_id
   GROUP BY dept.name,QUARTER(emp.hire_date);

With the returned DefaultCategoryDataset, you can create a number of chart types. Each of these charts consists of an x and a y plot. The x plot plots data horizontally; the y plot plots data vertically. Depending on the type of chart used, one plot will display value points, the other categories. As with the pie chart, the data series will be color coded and included in a chart legend. You will display three of them: a horizontal bar, a vertical bar, and a line chart. The bar charts differ in how they map their x and y coordinates. A line chart displays a different type of graphic. It identifies distinct data points, connected by a line that runs across the chart.

The content of categorychart.jsp should look familiar as it uses many of the same constructs as piechart.jsp. It declares a DatasetProducer instance, and then lists a set of JSP tags to manage the charts. This JSP file contains separate tags for chart types ‘horizontalBar3D’, ‘verticalBar3D’, and ‘line’. All three charts represent the same CategoryDataset (provided by the DatasetProducer). Only two new tag attributes are introduced: xaxislabel and yaxislabel. Figure 2 shows the resulting Web page. Below are the three chart images produced in greater detail:

Figure 2. Various Category Charts

Conclusion

This article’s intended purpose was to provide you with an introduction to creating graphic charts using JFreeChart and Cewolf. I strongly encourage you to visit each site and explore the additional chart types and chart enhancements that are available to you. Extensive documentation of JFreeChart is available for purchase. Both projects have community forums to help answer questions. Also, both sites offer on-line Javadocs that document source code. By combining JFreeChart and Cewolf, J2EE developers have a useful, and easy to use, tool that can be used to satisfy user’s data analysis requirements.

About the Author

Michael Klaene is a Senior Consultant with Sogeti LLC. He has spent over 7 years in IT, specializing in J2EE and Oracle analysis and development.