Bar graphs on a website

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).

Answer 2

I know you said you're new, but you should take a look at the google visualization api. It's got some good stuff to do the kind of thing you might want.
http://code.google.com/apis/visualization/

Answer 3

There are two ways you could tackle this problem; generate the graph on the backend (probably using PHP in your case) or do it on the client side using javascript.

I'm not sure the specifics of doing it in PHP, as I don't really know the language, but I'm sure there is alot of info out there on graph generation in PHP.

For the javascript approach, I've used both flot (for jquery) and flotr (for prototype) before. I like them alot, and there is some good documentation and examples for both libraries on how to generate all kinds of charts, including bar charts.