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].


Join the conversation

comment 6 comments
  • Marcelo Macedo

    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.

  • admin

    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 …

  • Marcelo Macedo

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

  • Andy Mabbett

    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.

Comments are closed.