Home/ Questions/Q 108215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:52:36+00:00

I want to auto-generate a HTML table from some custom data. One of the

  • 0

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):

alt text
(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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 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.

    • 0