google visualization mapper dr. mike mitri james madison university
TRANSCRIPT
![Page 1: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/1.jpg)
Google Visualization Mapper
Dr. Mike MitriJames Madison University
![Page 2: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/2.jpg)
Data-to-Visualization Mapping Algorithms
Data Source
Data Source
Visualization
Object
Visualization
Object
Visualization
Object
User-generated SQL queries
SQL
SQL
SQL
SQL
Query results
Data –to- Visualization Mappings
![Page 3: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/3.jpg)
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
![Page 4: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/4.jpg)
Some Google Visualizations
Motion Chart
Gauge
TreeMap
Dygraph (time series)
All of these are interactive and can respond to user events.
![Page 5: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/5.jpg)
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
![Page 6: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/6.jpg)
Result Set (from AdventureWorks database)
![Page 7: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/7.jpg)
JavaScript Generated from Query and Result Set
![Page 8: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/8.jpg)
JavaScript Generated from Query and Result Set
Create data table
![Page 9: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/9.jpg)
JavaScript Generated from Query and Result Set
Define columns
From result set metadata
![Page 10: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/10.jpg)
JavaScript Generated from Query and Result Set
Add a row of data
From result set data
![Page 11: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/11.jpg)
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.
![Page 12: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/12.jpg)
Resulting Google Visualization
![Page 13: Google Visualization Mapper Dr. Mike Mitri James Madison University](https://reader036.vdocument.in/reader036/viewer/2022062517/56649f135503460f94c27bee/html5/thumbnails/13.jpg)
Screenshot of Google Visualization Generator
WebBrowser control contains resulting visualization
JavaScript generated from query
User enters connection string and SQL query, and selects visualization type