Generating charts from accessible data tables and vice versa using the Google Charts APITuesday, January 8th, 2008 at 8:58 pm
Using this script you can take a simple, valid and accessible data table like the following and it gets automatically converted to a pie chart.
<table class="tochart size300x100 color990000" summary="Browsers for this site, March 2007"> <caption>Browsers</caption> <thead> <tr><th scope="col">Browser</th><th scope="col">Percent</th></tr> </thead> <tbody> <tr><td>Firefox</td><td>60</td></tr> <tr><td>MSIE</td><td>25</td></tr> <tr><td>Opera</td><td>10</td></tr> <tr><td>Safari</td><td>5</td></tr> </tbody> </table>
Simply add the script to the end of the body and it’ll convert all tables with a class called “tochart”. You can define the size (widthxheight) and the colour as a hexadecimal triplet as shown in this example. If you leave size and colour out, the script will use presets you can alter as variables in the script itself.
What about data tables from charts?
As Victor of the Yahoo! Accessibility group asked for the other way around, this is now also possible. When you use the verbose data mode for the charts and add the class “totable” to the image the script will generate a data table preceeding the image and null out the alternative text. For example:
<img src="http://chart.apis.google.com/chart?cht=p3&chco=339933&chs=450x150&chd=t:10,58,95,30,63&chl=Apples|Oranges|Pineapples|Bananas|Pears" alt="Fruit Consumption of under 15 year olds, March 2007" class="totable"/>
The tables have a class called “generatedfromchart” which you can use to move them off-left if needed.
Useful? Please comment if you want something extra or wonder how the script works.