Tables to Bar Graphs

Published 18 years, 12 months past

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!

Comments (22)

  1. You can fix IE with following:

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

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

  3. 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. 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. Nicely done! I’m going to have fun playing with this one. Thanks Eric.

  6. 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. 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. 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. Steve: it shall be so. Excellent idea.

  10. 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. 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. 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. 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. 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 ::

    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. Great stuff! I already designed some dynamic bar graphs with php…

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

  18. 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. 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 ::

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

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

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview