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