May 23, 2019
Hot Topics:

Adding Charts to Web-Based J2EE Applications

  • December 23, 2004
  • By Michael Klaene
  • Send Email »
  • More Articles »

The Cewolf distribution includes a JavaScript library (overlib.js) in its etc/ folder. The two most popular browsers are Internet Explorer and Mozilla. This script is used to render tooltips in the Mozilla browser as its mechanism for doing this differs from the former. Add the etc folder to the root of your Web application.

Cewolf, by default, stores all images in a user's HttpSession object. The TransientSessionStorage class, specified in the servlet's storage initialization parameter, takes care of this. Another option is to store the image on the file system. To do this, replace TransientSessionStorage with the FileStorage class (of the same package) in the param-value tag of the storage parameter. All chart images will be created as PNG type images (though other image types are possible). PNG files are high-quality images supported by most Web browsers.

Now that the wiring of your application is complete, you need to code your Java class and JSP to generate the data and display the data, respectively. First, consider the Java file. As mentioned earlier, Cewolf defines a DatasetProducer interface that defines methods used to provide data to JFreeChart. Here is the DatasetProducer interface:

Object produceDataset(Map params) Method that returns the data (as a Dataset) for rendering. Typically, you would access your database here, either directly or indirectly, to provide this data.
boolean hasExpired(Map params, Date since) This method can be used to interrogate the last time the data was produced and determine whether produceData needs to be invoked again.
String getProducerId() Method that uniquely identifies a type of DatasetProducer.

The produceDataset method is the key method in this group because it provides the necessary data for your charts. In this example, you are generating a simple pie chart that will display the number of employees hired for each department. You will access the database to run a query against your emp and dept tables. Look at the code for EmployeesByDept.java. As you can see, it implements DatasetProducer. For your simple example, you return false from hasExpired, meaning, as is, the Dataset will never expire. In a real application, you would supply the logic to determine this.

EmployeesByDept accesses a database, with help from a utility class, and returns an instance of DefaultPieDataset, the default Dataset implementation for producing a pie chart. The query executed depends on the existence of an input parameter. You'll look at that in a bit. For the time being, you are not passing a parameter, so the SQL query it runs is as follows:

SELECT COUNT(emp_id), dept.name
   FROM emp, dept
   WHERE emp.dept_id = dept.dept_id;

With the head count it obtains from each series (each department, in this case, is one series of data), the chart will be created by JFreeChart and displayed at the time your JSP file is requested. View piechart.jsp to see how Cewolf tags are used to accomplish this.

In piechart.jsp, there are two parent tags at work: chart and img. The chart tag is responsible for overall chart configuration. Included are tags and attributes for specifying they type of chart to be rendered, a title for the chart, background color, and more. The most important piece of information within the chart tag is recorded in a nested tag:

     <cewolf:producer id="pieChartView" />

The data tag specifies the Dataset to be used when rendering the chart. Object pieChartView is an instance of EmployeesByDept that you declare at the top of the page:

<jsp:useBean id="pieChartView" class="examples.EmployeesByDept"/>

The other parent tag just below chart is named img. This tag specifies how the chart is to be displayed. It contains attributes to control the graphic: height, width, border, and so on. The chart and img tags are linked to one another through the chart 'id' attribute and the img 'chartid' attribute. In this case, you've given your chart an id of 'pieExample'. These tag definitions produce the following pie chart image:

This is a good start, but you can improve upon this example. Many charts like to include text (in addition to the text inside the legend) to describe each data series. You have the ability to add text to the image itself. Another capability you have with JFreeChart and Cewolf is to include text as a tool tip. Now, add a tool tip that displays when a user's mouse hovers over a particular series on the image. To accomplish this, you need to obtain an instance of type PieToolTipGenerator that implements a method called generateToolTip. The easiest way to do this is to add an inner class to EmployeesByDept.java. Here is the updated Java file, in which you added the following code:

  /**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%>"/>

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

Page 2 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date