Question

I’m by no means a web designer, so I’d like as detailed help as you’re willing to give.

I’d like to make a website that that tracks some data I enter using a bar graph from 0-100%. I’d enter the maximum number the graph could go to and then some data point would be updated occasionally, which the completion bar graph would reflect.

How would I go about doing this?

I know basic HTML and PHP, but have not used either in a very long time.

Answer 1

I think most of the suggestions are overkill. No need to have an extra library / dependency when all you need is some simple bargraphs. Plain HTML/CSS should do…

PS: quick code sample, only tested in Firefox 3.x

<style type="text/css">
.bar
{
    background-color: green;
    position: relative;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
</style>

<div id="barcontainer" style="width:200px;">
    <div id="bar1" class="bar" style="width:43%;"></div>
    <div id="bar2" class="bar" style="width:12%;"></div>
    <div id="bar3" class="bar" style="width:76%;"></div>
    <div id="bar4" class="bar" style="width:100%;"></div>
</div>

You can change the width of individual bars easily with javascript (just change the width).