Automatically switch numbers to color bars in HTML / Javascript

Question

I want to automatically generate an HTML table from some user data. One of the columns in my data is a number in the range 0-100, and I would like to show it more graphically, most preferably with a colored horizontal bar. The length of the bar will represent the value, and the color will also change (i.e. below 20 reds, etc.)

Something like this (created with paint.net):

alt text http://eli.thegreenplace.net/files/temp/df.png

One way to achieve this is to create an appropriate PNG and place it there as an image. But I think this is possible, possibly with some HTML / CSS / Javascript in automatic mode (i.e. the values ​​entered in the table are numeric, and JS converts them to columns before showing).

Perhaps someone has already done something similar and can share it?

Thank you in advance

PS: If it can work in IE6, that would be better (don't ask ...)

PPS: it should work offline, so existing web services (like google charts) won't help

Answer 1

AListApart has a great article on how to create diagrams using pure CSS. This is good because it is accessible, which means even without CSS, it will provide meaningful data.

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

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

Answer 2

It is doable.

2 options:

1) put the image in each cell using the img tag and resize the image using the width attribute

2) place the div with the given height and change the width according to the value you want to display. Use the background color of the div as your color - no images needed.

Example:

<table style="border: 1px solid black"> <tr><th>name</th><th>value</th></tr> <tr><td>hi</td><td><div style="height: 10px; width: 35px; background-color: #236611">35</div></td></tr> <tr><td>yes</td><td><div style="height: 10px; width: 15px; background-color: #236611">15</div></td></tr> <tr><td>see?</td><td><div style="height: 10px; width: 75px; background-color: #2366aa">75</div></td></tr> </table> 

... you can / should adjust the sizes to look better, of course :-)

Answer 3

The best way is the second part of the simon message. Place the div wherever you need and change the width using javascript or PHP (depending on whether you want to dynamically change or not) using percent. Use the if statement for color. For example, in javascript:

 function displayGraph(barID, number) { var color; if (number <= 20) { color = "red"; } elseif (number > 20 && number <= 60) { color = "yellow"; } else { color = "green"; } var bar = document.getElementById(barID); bar.style.width = number + "%"; bar.style.backgroundColor = color; } 

I have not tested this for sure, but something like this should work.

Answer 4

Check out jQuery Sparkline , which provides built-in charts similar to what you're looking for. If you use bullet graph , you can display the good / normal / bad ranges associated with your data, which provide a huge amount of data in a very small space.

Answer 5

If you want it to work offline, maybe flot .

It is based on canvas and jquery.

I have not used it yet, but in the task list.

The sample code seems simple enough:

 $(function () { var d1 = [[0, 3], [4, 8], [8, 5], [9, 13]]; $.plot($("#placeholder"), [ d1 ]); }); 

Answer 6

Since you already have the data in the table, you can check the jQuery Visualize Plugin . When you turn it on, you simply call something like:

 $('table').visualize(); 

and he builds a graph from your table.

Answer 7

This is not HTML, but have you looked at Google Charts? This is really awesome. http://code.google.com/apis/chart/