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,

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 Achievable through a combination of AJAX and advanced javascript techniques o Certain charts provide transition animation upon data refresh Third Party Integration o Can address the need to incorporate new visualization o 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 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 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: Demo Code and Tutorials (including presentation): Don't forget to capture your fiddle URL! Contact Me: -