meyerweb.com

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

Tables to Bar Graphs

In “Bar Graphs With Style“, I took a set of nested lists and some divs and turned them into a vertical bar graph using CSS.  Jan Brašna pointed out that the actual information I was presenting would probably be better represented as a table instead of nested lists.  I don’t think there’s anything wrong with using the lists, but I do agree with him that a table might be a better base represention of the data.  Maybe you agree.  If so, then here you go: CSS Vertical Bar Graphs using a table as the markup basis.

The demo works fine in Safari, and in Firefox I got it to work by explicitly setting the table element to display: block (when I left it as display: table, the bars were badly misplaced).  In IE/Win, everything’s fine except for the actual placement of the bars; they’re fine as a group but way out of place.  I think the IE/Win problem is a simple refusal to give a table element dimensions when all of its descendants have been positioned, no matter what display value it’s given.  Perhaps some intrepid soul can figure out a way to defeat this. [Update: some intrepid soul did, and the demo has been updated; it now works in IE/Win as well as most other browsers.]

(I considered the idea of positioning all the bars with top instead of bottom, thus sidestepping the table-sizing problem, but that would mean a different way to place the ‘ticks’ and in the end it was different enough from what I’d done that I just couldn’t be bothered.  Feel free to run with the idea, though, or come up with a better one.)

I must admit that when I first assembled this table-based chart demo, it was with some trepidation.  From a CSS point of view, of course, it doesn’t matter what elements you position, nor how: a td is no different than a div or any other element.  Historical browser behavior, though, has been to put table markup into its own special category and treat it as being extra-special—as witness IE/Win’s handling of the original demo.  I was honestly afraid that, in overriding the display values for table elements (by positioning them), I’d crash a browser.  So far, no crashes, but proceed at your own risk!

22 Responses»

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

    You can fix IE with following:

    * html #q-graph {top: 300px; background-image: none;}
    * html #ticks {top: 2px;}

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

    (It’s far from perfect for sure, but it’s IMHO at least nicely degrading in IE.)

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

    Damn. I forgot the legends.

    * html #q-graph {top: 300px; background-image: none;}
    * html #q-graph th {top: -140px;}
    * html #ticks {top: 2px; margin-bottom: 0;}

    I also added margin-bottom: -300px to #ticks to “fix” the space generated by themselves.

    Now it looks pretty OK in Gecko (FF 1.0.7, FF 1.5, Camino 1.01b), Safari (2.0.2), Opera (8.0, 9.0 PR).

    Dou you think it’s reasonable to move the ticks to a generated content in CSS for the reason it belongs to the presentation of the table data?

    • #4
    • Comment
    • Thu 22 Dec 2005
    • 0547
    Steve Pugh wrote in to say...

    Looks good in Opera.

    One suggestion would be to turn the thead elements (the ‘Invoiced’ and ‘Collected’ headers) into some sort of key rather than just hitting them with a display: none. At the moment there’s nothing to say what the brown and green bars actually represent and whilst that can be done in copy, using the content already present in the table seems somehow appropriate.

    • #5
    • Comment
    • Thu 22 Dec 2005
    • 0622
    Jeff wrote in to say...

    Nicely done! I’m going to have fun playing with this one. Thanks Eric.

    • #6
    • Comment
    • Thu 22 Dec 2005
    • 1151
    Michiel Nijs wrote in to say...

    Actually you’ve got the clue right there: the IE/Win problem is a simple refusal to give a table element dimensions when all of its descendants have been positioned.

    Just give the table a (non-positioned) caption – which is always a good thing to do – and IE behaves as it should.

    • #7
    • Comment
    • Thu 22 Dec 2005
    • 1207
    Michiel Nijs wrote in to say...

    I should have known IE wouldn’t be that easy. The fix I mentioned above does display the graph nicely, but it leaves you with a large amount of whitespace beneath it.

    • #8
    • Comment
    • Thu 22 Dec 2005
    • 1520
    Eric Meyer wrote in to say...

    Michiel: genius! And the big whitespace isn’t IE/Win’s fault; it’s an artifact of how I was setting up the ticks. Combined with Jan’s earlier negative margin-bottom trick, it should all come together quite nicely. Look for an updated demo soon.

    • #9
    • Comment
    • Thu 22 Dec 2005
    • 1626
    Eric Meyer wrote in to say...

    Steve: it shall be so. Excellent idea.

    • #10
    • Comment
    • Fri 23 Dec 2005
    • 0511
    Mikael Jervelind wrote in to say...

    Nice, but wouldn’t it be a better approach using percentage values for the size of the bars. Then you could easily change the size of the graph not only from the server side but also in the browser. Printing problably will be easier too.

    • #11
    • Comment
    • Sat 24 Dec 2005
    • 1153
    draco wrote in to say...

    The link to the comment id with regards to the “intrepid soul” update isn’t working from the main meyerweb.com.

    Perhaps you should do an absolute path link instead.

    • #12
    • Comment
    • Sun 25 Dec 2005
    • 1910
    patrick h. lauke wrote in to say...

    back in september 04 i did a little experiment with styled tables as bar charts. it was a fairly naive approach, and breaks quite spectacularly in IE…but that’s due to my approach at the time. i could think of a few ways to make it work even in that stubborn beast now, and may well resurrect this little experiment in the next few days to make it a bit more workable.

    • #13
    • Comment
    • Mon 26 Dec 2005
    • 1128
    PurplePenny wrote in to say...

    Following on from Mikael’s comment, calculating the height doesn’t have to be difficult. Just treat a px as a square on graph paper: so in this example use 1px = $100; then you don’t need either a calculator or a server-side process for the maths.

    (P.S. I know that I’m ignoring the fact that the point of the exercise is doing something spiffy with CSS but we *expect* that from you because you are the CSS spiffmeister.)

    • #14
    • Comment
    • Wed 28 Dec 2005
    • 0932
    Mikael Jervelind wrote in to say...

    My point wasn’t that it is difficult to calculate the values but rather simplify/enable the scaling of the graph in the browser (like Ctrl-+/- in Firefox). Furthermore it is easier to understand the values by looking at a value itself, 50% means the bar is halfwidth and you can see that by looking at just that value but if the html/css-code is saying that the bar is 237px you don’t know immediately how big it is, you must first look up the maximum width and compare.
    It you are going to mix data and style information it is nice if the style code is self-explaining the same way we try to make the html markup code. I think percentage values are a lot easier to read and understand at a first glance.

    • #15
    • Pingback
    • Thu 29 Dec 2005
    • 1744
    Received from torresburriel.com» Blog Archive » Lecturas sobre hojas de estilo y est

    […] esources/ozewai2005/ http://webstandardsgroup.org/audio/mp3/other-051209-1.mp3 Tables to Bar Graphs Star HTML and Microsoft IE7 Printing CSS background i […]

    • #16
    • Comment
    • Thu 5 Jan 2006
    • 0851
    Phillip Leftover wrote in to say...

    Great stuff! I already designed some dynamic bar graphs with php…

    • #17
    • Comment
    • Wed 11 Jan 2006
    • 1521
    Tim McCormack wrote in to say...

    Excellent! There’s one small glitch in the legend on FF 1.0.7 on my Ubuntu Linux machine. I took a screenshot.

    • #18
    • Comment
    • Thu 12 Jan 2006
    • 0539
    Paul Solecki wrote in to say...

    Tim, I get the same problem with the legend on FF 1.5 on Win XP.

    But it’s fantastic :) I even have somewhere I could use it!

    • #19
    • Comment
    • Thu 12 Jan 2006
    • 0557
    Robert Wellock wrote in to say...

    Certainly, I say it is more appropriate to use the table format a simple bar-graph than the lists as it they represent tabular numeric data.

    • #20
    • Pingback
    • Thu 12 Jan 2006
    • 1037
    Received from Davide Bocci in Un Passo al Giorno » Potere al web semantico

    […] Johansson pubblica un articolo menzionando le tecniche di Eric Meyer per ottenere degli istogrammi: una basata sulle tabelle […]

    • #21
    • Trackback
    • Wed 22 Feb 2006
    • 2030
    Received from HubLog

    Scalable Bar Charts with Tables and CSS

    Exerimenting with ways of representing data in XHTML, I tried to see if data in tables could be transformed into bar charts using CSS. Eric Meyer did a version of this a couple of months ago, but it uses absolute pixel placement of elements so doesn’t…

    • #22
    • Comment
    • Fri 24 Mar 2006
    • 1336
    rweait wrote in to say...

    I’ve been wrestling with horizontal bar charts, with arbitrary end-points. Have others seen a good way to do this? My efforts are in the link.

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