2012 National BDPA Technology Conference

Creating Rich Data Visualizations using the Google API

Yolanda M. DavisSenior 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, includingattributes 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 Displayso Achievable through a combination of AJAX and advanced

javascript techniqueso Certain charts provide transition animation upon data

refresh

• Third Party Integrationo Can address the need to incorporate new visualizationo 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 link3. 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