Comments on: CSS Stacked Bar Graphs

By: Frederick H. Y.

Frederick H. Y. — Fri, 04 Dec 2009 17:22:30 +0000

it’s okay

By: handy

handy — Tue, 18 Aug 2009 03:24:18 +0000

It’s cool

By: Rene Fournier

Rene Fournier — Thu, 05 Feb 2009 20:41:58 +0000

Can someone help me figure out why my cart doesn’t simply items in IE 6/7, but does in Safari and Firefox? (And how to fix it). Thanks.

…Rene

By: Simon Sigurdhsson

Simon Sigurdhsson — Fri, 02 Jan 2009 10:34:01 +0000

? Really, you should be using strong elements instead, as they have a semantical meaning as opposed to the pure-style purpose of b elements.

However, the idea of creating stacked bar graphs using HTML and CSS is a bit redundant – graphs are much better represented using images, and with correct use of alt attributes screen readers will benefit more than they do from this example.

By: Beejamin

Beejamin — Thu, 01 Jan 2009 14:09:20 +0000

I’d be inclined to use an ordered list for the axis labels – the order of the list items is critical after all.

Not sure about the use of the DL’s – I’d like to see a scheme which uses a table as the underlying structure – it’d no doubt be a pain to get working in older browsers though. It would solve the problem of ‘CSS off’ though.

By: Ross Bruniges

Ross Bruniges — Fri, 19 Dec 2008 08:07:58 +0000

Argh – mark-up removed from comments. Of course I was refering to the use of b tags ;>

By: Ross Bruniges

Ross Bruniges — Fri, 19 Dec 2008 08:06:46 +0000

The element, man I’ve not seen that for ages and considering you spoke about wanting to use semantic mark-up I found that a big surprise!

Also as you mention screen-readers during the article too and wanting to keep content accessible to them you really shouldn’t be using display: none on content. The majority of screen-readers will not read content set to display: none out. Use position: absolute, left: -99999em instead

By: J.B. Nicholson-Owens

J.B. Nicholson-Owens — Thu, 18 Dec 2008 16:08:31 +0000

A relatively small quibble: “dl#csschart” is worse than “#csschart” and no more meaningful.

Firefox’s CSS parser will actually slow down on “dl#csschart” versus “#csschart”.

“#id-name” can only refer to one element in the page, so denoting what kind of element #id-name isn’t necessary and such changes also require updating should you decide to use another kind of element at that ID.

By: Evan

Evan — Mon, 15 Dec 2008 18:00:30 +0000

This is great, thanks!

By: Pepa Baros

Pepa Baros — Mon, 15 Dec 2008 11:07:05 +0000
Hi Steve, it does not matter if somebody turn off his css, or even if he turn off his browser. What matters is your users, if they find your charts usefull. I use this type of graphs for many years on intranet for visualization of production plan, production results, downtime and many others. If you want to see some screenshots and description of intranet applications where bar charts are used, please visit http://swatelier.info site.