Generating charts from accessible data tables and vice versa using the Google Charts API
Google have lately been praised for their chart API and my esteemed colleague Ed Eliot has a workaround for its restrictions in terms of caching and server hits.
I played around a bit with it and thought it very cool but it felt a bit clunky to add all these values to a URL when they could be in the document for those who cannot see pie charts. This is why I wrote a small script that converts data tables to charts using the API and a wee bit of JavaScript.
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.
Check out the demo page and download the script with the demo page and CSS to have a go with it yourself. Of course, all is licensed creative commons, so go nuts.
Useful? Please comment if you want something extra or wonder how the script works.
Tags: accessibility, api, charts, Google, javascript, tables
January 8th, 2008 at 10:36 pm
Cool. It occurred to me to write something like this and then I couldn’t be arsed, so good work fella; this needed writing :-)
January 9th, 2008 at 1:24 am
Very nice. I would think it would still be useful showing the raw data, however, as people may still not be able to see the image (they might be disabled for various reasons), or the image might be difficult for the person to understand due to visual impairments, perhaps.
A tabbed interface, whereby the first tab contains the generated image, and the second tab contains the raw data could be a useful way to show this, perhaps? (If I ever find the time, will try to do it myself and let you know!)
January 9th, 2008 at 8:15 am
@anup, if you don’t define a .hidden class then you’ll see both. :-)
January 9th, 2008 at 1:54 pm
Thanks Chris. Missed that :)
January 9th, 2008 at 2:24 pm
Awesome. Thanks!
January 9th, 2008 at 4:14 pm
tut tut, Stuart – “I couldn’t be arsed” is so December ;-)
But seriously, this is cool as.. Thanks Chris, I can see this being used come election time :)
January 9th, 2008 at 5:01 pm
Would it be possible to do this with the Yahoo Flash charts, i.e. use a data table as the source?
January 9th, 2008 at 6:24 pm
Good job Chris.
We need more quality examples of accessibility improvements that are so simple to implement, that even a monkey could do it. This is certainly a good step in the right direction.
Keep up the good work!
January 10th, 2008 at 12:31 am
This is great Chris, thanks for this as well as the clear explanation to go with it. There are so many examples of complex charts that need data table alternatives for screen reader users and data tables that need visual alternatives to make them readable. I’ll be interested to see people implement it.
January 10th, 2008 at 5:43 pm
This is an excellent idea. Does anyone know if this is what they’re doing at http://lovegraph.thefootnotes.net ? I know they’re using javascript, and the Google Charts API, but I can’t figure out how it renders the graphs. Apparently, it’s some sort of proprietary algorithm. Anyway, it’s cool. Keep up the excellent blogging, by the way.
January 10th, 2008 at 8:06 pm
Great! Adapted it to use it in this blog
January 15th, 2008 at 12:54 am
Well done. Yours is an excellent idea and, if I may say so, similar to one of mine. I’m the developer of MathTran http://www.mathtran.org, which provides TeX to image translation as an online service. Colleagues have encouraged me to address accessibility issues. I’ve dealt with that by have the web page say ‘ALT=tex:x^2′, so the ALT text comes first, and from that I use Javascript to fill in the IMG attribute. This is so similar to what you are doing.
Something else I do is embed the TeX source in the image, so even if only the image is available (say it has been copied into an email or a web page), the data required for accessibility is still there.
I discuss this further in my blog entry http://jonathanfine.wordpress.com/2008/01/14/google-charts-mathtran-and-editable-png-files/
January 16th, 2008 at 12:50 am
The data table-to-pie-chart direction looks useful. The chart-to-pie-table direction seems less so:
1. Create a suitable source table.
Apply the Google Chart API on this table, to create a pie chart.
The script analyses the URI for the pie chart.
The script creates a new table in the document.
Authors could add the source table to the markup instead of the script creating it? This would avoid analysing the URI and creating a new table on every page load, AFAICT.
Interesting to provide a
classattribute specifically for the “off-left” technique. Since the charts don’t provide values, keeping the table visible seems helpful. The colours are quite faint, so providing the table would help users who can see the screen but not that well?The
altattributes for the charts are blank on the demo page. As the data is so simple, the alt text could carry a linearised version of the data as a paragraph by using punctuation.An example
altvalue:Perhaps more useful would be to list the percentages from highest to lowest, rounded to the nearest whole number? The most important information would then comes first, with the values being concise.
A better example
altvalue:This way, blind users (or users with images disabled) wouldn’t need to read every piece of data, store it in their memory, then perform mental arithmetic to compare apples with oranges. :-)
This way authors aren’t required to provide the table in order to make the data accessible. Accessibility, such as these examples provide, should be native to Google’s Chart API, imho.
January 17th, 2008 at 6:13 pm
@alastairc aye, check out the YUI blog today: http://yuiblog.com/blog/2008/01/17/tables-and-charts/
January 21st, 2008 at 11:10 am
I’ve pondered a few days before commenting, but I have the impression that this kind of script is the last point that was needed to make the longdesc attribute definitely history.
I don’t mean you’ve nailed the coffin yourself, but I get the idea that some people will go “Oh, we don’t need longdesc, now that there are simple and elegant solutions like Chris’s”.
Shouldn’t we somewhere be clear about the very specific usage of your scripts? I fear the pseudo-magic effect at work here. What do you think?
March 7th, 2008 at 10:58 am
Hi
I was just have a quick look at the UN data browser (e.g. http://data.un.org/Data.aspx?q=london&d=CDB&f=srID:6850 ) and it stuck me that you script could be used as part of a bookmarklet powered app that could:
1) pop-up a list of tables in a page;
2) allow you to select (and maybe preview the first 2-3 rows) of each column in a given table
3) use the selected columns to provide the chart data
tony
March 26th, 2008 at 10:21 am
This API is great,
Google APIs are amazing,
I had implement a UI editor for Google Charts, you can access it at
http://chartgen.blogspot.com
April 1st, 2008 at 10:56 am
There seems to be a problem with the Google Chart API whereby it can only handle up to three digit numbers. If it has more than 3 digits it just ignores the last digit.
Try it with 10 and 1000:
http://chart.apis.google.com/chart?cht=p3&chs=450×150&chd=t:10,1000
You will find it looks exactly the same as 10 and 100:
http://chart.apis.google.com/chart?cht=p3&chs=450×150&chd=t:13,100
And is therefore wrong.
So, if I get around to it I will put something in the JS to check if any of the pieces of data in a chart exceed 3 digits, and if they do, reduce all data by the required number of digits to bring all data within 3 digits, so that everything remains proportionally correct (10 and 1000 would translate to 1 and 100 rather than 10 and 100 as Google would do automatically).
If I do this I’ll post the next script here.
Robin.
June 23rd, 2008 at 8:44 pm
Great stuff. I couldn’t help myself and I’ve done some additions to the script including generating line graphs from tables (also fixed the 3 digit problem, added chart title and legend values). The update is available here http://www.rsc-ne-scotland.org.uk/mashe/2008/06/generating-charts-from-accessible-data-tables-using-the-google-charts-api/
June 25th, 2008 at 8:25 am
Hey Chris, you are great with your stuff. no doubt but i can show you an awesome charting component offered under open source powered by silverlight 2 beta 2 for free just follow the link visifire and you can make more of it.
July 6th, 2008 at 11:08 am
To Robin Winslow:
I guess you are after same thing I puzzled with these online chart creators, namely values which are bigger than 100. As I understand by default the values are assumed to be percentages (see http://code.google.com/apis/chart/#chart_data )
But google offers extra parameter to overcome this: Text encoding with data scaling: http://code.google.com/apis/chart/#data_scaling , so just by adding
&chds=0,1000
in your case you would get the chart scaled relatively to their values. Hope it helps