Creating Simple Bar Graphs with HTML

Looking for a quick and dirty way to make bar charts? While digging through old code, I stumbled across some simple HTML code for generating bar charts. I'm sure there are better ways to make fancier graphs, but I thought it would be fun to share this old-school technique.

First, we need a tiny 1×1 pixel graphic. I know…this is getting into spacer-image territory. This graphic should be filled with the desired color for the bars. We also need the data for the chart. For example, let's say the following responses were received for a survey question:

The percentages are used to stretch the width of the image created early. The 50% becomes 50px, 25% becomes 25px, and so one. For example, the image tag for the "Good" response would look like the following:

<img src="images/barGraphColor.gif" width="50" height="10" alt="">

Note: the height attribute is used to thicken the bar and can be modified as needed. Also, the src attribute would be changed so it points to your 1×1 pixel image.

Final Bar Graph

Response	# of Votes	% of Votes
Great	50	25%
Good	100	50%
Average	48	24%
Poor	2	1%

Conclusion

The bar graph may be crude, but it works. Note that the bars don't need to be the same color. For additional colors, just create 1×1 pixel image (with a different color) and modify the HTML code accordingly.