Horizontal and Vertical Bars
You obviously create a vertical bar by giving a small width and a larger
height. The horizontal bar has a small height and a larger width. Normally
you'll need more bars in your chart, so for horizontal bars you simply go
to a new line for each bar by using the <br>-tag, for example. For
vertical bars you don't have to do anything - yet! Right now things are
pretty simple, since we only have the "bare" bars.
Annotating the Bars
Often you'll want to show the actual height or length of a bar, and maybe
also a "label" - the thing the bar represents - for example "Yes" or "No"
in the user polls. This calls for some decent layout work, and we'll now
have to choose the technique for doing this. Two solutions are the most
obvious ones: using tables - as we have done for years - or using absolute
positioning with style sheets. In this article we'll stick to the good old
tables, since any browser will support this.
A horizontal bar chart is easy to annotate. First give the label, then the
bar and finally the length of the bar:
Yes <img src="greenpixel.gif" width=100 height=10> 100<br>
No <img src="redpixel.gif" width=120 height=10> 120<br>
But hey, there's a small misalignment because "Yes" and "No" does not use
the same amount of space. You may choose a fixed-space font to cure that,
but a better solution is to use a table cell to hold the label and a cell
to hold the bar and the number.
A simple table setup for a horizontal bar chart is this:
<table border=0 cellspacing=0 cellpadding=1>
<tr><td>Yes</td>
<td><img src="greenpixel.gif" width=100 height=10> 100</td></tr>
<tr><td>No</td>
<td><img src="redpixel.gif" width=120 height=10> 120</td></tr>
</table>
The graphics produced will look like this:
The vertical bar chart is produced in very much the same way:
<table border=0 cellspacing=0 cellpadding=1>
<tr valign=bottom align=center>
<td>100<br><img src="greenpixel.gif" width=10 height=100><br>Yes</td>
<td>120<br><img src="redpixel.gif" width=10 height=120><br>No</td>
</tr>
</table>
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
| 
