CSS Vertical Bar Graphs

Here's a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple table and a few divs. Really.

Quarterly Results
Invoiced
Q1

$18,450.00

Q2

$34,340.72

Q3

$43,145.52

Q4

$18,415.96

$50,000

$40,000

$30,000

$20,000

$10,000

It's pretty much all positioning. Actually, once you figure out how you want the graph to look, figuring out how to position things is fairly simple. The (comparatively) hard part is in figuring out how to calculate the heights of the various vertical bars and the horizontal "strata". This could be done in PHP, ASP, or some other server-side processing engine; via JavaScript on the client side; or manually by someone who really loves their calculator.

You can view source to see how simple it is, or here's the same table with the inline styles, classes, and IDs stripped away.

Quarterly Results
Invoiced Collected
Q1

$18,450.00

$16,500.00

Q2

$34,340.72

$32,340.72

Q3

$43,145.52

$32,225.52

Q4

$18,415.96

$32,425.00

$50,000

$40,000

$30,000

$20,000

$10,000

Jump to