Google Visualization Mapper Dr. Mike Mitri James Madison University

Data –to- Visualization Mappings Data-to-Visualization Mapping Algorithms Data Source Visualization Object User-generated SQL queries SQL Query results

Google Data Visualizations JavaScript library of objects and functions for various types of interactive charts, images, and animations Google’s visualization API website: http://code.google.com/apis/chart/interactive/docs/index.html

Some Google Visualizations Gauge TreeMap Motion Chart Dygraph (time series) All of these are interactive and can respond to user events.

Mapping Recursive Query to Google Data Visualization Org Chart Query should be a “recursive query” (e.g. based on a unary relationship of employees and their managers) Result set has two required fields (and one optional field) The dependent entity (e.g. the employee) The parent entity (e.g. the manager) Any extra information to display Result set is used to generate HTML and JavaScript Javascript executes in a browser to produce the org chart Org chart object in Google Documentation (note expected data format): http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html

Result Set (from AdventureWorks database)

JavaScript Generated from Query and Result Set

JavaScript Generated from Query and Result Set Create data table

JavaScript Generated from Query and Result Set Define columns From result set metadata

JavaScript Generated from Query and Result Set Add a row of data From result set data

JavaScript Generated from Query and Result Set Create and draw visualization based on data table. The visualization should be associated with a <DIV> element in the html document.

Resulting Google Visualization

Screenshot of Google Visualization Generator User enters connection string and SQL query, and selects visualization type WebBrowser control contains resulting visualization JavaScript generated from query