Bar Graphs With Style
Published 18 years, 11 months pastA lot of the time, when I’m sharing a technique or effect I’ve devised, I’ll say something like “I doubt I’m the first to think of this…” or “it may not be original, but it’s original to me…”. This might strike some as an annoying quirk, some sort of pseudo-modesty that I should either embrace fully or just drop already.
However, I do it because I know it’s true. Even some of the most radical experiments I’ve published, like those on css/edge, were prefigured or anticipated by others. I didn’t steal anyone’s ideas, of course. Every one of those demos was an original creation born of my knowledge and thinking. They just weren’t necessarily the very first instance of those techniques ever published anywhere. Other ideas, like Universal Child Replacement, were devised before I hit upon them but were never documented.
I bring this up because the door swings both ways: from time to time, I see someone else publish a technique or idea that I’d had but never documented. A recent case in point was the appearance of “CSS for Bar Graphs” at Apples to Oranges, which showed a vertical bar graph created out of CSS and a list. I’d done something very, very similar almost three months before the AtO article’s publication date while creating an invoice-tracking system for myself, and never gotten around to publishing an example.
This almost certainly means that they and I were creating basically the same thing at the same time. Who got the idea first? Who cares? It’s a nifty idea no matter who thought it up. Plus it’s a near-certainty that somebody else did it long before three months ago, and never got around to documenting it.
I often wonder how many really cool techniques and ideas are lost simply because the inventors don’t have the time or energy to publish them.
Since my approach varies a bit from AtO’s, I’ve put up a css/edge demonstration for people to poke. The major difference is, I think, my use of empty divs to create the horizontal strata instead of a background image. This let me have strata that were scaled to the figures being output. For example, if the strata are increments of $10,000 and the highest bar is $55,055, then I can write out enough “bar divs” to make the top of the chart $60,000. If the tallest bar only goes to $38,522, then I can stop at $40,000.
This also meant calculating and writing out the bars’ heights as inline styles. What you see in the markup of my demo is the end result of all that back-end calculation. There are doubtless better ways to go about creating the strata and setting the bar heights, most obviously using DOM scripting to write in said bar divs instead of dirtying up the XHTML with them. The same would be true for the inline heights of the bars themselves, which could be dropped in favor of dynamic setting. Heck, you could even make it so the chart could be zoomed in or out.
Someone else can do the necessary scripting if they like; I’m content to get the example out there, however late to the party I may be. The more such examples there are, the better.
Followup: Tables to Bar Graphs, in which the same chart is created out of a table instead of nested lists.
