[html5] making standards-compliant charts

Benjamin Hawkes-Lewis bhawkeslewis at googlemail.com
Sat Dec 27 05:00:04 PST 2008


On 27/12/08 07:06, Ian Hickson wrote:
 > On Fri, 26 Dec 2008, Matt Bonner wrote:
 >> I am especially interested to hear how HTML experts view efforts to
 >> create bar or line charts in HTML/CSS.
 >
 > Graphs are, well, graphical. HTML would generally be inappropriate. :-)
 > I'd recommend using SVG or PNG for static graphs, with SVG or<canvas> 
  for
 > dynamic graphs, and providing tables for people who can't view the 
graphs.

Examples of transforms from tables:

Flash from tables:

http://yuiblog.com/blog/2008/01/17/tables-and-charts/

Canvas from tables:

http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

http://www.liquidx.net/canvasgraphjs/

SVG or Canvas from tables:

http://www.liquidx.net/plotkit/

It's arguably a good idea (from an accessibility and general usability 
perspective) to explicitly and visibly state any trends shown by the 
graphs too, rather than leaving people to try to guess at them. Guessing 
at trends is harder with an audio or braille table than a graph since 
you don't get a gestalt view of the whole sequence; instead you have to 
remember sequences in your head. Also, some people may simply find the 
supplied visualization harder to process (e.g. due to colorblindness or 
a learning disability).

-- 
Benjamin Hawkes-Lewis



More information about the Help mailing list