Question

I would like to use a <td> cell to visually “graph” a percent that’s in the cell next to it. I will be bringing in the percent and want to shade it like a bar for a graph. Has anyone tried to do that and would it be easier to do it with CSS or JS function? I am using a html/php combo on the page.

Answer 1

Here’s a simple sample of how it could be done. It’s really just a matter of basic CSS:

http://jsfiddle.net/e5wRA/1/

Updating the Bar

Javascript (jQuery):

var percent = 20;

$('.bar').css({
    width: percent.toString() + '%'
});

PHP:

<tr>
    <td><?php echo $percent; ?>%</td>
    <td class="graph"><div class="bar" style="width:<?php echo $percent; ?>%"></div></td>
</tr>