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 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 2

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.

Answer 3

FusionCharts is another option

Answer 4

If you wanted to keep things simple and just use PHP and HTML you could use the GD library of PHP.

It is a general purpose graphics library.

There is an example here that illustrates how to create a bar graph.

Answer 5

If you don't want to do much programming you could always create the chart within Google Spreadsheets and then just publish/embed the chart in your website:

http://googlesystem.blogspot.com/2007/04/google-spreadsheets-charts.html

Answer 6

A List Apart has an article on accessible charts with plain HTML and CSS.

• Article
• Demonstration

Answer 7

I'm interpreting your question as: you want to put bar graphs on your website. ExtJS has a good implementation of bar graphs (http://extjs.com/deploy/dev/examples/chart/reload-chart.html). Major drawback is that you will need to learn a bit of javascript.

Answer 8

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