Turning numbers into colored bars automatically in HTML/Javascript

Answer 1

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

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

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 4

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 5

If you want it to work offline as well, maybe flot can be used. http://code.google.com/p/flot/ 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 6

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 7

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.