Jakarta Struts Cookbook

4.1. Creating a Horizontal Bar Chart

Problem

You want to create a simple data-driven horizontal bar chart on a web page without using an applet or graphics library.

Solution

Use nested HTML tables with the width percentages calculated dynamically:

<table border="0">
  <logic:iterate id="row" name="foo" property="bar">
    <tr>
      <td align="right" width="20%">
        <bean:write name"row" property="label"/>
      </td>
      <td align="left" width="80%">
        <table width='<bean:write name="row" 
                              property="percentage"/>%' 
             bgcolor="blue">
          <tr>
            <td align="right">
              <font color="white">
                <bean:write name="row" 
                        property="percentage"/>%
              </font>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </logic:iterate>
</table>

Discussion

Displaying tables of raw numeric data may satisfy the functional requirements of your application, but outputting this information in a graph can make a tremendous difference to your end users. However, as soon as you start talking about graphics, the groans begin. Should you buy a reporting engine? What about a graphics-rendering framework? Do you need both? In many situations, if your application requirements can be met fairly by bar graphs, a combination of some clever HTML and Struts can do the work for you.

Consider a web application that displays weather forecast information. The application needs to display a bar chart that shows the chance of precipitation for the upcoming week. You'll create the WeeklyWeather class that holds the weather forecast as shown Example 4-1.

Example 4-1. JavaBean containing weather-related ...