Generating charts from accessible data tables using the Google Charts API

I was recently looking for an accessible way to generate chart data when I came across Chris Heilmann example for Generating charts from accessible data tables and vice versa using the Google Charts API. One of the limitations of Chris’s solution was it only generated pie charts. Having some time to kill over the weekend I’ve made some additions to Chris’s original script. The biggest change has been the inclusion of line charts.

The changes are probably best illustrated by this demo page. On this page I’ve copied Chris’s original pie charts and included the new charts generated by the script. Most of the changes reflect suggestions from the comments on Chris’s blog (i.e. alt tag [Ben  Millard], fixed 3 digit limit [Robin Winslow]).

The big addition has been the inclusion of support for line charts. This uses the same principle of reading data from a table but unlike the original script which only read the first two columns the new script now reads in the entire table. Table headings are read as the data legends and the y-axis automatically scales to fit the entire data range (so far I’ve only got it working for absolute numbers).

One feature I’ve removed from Chris’s original script is the function to create a table from a chart.

You can download the script with the demo page and have a play around yourself. If anyone else is interested in developing this further leave a comment.

[I should also point out that I'm a 'hack' programmer so if anyone would like to tidy up my revised code please feel free].

4 Responses to “Generating charts from accessible data tables using the Google Charts API”

  • Great ‘hack’ you have there!
    this is gonna make my life a lot easier, only missing the bars chart, so bad i am not senior in javascript to complete it.


  • While the code was developed for pie and line graphs you can play around with different chart types called in the table class. Codes for different types are available from the Google Chart API

    For example for a horizontal grouped bar chart you would have something like:

    table class="tochart typebhg size460x300" ...

    For a vertical grouped bar it would be:

    table class="tochart typebvg size460x300" ...

    My modified code isn’t designed for different types but could be easily modified if anyone wants to take-up the challenge …

  • But, did you notice, if i put any table before ( a clean one) the script doesn’t works

  • This is a fantastic idea; though my WMBC test implementation suggests it needs some tweaking, which is sadly beyond my skills.

    * It doesn’t like links in captions
    * The values on axes need to be rounded
    * It would be good to be able to set a value other than zero, on either axis, for the start point.
    * I want to show both the table, and the chart - in that order. How may I do that?
    * The caption should wrap.

Leave a Reply


This blog is authored by Martin Hawksey e-Learning Advisor (Higher Education) at the JISC RSC Scotland N&E.

JISC RSC Scotland North & East logo

If you would like to subscribe to my monthly digest please enter your email address in the box below (other ways are available to subscribe from the button below):

Subscribe to MASHe to monthly email updates


The MASHezine (tabloid)

It's back! A tabloid edition of the latest posts in PDF format (complete with QR Codes). Click here to view the MASHezine

Preview powered by: Webthumb

The MASHezine (eBook)

MASHe is also available in ebook and can be downloaded in the following formats:

Visit to manage your subscription


Opinions expressed in this blog are not necessarily those of the JISC RSC Scotland North & East.

JISC Advance Logo

JISC Advance is a new organisation that brings together the collective expertise of established JISC services:

For further information visit

Creative Commons Licence
Unless otherwise stated this work is licensed under a Creative Commons Attribution-ShareAlike 2.5 UK: Scotland License