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 (ie 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 (ie 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

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

PPS: 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.

Answer 2

This is doable.

2 options:

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

2) put a div with a pre-set height and change the width according to the value you want it 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 could/should tweak the sizes to look nicer of course :-)

Answer 3

The best way is the second part of simon's post. Place a div wherever you need it and change the width with javascript or PHP (depending on if you want it to dynamically change or not) using percentages. Use an if statement for the color. For ex, 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 didn't test this exactly, but something like it should work.

Answer 4

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

Answer 5

Since you already have your data in a table, you might check out the jQuery Visualize Plugin . Once you include it, you'd just call something like:

$('table').visualize();

and it builds a graph from your table.

Answer 6

If you want it to work offline as well, maybe flot can be used.

It is based on canvas and jquery.

I haven't used it yet but it's on my todo list.

The sample code seems simple enough:

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

Answer 7

It's not HTML, but have you looked into Google Charts? It's really quite amazing. http://code.google.com/apis/chart/