Google Chart API Tools

You have probably heard a lot about the Google Chart API. Well, there are a few tools and scripts that are available that can be useful in creating charts using the API.

The first tool is a chart creator made by Dion Almaer (you may know Dion from Ajaxian). The application is a nice little chart creation tool that was created using Ext 2.0 and the Google Chart API. The application is aptly named ChartMaker.

Below is a demo of the application:

You can read all about the application at Dion's personal blog. Also, you can go to the application by clicking here or click here to get the code.

Nice job Dion, as this application is a great use of Ext 2.0 and the Google Chart API.

The second tool that I found was posted over at Wait till I come! and is a script that takes data from a HTML table and converts it into a chart.

Below is an excerpt from the post.

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.

You can view a demo of the above by clicking here and you can download the demo code by clicking here. You can read the full post here.

It is great to see some good development in the Google Chart API arena.

If know of any other cool applications that use libraries like the Google Chart API we would love to hear about them. You can leave them in the comments or if you sign up for a free account on this blog, you can blog about it on Ajaxonomy.com.