meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Bar Graphs With Style

A 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.

31 Responses»

    • #1
    • Comment
    • Tue 20 Dec 2005
    • 1020
    Thomas Passin wrote in to say...

    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.

    • #2
    • Pingback
    • Tue 20 Dec 2005
    • 1033
    Received from 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.

    […]

    • #3
    • Comment
    • Tue 20 Dec 2005
    • 1123
    Anup Shah wrote in to say...

    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

    • #4
    • Comment
    • Tue 20 Dec 2005
    • 1153
    Scott wrote in to say...

    Last month I also made a vertical bar graph using CSS, though mine was much more bloated and not very reusable.

    • #5
    • Comment
    • Tue 20 Dec 2005
    • 1324
    Jan Brašna wrote in to say...

    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”?

    • #6
    • Comment
    • Tue 20 Dec 2005
    • 1352
    Eric Meyer wrote in to say...

    Jan:

    I have a question about your example, Eric. Do you think its semantics is OK?

    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.

    BTW don”t you have a typo on the example page — “invoive”?

    I did. It’s fixed now, along with a few other typos. Thanks!

    • #7
    • Comment
    • Tue 20 Dec 2005
    • 1537
    Mike Purvis wrote in to say...

    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.

    • #8
    • Comment
    • Tue 20 Dec 2005
    • 1611
    Thijs van der Vossen wrote in to say...

    Hm. I’ve been doing this for years… Maybe I should start blogging a bit more. ;-)

    • #9
    • Comment
    • Tue 20 Dec 2005
    • 2009
    Jan Brašna wrote in to say...

    [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.

    • #10
    • Comment
    • Tue 20 Dec 2005
    • 2057
    Ben Buchanan wrote in to say...

    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”…

    • #11
    • Pingback
    • Tue 20 Dec 2005
    • 2312
    Received from 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 […]

    • #12
    • Trackback
    • Wed 21 Dec 2005
    • 0252
    Received from schestowitz.com

    Eric’s Barchart CSS

    The power of CSS illustrated

    • #13
    • Comment
    • Wed 21 Dec 2005
    • 0615
    Simon Proctor wrote in to say...

    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.

    • #14
    • Comment
    • Wed 21 Dec 2005
    • 0913
    Steve Rose wrote in to say...

    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.

    • #15
    • Comment
    • Wed 21 Dec 2005
    • 0924
    Eric Everman wrote in to say...

    And there is the brute force approach:

    http://wb9whi.shacknet.nu/temperature.php

    • #16
    • Comment
    • Wed 21 Dec 2005
    • 1222
    Eric Meyer wrote in to say...

    Jan:

    ..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.)

    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.)

    • #17
    • Comment
    • Wed 21 Dec 2005
    • 1900
    Jan Brašna wrote in to say...

    [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.

    • #18
    • Comment
    • Wed 21 Dec 2005
    • 2019
    Eric Meyer wrote in to say...

    Jan: I figured out a way to fix it in Firefox. In my original version of the demo, I didn’t declare a display value for the table element, and only relatively positioned it. This let it retain the HTML/XHTML default value of table. I threw in an explicit display: block, and everything snapped into place. Now, I don’t know why there should be so large a different between the two display values, 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.

    • #19
    • Comment
    • Thu 22 Dec 2005
    • 0152
    Jan Brašna wrote in to say...

    [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.

    • #20
    • Comment
    • Fri 23 Dec 2005
    • 0927
    Chris Stainthorpe wrote in to say...

    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! :)

    • #21
    • Comment
    • Mon 26 Dec 2005
    • 0914
    Michael C. wrote in to say...

    Shame you can’t use the data itself to generate the height automagically. That would require PHP (unless CSS3 has built-in calculations…?). :p

    • #22
    • Comment
    • Fri 30 Dec 2005
    • 0032
    akip5e wrote in to say...

    Seem like a massive hack to me just to get something so simple working in your “semantics”.

    • #23
    • Comment
    • Tue 3 Jan 2006
    • 0714
    Antonio Bueno wrote in to say...

    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 :?

    • #24
    • Comment
    • Sun 8 Jan 2006
    • 0324
    Drew wrote in to say...

    If you like this, you might enjoy, NAIM: Not An Image Map

    • #25
    • Pingback
    • Fri 20 Jan 2006
    • 1409
    Received from otro blog m

    […] car logos (con una continuaci

    • #26
    • Comment
    • Mon 23 Jan 2006
    • 1103
    Stu Nicholls wrote in to say...

    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

    • #27
    • Pingback
    • Tue 7 Mar 2006
    • 0810
    Received from cssing ::

    […]

    • #28
    • Pingback
    • Tue 7 Mar 2006
    • 0827
    Received from cssing ::

    […]

    • #29
    • Pingback
    • Sun 12 Mar 2006
    • 1001
    • #30
    • Pingback
    • Sun 14 May 2006
    • 0509
    Received from Gillico Blog » Blog Archive » CSS Styled Bar Graphs

    […] L
    Sliding Doors »

    CSS Styled Bar Graphs

    Nifty stuff. Link.

    This entry was posted

    on […]

    • #31
    • Pingback
    • Sat 24 Nov 2007
    • 1406
    Received from 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 […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


December 2005
SMTWTFS
November January
 123
45678910
11121314151617
18192021222324
25262728293031

Sidestep

Feeds

Extras