Poor Man's Graphics: Part 2
by Keld H. Hansen
In the last article I
described how to make very simple bar charts — both horizontal and vertical — by
stretching 1-pixel GIF's. In this article I'll demonstrate how to add an axis to
the charts, and also how to make some high-level JavaBeans methods which can be
used to make a complete chart with axis and all.
Adding an Axis to the Charts
First we'll see how an axis can be made using 1-pixel GIF's. The technique
that I present will also demonstrate that if you have a graphics element which
could be made up of horizontal and vertical lines or boxes (as an axis can),
then you're often able to include it in your chart.
A horizontal axis looks like this:
If, for a moment, you forget about the numbers then you can see that the axis
is made up of vertical "tic marks" and some connecting lines. These can easily
be made using 1-pixel GIF's. The challenge is to place the numbers at the right
places. Using a table will help us do that right. The following figure shows how
it's done:
The HTML-table has a number of cells. Each cell contains a tic mark (shown in
black), a horizontal line (shown in red) and a tic mark number. First insert
the tic mark as a 1-pixel GIF having a width of one and a suitable height — say
5. Then insert the horizontal line as a 1-pixel GIF with a height of one.
The width has to be calculated according to the scale chosen. Then insert a
<br> tag and you're ready to insert the number, which then will be placed
near the tic mark. To avoid space between the cells you'll have to specify
cellpadding=0 and cellspacing=0 for the table. In order for the images to line
up properly you also have to specify "align=top" in the image tag.
As you can see you actually need a lot of HTML to produce the axis, so it's
convenient to make a JavaBean that can make an axis for you. Let's define a
setter- and a getter-method for this:
public void setAxis(int from, int to, int by)
public String getHAxis()
"from" is the first value on the axis, "to" is the last, and
"by" is the distance between tic marks. "getHAxis" simply returns the HTML-table that
creates the horizontal axis.
Having this method available will make it possible for us to expand the
example from the last article:
<jsp:useBean id="graph" class="htmlgraph.Graph2" scope="request" />
<%
graph.setCSS("Verdana","10px");
%>
<html>
<head>
<%=graph.getCSS()%>
</head>
<body>
<%
graph.setAxis(0,400,100);
%>
<table cellspacing=0 cellpadding=1 border=0>
<tr><%=graph.getHbar(300,10,"red","NBC")%></tr>
<tr><%=graph.getHbar(200,10,"green","CBS")%></tr>
<tr><%=graph.getHbar(320,10,"orange","CNN")%></tr>
<tr><td></td><td><%=graph.getHAxis()%></td></tr>
</table>
</body>
</html>
This jsp-page will now produce this chart
The observant reader will have noticed that we are using a new JavaBean
called "Graph2". It contains the same methods as the bean presented in the last
article, plus the axis methods and the high-level methods that follow.
I'll have to admit that the setAxis-method is not capable of handling any set
of values of (from, to, by).
No validity checking is done — I assume that "from"
is less than "to", that "by" is a positive number, and that there is room for
the labels on the tic-marks. Feel free to enhance the bean-code which you'll
find here.
Actually the coding of the getHAxis-method is not as simple as one might
think. If you're working with a scale of one, it's easy. You only have to
remember that the tic mark uses one pixel, so you'll have to subtract one when
calculating the length of the next horizontal line. But if the number of pixels
between two tic marks calculates to a non-whole number, say 33.3, then you'll
have to alternate between lines of length 33 and 34, in order to place the tic
marks correctly.
In graphics applications you handle this by working with different coordinate
systems, but I guess that digging into that is out of scope for this
article!
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.
| 
