Jakarta Struts Cookbook

4.2. Creating a Vertical Bar Chart

Problem

You want to create a data-driven vertical bar chart on a web page without having to use an applet or a graphics library.

Solution

Use nested HTML tables with the height percentages calculated dynamically:

<table height="500" width="60%">
  <tr>
    <logic:iterate id="row" 
                 name="foo" 
             property="bar">
      <td valign="bottom">
        <table height='<bean:write name="row" 
                               property="percentage"/>%' 
                width="100%" bgcolor="#003366">
          <tr>
            <td align="center" valign="top">
              <font color="white">
                <bean:write name="row" 
                        property="percentage"/>%
              </font>
            </td>
          </tr>
        </table>
      </td>
    </logic:iterate>
  </tr>
  <tr align="center" height="10%">
    <logic:iterate id="row" 
                 name="foo" 
             property="bar">
      <td align="center" width="50">
        <bean:write name="row" property="label"/>
      </td>
    </logic:iterate>
  </tr>
</table>

Discussion

In Recipe 4.1, the chart is generated using a logic:iterate loop. On each pass through the loop, a table row is generated. The first column of the each row holds the label, and the second column contains the bar graph. The graph is generated using a numeric value to specify the width percentage for a nested table that has a different background color.

A vertical bar chart can be thought of as a horizontal bar chart flipped on its side. The table for a horizontal chart has n rows by two columns, in which n is the size of the Collection being iterated over, and the two columns are for the label and the bar. The vertical bar chart, on the other hand, uses n columns by two rows