“Flot”:http://code.google.com/p/flot/ – a “jQuery”:http://jquery.com plugin is a fantastically simple and beautiful option for rendering line graphs. The “examples”:http://people.iola.dk/olau/flot/examples provided give a good idea of how rich and powerful it can be too.
Copy & paste the code below to embed this comment.
Eric Meyer
Nicely done, but unfortunately it doesn’t meet the requirements set forth in the article—namely, having the whole “row” (or “data atom” or whatever) be clickable. You got close, but without either a good deal of JavaScript or a full working implementation of XHTML 2, I don’t think it’s possible to do with valid table markup.
It’s a shame we’re still having to make these kinds of compromises, but there it is.
This is nicely done. There are some other examples on the web of accessible diagrams and visual aids:
Eric Meyer’s Bar Graph: http://meyerweb.com/eric/css/edge/bargraph/demo-table.html
@ Blaise Kal
And my Venn Diagram (which could be used for a pie chart as well) that I posted back in Sept. of 2007:
http://www.heyokadesign.com/news.asp?post=more-accessible-venn-diagram
Something to think about, however, is that in certain situations the use of the ‘dreaded table’ can have more meaning.
Despite the issue of whether data belongs in a table or not I think this is a great example especially for developers. I deal with very large data sets and markup of this nature gives clients exactly what they want rather than a giant table to endlessly scroll through.
Copy & paste the code below to embed this comment.
Max Rock
If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure. My new venture http://www.shadoz.com/css-template-07.htm
It’s updated daily with web log- statistics about visits to my eponymous site. The use of the term “log” is a pun, because the scale is log-arithmic, and it is about a “log”.
Barcharts and sparklines are selected from a two-dimensional index grid, by time and by rank of number of hits, to what page or image – and from what IP address. What comes out is a classic Wiebel distribution with a long tail. Hover over any barchart and get a tooltip with all the juicy data. I find it all very interesting – and enjoyable.
Thanks for the excellent writing, great article, and it really helped. I just decided to make all links hover differently and changing one line of CSS, the entire site behaves better, including the barcharts and sparklines in the weblog page.
Keep up the good work, let’s have more – a whole-enchilada CSS-driven minimalist data-graphing tool. Or did you already and I missed it?
Have you seen http://interface.fh-potsdam.de/infodesignpatterns/patterns.php ?
31 Reader Comments
Back to the ArticlePaul Springett
“Flot”:http://code.google.com/p/flot/ – a “jQuery”:http://jquery.com plugin is a fantastically simple and beautiful option for rendering line graphs. The “examples”:http://people.iola.dk/olau/flot/examples provided give a good idea of how rich and powerful it can be too.
Eric Meyer
Nicely done, but unfortunately it doesn’t meet the requirements set forth in the article—namely, having the whole “row” (or “data atom” or whatever) be clickable. You got close, but without either a good deal of JavaScript or a full working implementation of XHTML 2, I don’t think it’s possible to do with valid table markup.
It’s a shame we’re still having to make these kinds of compromises, but there it is.
Mark Caron
This is nicely done. There are some other examples on the web of accessible diagrams and visual aids:
Eric Meyer’s Bar Graph: http://meyerweb.com/eric/css/edge/bargraph/demo-table.html
@ Blaise Kal
And my Venn Diagram (which could be used for a pie chart as well) that I posted back in Sept. of 2007:
http://www.heyokadesign.com/news.asp?post=more-accessible-venn-diagram
Something to think about, however, is that in certain situations the use of the ‘dreaded table’ can have more meaning.
Joe Maddalone
Despite the issue of whether data belongs in a table or not I think this is a great example especially for developers. I deal with very large data sets and markup of this nature gives clients exactly what they want rather than a giant table to endlessly scroll through.
bloggers mosiac
that was gr8 info ,thanks
Sean Goff
I wonder if they can get that programed into my new self-destructing IM service from Bigstring. Then all my needs will be met.
Max Rock
If we just want to display the data, we can get the most semantic richness and accessibility hooks with a table. But when what we’re really building is navigation, tables are an awkward and often clumsy tool for the job. What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure. My new venture http://www.shadoz.com/css-template-07.htm
Timothy Long
Beautifully displayed.
Chris McKee
Nice idea and so simple to implement in php.
John Kelling
you can see it in PHP here:
http://www.chausstran.com/immobilien/stats.php?id=2
jim lemon
please see
http://www.jjlg.com/weblog/
It’s updated daily with web log- statistics about visits to my eponymous site. The use of the term “log” is a pun, because the scale is log-arithmic, and it is about a “log”.
Barcharts and sparklines are selected from a two-dimensional index grid, by time and by rank of number of hits, to what page or image – and from what IP address. What comes out is a classic Wiebel distribution with a long tail. Hover over any barchart and get a tooltip with all the juicy data. I find it all very interesting – and enjoyable.
Thanks for the excellent writing, great article, and it really helped. I just decided to make all links hover differently and changing one line of CSS, the entire site behaves better, including the barcharts and sparklines in the weblog page.
Keep up the good work, let’s have more – a whole-enchilada CSS-driven minimalist data-graphing tool. Or did you already and I missed it?
Have you seen http://interface.fh-potsdam.de/infodesignpatterns/patterns.php ?