2012 National BDPA Technology Conference
Creating Rich Data Visualizations using the Google API
Yolanda M. Davis
Senior Software Engineer
August 2, 2012
Baltimore, MD
What We'll Cover
What is Data Visualization?
The Case for the Google Chart API
Chart Basics
Events, Listeners, and Dashboards
Advanced Topics
Lab Time
Best Practices/Real World Application
What is Data Visualization
"...the science of visual representation of “data”,
defined as information which has been abstracted
in some schematic form, including
attributes or variables for the units of information"
-Friendly, 2008
What is Data Visualization
(Word Cloud Demo)
Visualizing Data in an Unplugged World
Advances in technology has transitioned
visualizations from static to dynamic and interactive
Increase in mobile usage has increased the
expectations for availability
The standards for the user's experience have been
raised for cross platform/cross-browser compatibility
Commercial and open source visualization tools
offers many benefits but also carries risk
Data Visualization "Democratized" (i.e. FREE)
Google Chart API
• Mission is to "make the world's structured data universally accessible
& useful by providing enticing visualizations" (Google I/O 2010)
• Leverages cross-browser/cross-platform compatible standards of
HTML5 and javascript
• Javascript libraries are stored and managed on Google API servers
• Chart components and interfaces are customizable and extensible
• Dedicated support team and product manager
• "Takes their own medicine"
Chart API Basics
To create any chart with the api, three main steps are
Importing the Google JSAPI library and the specific chart
Populating the underlying chart model (DataTable)
Displaying the Chart object
(Demo Example 1)
Bringing Life to Charts:
Events and Listeners
Used to execute additional functionality between
charts and other components or services
Available events include select, ready, and error
(Demo Example 2)
Bringing Life to Charts:
Controls and Dashboards
Used to reduce the amount of code generated when
creating event driven charts
Controls filter charts based on user input
Dashboards manage communication between
multiple charts and controls using a single
DataTable as a source
(Demo Example 3)
Advanced Topics:
Real Time Displays & Third Party Integration
Real Time Displays
Achievable through a combination of AJAX and advanced
javascript techniques
Certain charts provide transition animation upon data
Third Party Integration
Can address the need to incorporate new visualization
Implemented through use of interfaces for charts, event
triggers, listeners
(Demo Example 4/5)
Lab Work
Will allow you to get started creating visualizations
with the Google API
Knowledge of basic HTML and Javascript
development would be nice to have :)
Accessible using JSFiddle (great site for distributing
and sharing code snippets)
Lab Work
Your client, DataSet Corp, has asked for an interactive web based chart
showing the change in revenue from 2005 until now. They would also like
the overall average revenue to be reflected in the chart.
Be sure to add a title, label axes, and reflect the red and black
color scheme used by DSC.
Use JSFiddle to create your chart:
1. Go to the fiddle url - http://jsfiddle.net/user/YolandaMDavis/fiddles/
2. Select the Google Chart Tutorial fiddle link
3. Select the 'Fork' button at the top of the fiddle to create your separate fiddle
Use Google Chart Tools Reference for help:
Best Practices in the Real World
Evaluate challenges behind using Google's API:
Not as visually impressive as proprietary applications
Lack of variety in available charts
Lack of versioning in production environment
Unable to easily download an image of the visualization
Many issues can be mitigated or avoided through
understanding of the requirements, a comfort-level of
the capabilities of the in house development team and
appropriate planning
Best Practices in the Real World
The Importance of MVC:
Easy to break the rules of MVC through service side
DataTable coupling (bad idea)
Separate the "concerns" by serving JSON data
which model business or value objects vs. the
Allows easy reuse between views
Simple to unravel if a need to switch API arises
Best Practices in the Real World
(Real World Application Demo)
Questions and References
Google Chart API Documentation:
Demo Code and Tutorials (including presentation):
Don't forget to capture your fiddle URL!
Contact Me:
Email - [email protected] /[email protected]
Twitter - @YolandaMDavis