) is 81 pixels wide. The extra pixel is for the 1-pixel border on the final layer. This graphic is shown at actual size.If you need to make simple line and bar charts, but have no graphics software available on the server, or just don't feel like learning how to use the graphics package you do have, here's a way to build graphs with just JavaScript and CSS. I call the technique GLARE, for Graphic Layering And REsizing.
The basic idea is to combine simple graphic elements, layering them on top of one another using CSS, and resizing them as necessary using JavaScript. This page employs a sample JavaScript routine, showConfidenceGraph.js. It shows a line graph illustrating a "confidence level", along with a "margin-of-error", all defined in percentages and shown on a scaled graph. You can use it, or come up with variations on the idea. Here's how the example works.
First, you need a base graphic, which will not only make the background for the graph, but also establishes the scale.
For this example, I decided on a scale of 80 pixels, so the base graphic (images/graph_base.gif:
) is 81 pixels wide. The extra pixel is for the 1-pixel border on the final layer. This graphic is shown at actual size.
Next, we need a resizable graphic to represent the margin-of-error. In this case, it's a small yellow box
(images/graph_marginoferror.gif: 
). Using CSS, this is plotted on top of the base graphic, and resized to the proper calculated width and height.
Next, we need another resizable graphic to represent the level of confidence, a small green box
(images/graph_confidence.gif:
). It goes on top of the margin-of-error graphic. There is also a simple 2-pixel thick line graphic (images/graph_confidence_pointer.gif: 
) which is plotted at the exact confidence level.
Finally, the full-size-with-a-transparent-background scale graphic (images/graph_scale.gif:
) is plotted on top.
Examine the JavaScript code for comments on how the exact scaled values are calculated. View this page source for the CSS used.
That's it! Here are some examples of calling the sample routine. Feel free to use the routine as-is, as well as the graphics, or come up with your own variations. If you do, I'd love to see them. - Mark (wilson@cpuworks.com)
| This example shows a confidence of 90, and a margin-of-error of 5. | |
| This example shows a confidence of 57, and a margin-of-error of 25. | |
| This example shows a confidence of 40, and a margin-of-error of 10. | |
| This example shows a confidence of 63, and a margin-of-error of 7. |