2012 National BDPA Technology Conference
Creating Rich Data Visualizations using the Google API
Yolanda M. Davis
Senior Software Engineer
AdvancED
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
http://en.wikipedia.org/wiki/Data_visualization#cite_note-MF08-0
*
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
required:
•
Importing the Google JSAPI library and the specific chart
package(s)
•
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
o
o
•
Achievable through a combination of AJAX and advanced
javascript techniques
Certain charts provide transition animation upon data
refresh
Third Party Integration
o
o
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:
https://developers.google.com/chart/interactive/docs/gallery
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
DataTable
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:
http://developers.google.com/chart
Demo Code and Tutorials (including presentation):
https://github.com/YolandaMDavis
Don't forget to capture your fiddle URL!
Contact Me:
Email - ydavis@advanc-ed.org /yolanda.m.davis@gmail.com
Twitter - @YolandaMDavis