Bar Graphs With Style
Published 19 years, 1 day 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.
Comments (30)
I used to make horizontal bar graphs using cells inside tables. I filled the cell with a background color to get the bar. I used them to illustrate satellite launch schedules, for one. I used Cold Fusion, which got the data from the database, computed the cell widths needed, and wrote the html into my template. This was before I really got into using CSS, probably around 2000 or 2001.
I labeled each bar with a hyperlink that took you to a page with more details about the particular item the bar represented. This turned out to be really convenient.
Pingback ::
kbglob - tecnologia para geeks, no para tu mamá » Graficos de barra con CSS
[…]
Posteado por B December 20th 2005 en CSS
Erik Meyer de mozilla tiene un ejemplo muy bueno para hacer graficos de barra con CSS.
[…]
Nice.
I like the fact that it is vertical.
Here is one that I have been using for a few months from standards-schmandards.com which is based on tabular data (and uses tables). It works very nicely as well, but is not vertical:
http://www.standards-schmandards.com/index.php?2005/02/06/14-accessible-bar-chart
You can see another example of how it is used here:
http://www.globalissues.org/Geopolitics/ArmsTrade/BigBusiness.asp
Last month I also made a vertical bar graph using CSS, though mine was much more bloated and not very reusable.
You’re absolutely right, Eric. When I saw the artictle at AtO I thought that’s great to show the possibilities, however the technique might be pretty obvious for someone. I came up with some kind of charts for stats some years ago, in the pioneering times :) And I assume I was not alone.
I have a question about your example, Eric. Do you think its semantics is OK? Indeed it’s a great showcase of CSS flexibility, but I’m not sure whether it’s a good real-life example for presenting charts per se. (I know I’m a bad guy — I’d go with SVG/PNG/Flash combo generated from one source…) Or wouldn’t it be interesting to have this data in a regular table and generate the chart via DOM?
BTW don’t you have a typo on the example page — “invoive”?
Jan:
I think the semantics are indeed okay. Not great, not horrible, but okay. I think it falls back in non-CSS environments fairly well, although the “tick”
divs could cause a bit of confusion. There are other possibilities, of course, and as I say in the post, dynamic construction of the chart is certainly a possibility. Possibly even a strong one. The point I’d make is that the chart doesn’t require list markup to succeed. It just needs elements that form a very similar or identical document subtree.I did. It’s fixed now, along with a few other typos. Thanks!
I’m curious to explore the possibility of basing more dimensions on percentages of the outer container. It seems to seriously erode the reusability when the #q-graph width and height are burned right into the stylesheet. On the other hand, in lots of situations, all the graphs on a site will be the same size as each other, so perhaps that’s perfectly legit… anyhow, a very classy graph, thanks.
Hm. I’ve been doing this for years… Maybe I should start blogging a bit more. ;-)
[6] Yes, I fully understand it, I just felt that this data is a case for a classical table and that’s the reason I felt providing them in a list isn’t much semantic — thus the question. (However I feel it would be possible achieve this construction even from a table, “deconstructing” table cells and rows to block ones, providing the same overall effect. I’ll try to find it out.) The next part i don’t like is “redundantly” providing the bar sizes and the ticks so I just suggested using a behavioral layer for reconstructing them from the main data. But it’s not a case for CSS. So only nitpicking, sorry for it.
I recently came to the conclusion that geeks commonly assume ideas have been done before. I was astonished to see an article about code commenting turn up… but after thinking about it, I realised I’d just been thinking some things were too obvious to post. Clearly not the case, so I published my own commenting system. What the hell! :)
It all helps and in an industry like ours there are usually at least fifteen “right answers”…
Pingback ::
Visualising graphs with CSS - If..Else Log
[…]
Go to comments
Tags: css
Eric Meyer writes a post about using XHTML and CSS to visualise graphs which follows on from Apples and Orang […]
Trackback ::
schestowitz.com
Eric’s Barchart CSS
The power of CSS illustrated
Eric I saw this post yesterday and is made me think of a possible solution to an issue I have with some SVG grpahs we use internally. Basically some of the regional managers machines won’t display them, so I’ve got to fix it. This seemed like a great idea but I wanted to do stuff with line graphs. That got me thinking about an article I’d read on using borders to draw triangles… To cut a long story short I ended up with this initial experiment. There’s a lot still to do, like strip all the markup and javascript out of the page and things but as an initial proof of concept I was kinda happy and as I got the idea from you thought you might like to see it.
It just so happens that I published this Evolutionary Timeline yesterday, although I”ve been working on it for several months. I couldn”t get the right side to display well in IE-Win, so I added the “Today” graphic.
I could have used a UL to create the chart, but I used headings instead. It seems to me that they are headings.
My chart has no semantic value at all, but I don”t believe it would have any if I had included some huge numbers. The whole reason for the chart is to provide presentational value.
And there is the brute force approach:
http://wb9whi.shacknet.nu/temperature.php
Jan:
Ah, I understand now. Coincidentally, I was working on a table-to-graph version of the demo. It works fine in Safari, but not so well in Firefox. I don’t know if this is due to my overlooking something, to differences in interpretation by the two browsers, or just by a plain simple bug. I’ve put what I have so far in the same directory as the others, in the file demo-table.html. Maybe someone can figure out why Firefox is doing what it’s doing.
(And the “ticks” are still driven by statically created
divs. This is still less than ideal, but I didn’t want to take the time to write the needed JS to create them dynamically.)[16] That rocks, Eric. And I see the weird positioning (misaligning between the table and tr elements, impossible to redefine) in Gecko. I’ll keep it in mind and will try to inform you if I found out something.
Jan: I figured out a way to fix it in Firefox. In my original version of the demo, I didn’t declare a
displayvalue for thetableelement, and only relatively positioned it. This let it retain the HTML/XHTML default value oftable. I threw in an explicitdisplay: block, and everything snapped into place. Now, I don’t know why there should be so large a different between the twodisplayvalues, but there is.It’s still borked in IE/Win, but I at least have guesses as to why. See the followup post for details.
[18] Jeeez, I overlooked it :) It’s clear then.
The explanation of the weird former formating may be connected to the fact there’s (IIRC) an undefined behavior of block-displayed element as a direct ancestor of table-displayed element and the lack of error handling in CSS, thus the eee… let’s say random… behavior.
I also suggested a fix for IE in the comments.
This is brill. Hooray for CSS. It’s now crying out for a new Web 2.0 stats app to put it to gratuitous use! :P
On the subject of ‘original ideas’, check out JAFS – CSS trickery, utterly useless, and doubtless pre-empted by another person, elsewhere in the web, by a good few years! :)
Shame you can’t use the data itself to generate the height automagically. That would require PHP (unless CSS3 has built-in calculations…?). :p
Seem like a massive hack to me just to get something so simple working in your “semantics”.
Hi,
I did this some time ago:
http://www.mundoplus.tv/atnbueno/webbits/bargraphs/
It’s simple but it’s what I was aiming to. Thanks to the good people at css-d it’s one of the most browser-agnostic things I’ve done with CSS :)
It used to be listed as a trick at the css-d wiki (css-discuss.incutio.com) but I’ve just noticed the wiki is down :?
If you like this, you might enjoy, NAIM: Not An Image Map
I have been playing with horizontal bar charts using definition lists and put up this demo several months ago for what it is worth.
http://www.cssplay.co.uk/menu/barchart.html
Pingback ::
cssing ::
[…]
Pingback ::
cssing ::
[…]
Pingback ::
網絡暴民 Jacky’s Blog » 20051221網摘 - 日動漫BT
[…]
Pingback ::
Gillico Blog » Blog Archive » CSS Styled Bar Graphs
[…] L
Sliding Doors »
CSS Styled Bar Graphs
Nifty stuff. Link.
This entry was posted
on […]
Pingback ::
John F Croston III » Blog Archive » Finally My Notes from An Event Apart Chicago 2007
[…] that you could use tables and CSS to create pages that end up displaying graphs. I had seen his earlier article about this and had worked on creating forms to allow you to enter the amounts and then put out the […]