Obscene Art

OK, so I’ve read the existing articles about building bar graphs with CSS. All are great work. But they didn’t exist before I needed such a creature…and now that they all exist, I still need functionality that doesn’t exist in them. What, you might ask, could I possibly need from a bar chart that these examples do not provide? They look good, they’re generally clean, and they work in all (or most) browsers. Ah, well, we’re developing web-based system administration tools, and one of the things we do a lot of (and will be doing a lot more of in the future) is presenting data about the system to the user in a clear graphical form.

System data does not generally come in the form of multiple numbers to be presented in single part bars. No, more interesting is “how much is available and how much is used”, and even more interesting is, “what is it used for”. For example, we have disk usage graphs that use a different color for each type of usage: mail, web, databases, unused. Ah, so there’s the problem. We need a single bar with multiple elements, and so far, none of the examples provides that. Now, if you happen to be looking for a multi-segment bar CSS bar graph, today is your lucky day, because I’m going to show you two examples.

Example 1 (Apples to Oranges derived)

Note: I finally tested this on IE7 (I run Linux, so I’m using Wine and the ies4linux script to setup IE…IE7 didn’t work on my box until recently), and, of course, it looks atrocious. If anyone knows a fix, I’d appreciate hearing it.

The first is the most recently developed, based on the nice Apples to Oranges definition list example. It works well in all of the browsers I’ve tested except the bastard IE, in which it repeats a piece of the image vertically no matter how I try to stop it from doing so. Otherwise, these graphs rock.

Click here for the live example (which you can view the source of to see how it’s done). Now, in addition to the IE nastiness, there’s two other nasty things about it…you have to do math, and the order in which you insert the colors matters. Math is required because it’s the only way I could get the inner sections to display correctly. Otherwise they either drop below the bar, or they completely cover the bar, depending on how they’re styled. I would more than welcome fixes for any of those issues…but especially the IE thing.

I only used four colors in the example, but it scales out as far as you need just by copying the div.yellow or div.green section and changing the color.

Example 2 (I think I came up with this one all by my lonesome)

This one is a bit less CSS and more HTML, but it is also cross-browser and doesn’t even really require CSS (though, it too can end up going astray on IE–it’s unbelievable how little time I spend on web design work, and yet I still manage to hit IE bugs several times a day…I always thought web designers were just bitching). It does require tables, despite it not seeming to on first glimpse. In fact, I thought I would rip out the tables we use in our actual UI to simplify the example, but found that the images picked up some extraneous space underneath, because they are block elements and the browser is leaving room for tails on g and p and q!

So, here’s what it looks like:

Click here for the live example. This one is probably going the way of the buffalo in our UI because wrapping everything in tables is a thing of the past, so it’ll begin to look funny soon. Scaling this one out to more colors is too obvious for me to bother talking about, and you don’t have to do any math (beyond figuring out percentages).

As mentioned, this one also has an IE issue. Because IE is retarded, it’s easy to end up with oddly sized graphs…it doesn’t handle percentage sized tables, so if you use percentages in the wrapping table widths, you’ll get broken graphs.