Turning numbers into colored bars automatically in HTML/Javascript

Question

I want to auto-generate a HTML table from some custom data. One of the columns in my data is a number in the range 0-100, and I'd like to show it in a more graphical way, most desirably a colored horizontal bar. The length of the bar would represent the value, and the color would also change (i.e. below 20 it's red, etc.)

Something like this (created with paint.net):

_{(source: thegreenplace.net)}

One way this can be achieved is by generating an appropriate .PNG and placing it there as an image. But I think that it can probably be done with some concoction of HTML/CSS/Javascript in an automatic way (i.e. the values thrown into the table are numeric, and JS converts them to bars before showing).

Perhaps someone has done something like this already and can share?

Thanks in advance

P.S: If it can work in IE6, that would be best (don't ask...)

P.P.S: It should work offline, so existing webservices (like Google charts) won't help

Answer 1

AListApart has a great article on how to generate charts using purely CSS. It's nice because it is accessible, meaning even without CSS it will provide meaningful data.

http://www.alistapart.com/articles/accessibledatavisualization

Update: According to one of the commenters on this answer, this solution will also work in IE6.