advertisement
javaboutique
Search Tips
Articles  |   Tutorials  |   Reviews  |   Tools  |   by Category  |   by Date  |   by Name  |   Submit  |   Source  |   Forums  |  
javaboutique
Browse DevX


Partners & Affiliates











advertisement


Tutorials : Poor Man's Graphics :
Contents
Introduction
Horizontal and Vertical Bars
Using Javabeans to Produce the Bars
Scaling Your Chart

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: horizontal bars

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>

vertical bars

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.

 Avaya Developer Showcase
 MSDN Spotlight
 PHP for Windows Showcase
XML error: undefined entity at line 34
advertisement
Receive Articles via our XML/RSS feed
Receive Articles via our XML/RSS feed

JavaBytes
Internet Cyclone
This powerful, easy-to-use, internet optimizer is for Windows 95, 98, ME, NT, 2000 and XP. It's designed to automatically optimize your Windows settings, boosting your Internet connection up to 200%.

IBM Brings Developers Into the Cloud
Apache at 10: You Can't Buy Us
Microsoft's CodePlex Foundation Moving Forward
Apple Claims 100,000 Apps, Google Analyzes Them
Nokia Latest to Play Opera Mobile 10 Browser
PayPal Opens Up Payment Platform to Devs
Ubuntu Linux 9.10 'Karmic Koala' Starts Its Climb
IBM Links Rational Developer Tools, Tivoli Apps
Libraries Give Vista Apps a Windows 7 Look
Ubuntu: The 'Default Alternative' to Windows?

Delivering Web-based Embedded Fonts in CSS 3
Adobe Helps PHP Developers Create Rich Internet Applications
Java Developers Finding a Home at Adobe Flex
Virtualization Delivers a Dynamic Infrastructure
Consuming XML Web Services in iPhone Applications
Build a More Agile Business with IBM
POJO-Based Solutions for LDAP Access: One Good, One Better
IBM Offers Enhanced Measurement and Management for Energy Usage
IBM Helps Transformation to an Information-Based Enterprise
Top Five Touch UI-Related Design Guidelines

Advertising Info  |   Member Services  |   Contact Us  |   Help  |   Feedback  |   Site Map  |   Network Map  |   About

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs