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.