May 19, 2010 - Comments Off on Google Charts Toolkit: Google’s new unified approach for creating dynamic charts on the web

Google Charts Toolkit: Google’s new unified approach for creating dynamic charts on the web

Michael Fink
Amit Weinstein

http://code.google.com/apis/charttools/

First demo: http://www.xefer.com/twitter/

Google Chart Tools

Mission: Make the world's structured data universally accessible & useful by providing enticing visualizations.

1. Image charts: server side rendering
2. Interactive charts: Client side interactivity
3. Under the hood
4. Combining server side rendering with client side interactivity

Image charts

The Google Chart API. The URL contains the parameters of the chart you wish to receive.

Launched a chart editor yesterday:
http://imagecharteditor.appspot.com

Started out with charts, but realized there's a lot of rendering needs they could meet in the same way.
* Math
* QR codes
* Dynamic icons
* Flags

Interactive charts

Hundreds or thousands of hours spent developing charts in-house for Google needs. Decided to give back to community.

The interactive chart gallery is really a community effort.

* New look and feel for interactive charts (launched yesterday)
** Color palette
** Layout (negative vs positive space)
* New chart combinations to be released in the next few weeks

Demo site: BackPaki

Wiki page for backpackers.

http://code.google.com/apis/ajax/playground/

Nice integration of interactive chart with the Google Maps API.

[Review the code snippet]
goog.bind(function(e) {
this.stack.push(e.region);
});

Google Charts defines data table. Can use a query to bind the visualization to a Google spreadsheet.

The remote data sources provided by Google can be a Google spreadsheet, Java library or Python Code Security Checker. Users can use a PHP or Ruby on Rails.

Using the Google API, can convert your data to XML and then use the WP_Cumulus plugin (Flash-based).

Comparison:

Image charts
* Static image
* URL access
* <1s

Interactive charts
* Interactive experience
* Data remains on client
* Basic JavaScript
* Data manipulation functions

In past year, wanted to combine the two efforts: server-side rendering with client-side interactivity.

Interactive GraphViz

When making request to server, receiving two things: a static image as well as the layout. That static image makes use of server-side rendering and caching, while the layout permits client-side interactivity.

Google Chart Tools

1. Rich gallery
2. Free of charge
3. Highly customizable
4. Interactive playground
5. Active developer group
6. Live data from many sources
7. Easy to adopt and simple to use
8. Detailed documentation and examples

Published by: jeffreybarke in The Programming Mechanism

Comments are closed.