Tutorials : Poor Man's Graphics :

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>

How to Add Java Applets to Your Site

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.