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 set of nested lists and CSS. Really.
You can view source to see how simple it is, or here's the same list with the inline styles, classes, and IDs stripped away.
Here's how it works: the data from each quarter is contained in a list item. This list item contains the label (e.g., "Q2") and a nested list that has one list item for the invoices, and one for the collections. The
ul element is positioned with the desired height and width, which are here expressed in pixels.
The four quarters are absolutely positioned with respect to the
ul element using
position: absolute. They're all the same size, and only the value of
left changes for each one. From there, it's a simple matter to absolutely position the
paid bars inside each quarter-box (which, being positioned, acts as the containing block for the bars). A little extra positioning to place the numbers, and we have our basic layout.
The "ticks" (the horizontal bars) are created with a few
divs that all have the same height and stack one atop another. Since everything that comes before them in the list is already positioned, we don't have to absolutely position the
divs. They just drop into place. The labels are placed just outside the tick-
divs with some simple absolute positioning of their own.
The last bit is adding colors and gradient background images, which is straightforward enough.
The graph probably won't look as nice on IE/Windows as it does in Firefox, Safari, or Opera, since the graph uses PNGs with full alpha channels to create the fades on the graph background as well as the vertical bars. Try this visually flatter but more IE/Win-friendly version, should you be so inclined.
Similar but much nicer-looking work was published in November 2005 by Apples to Oranges.