QUICK AND EASY BAR CHARTS

We have a client who LOTS of bar charts in the newsletters posted at his financial services website. If I created all these charts as graphics I would strain his limited budget, strain my limited amount of time, slow down his web pages and take up more space in his public_html directory.

Instead, I've used the following shortcut.

I created a number of 1-pixel gifs in appropriate colors and uploaded them to his site to use and re-use as bars in various charts. (I also created a small, totally transparent gif which is handy to use as a "spacer" both in bar charts and on web pages in general though none of the examples below happen to use it.)

I created a number of bar-chart templates, both horizontal and vertical, using HTML to define the height and width of the the bars in the charts.

Here is a simple vertical bar chart within a table. This example is fictitious. The numbers (175 mil. - 175 pixels high) could apply to population or gross national product or anything. Of course, if you have a chart with figures which are too large or small to translate into the exact same number of pixels, you have to double or triple the pixels, or cut them in half, or whatever is appropriate.

175 mil. U. S.	200 mil. Canada	150 mil. France	75 mil. Australia	180 mil. Mexico

Below is an example of a more complicated vertical bar chart. This is a real example using real figures. I should point out that in the examples, below, I really should have substituted the $'s and the %'s with a character reference, but put this article together in rather a hurry and did not do so.

WHICH COUNTRIES PROSPER? Annual real per-capital GDP growth 1980 - '93.
FREE 2.88%	MOSTLY FREE 0.97%	MOSTLY NOT FREE -0.32%	REPRESSED -1.44%
2.88%	0.97%
		-0.32%	-1.44%
NOTE: Per-capita GDP is expressed in terms of Purchasing Power Parities. Source: Heritage Foundation as reported in The Wall Street Journal

Here's another actual example

UNEMPLOYMENT % RATE
2nd Quarter 1997

	U. S. 4.8%	BRITAIN 8%	JAPAN 6.6%	CANADA 9.5%	GERMANY 11.4%	ITALY 12.2%	FRANCE 12.8%

Below is a simplified example of a horizontal bar chart. This is another fictitious example. In this case, I've use twice as many pixels as dollars.

Below another horizontal bar chart. It's within a table with a little cellspacing and cellpadding. It also has names of colors in a second column to the left of each color.

FF3333
0099FF
FF9900
00CC66
9999FF
CC0066

Looking at the above horizontal examples you may wonder if you could do the same charts simply using HR tags? Yes, if you don't care about color, and the HR tag method has one huge advantage. You can define the bars in terms of percentages rather than pixels. This means your charts will fit well on the browser's page and will also give a very entertaining spoinggg when the page is resized.

Here is a real example, below.

Well, those are some examples of the kinds of charts you can make relatively quickly and easily. I hope this may have given you some ideas you can apply to your own pages.

This page hosted by
Get your own Free Homepage