The visual presentation of information is often far more effective than simply stating the facts. Want to show how much your customer base has grown? Looking to compare apples to oranges? Have a frequency distribution of any sort to display? Perhaps a bar graph will do the trick.
Bar graphs are those nifty little illustrations with a series of different length rectangles, or ‘bars,’ that vary in length in the same proportion as the numbers they represent. So a bar representing 50 will be exactly half as long as a bar that represents 100.
More complex data can be presented in two dimensions — that is the width of the bar can be significant as well as its length. Also, you can color-code the bars to represent yet a third dimension, or just to make it easier to label values with a key to the color codes.
There are complex (and expensive) programs available that will graph data in various types of graphs and charts, including our simple bar graphs, but sometimes that kind of power is just over-kill.
Why not use the wonderful powers of web browsers to manipulate graphics, to help you build your graph? It is easier, faster and more flexible. Best of all, the resulting graphic won’t take up a lot of bandwidth. Even a large graph will load super fast!
Here is the key to the whole process: web browsers will scale graphics to any size you specify.
That seems simple enough, but most web designers fail to use the full power of this feature. For your graph, make an image just ONE PIXEL in size, for each color you want to use. Most any graphics program should let you do that.
Save your image as a JPEG and it should be less than 700 bytes in size. If you get a file that is about 5K then you need to check your ‘save’ settings in the graphic program, you are saving non-graphic information such as creator, version, etc. That isn’t needed for this work of fine art. Or, if your graphic program supports the GIF format you can save your one-pixel image as a GIF and it will be only 35 bytes in size!
Create one image for each color you want to use in your bar graph. Then simply let the browser expand your one pixel image to the size of bar you need. You can use paragraph tags, tables or other HTML elements to align and label the bars on your graph. For our example, lets say all the bars will be green and you made a file called ‘green.jpg’ and stored it in the same directory with the HTML file.
Say you want to compare sales of widgets and gadgets. You sold 13,458 widgets and 9,582 gadgets. Supposing you want your graph to fit in a space 500 pixels wide. Divide the larger number by that 500 and round upward to get a display ratio of 27 — that is to say each pixel will represent 27 widgets or gadgets. Then divide each number by 27 to get the length setting for your bar. Add labels and you get code something like:
Gadgets 
Widgets
The ‘height’ value determines the width of the bar, you can adjust it to whatever looks best. If you would rather have a vertical bar graph, just swap the ‘height’ and ‘width’ values and use a table format to ensure your captions line up properly.
Give your viewers a graphic view of the data without wasting precious bandwidth, and save time in the process!
Andy Morris does lots of stuff, including collecting good ideas
like this. Visit one of his websites at
http://www.epmassoc.com/
and learn all about eBooks!
