Gdd 2nd Wave

Visualize your data: Google Visualization Nimrod Talmon

Agenda Background Visualizations Data Table Creating and drawing Events Formatters NEW Views NEW Data Connecting to data sources Query API and Query Language Wrapping visualizations inside gadgets Write & Submit your own visualization

Background

Visualizations: Generic

Visualizations: Specific

Visualizations: Easy First Name

Last Name

Phone

John

Doe

555-5555

Jane

Doe

555-5554

Steve

Gates

444-4444

Visualizations: Hard

Visualizations: Many Options

Visualizations: The Problem Many ways to visualize data + Many data sources + Many applications to embed visualizations in ============================================ = Too many APIs, too much work for developers + Hard to find what you need

Google Visualization A single platform for (almost) all web-based data visualizations. Applicable for everyone, not just for Google charts. A directory for all the visualizations supporting the platform.

Visualization Data

Why Use the Platform? Built with the developer in mind: Easy and fast integration. Intuitive model.

Google cloud infrastructure: Visualizations loaded from Google infrastructure Reliable Robust Fast

Visualizations: By Google

Visualizations

Abstract a Visualization What: Data How: Options Where: Placement within a page

Loading the API <script type="text/javascript" src="http://www.google.com/jsapi"> <script type="text/javascript"> google.load(‘visualization’, ‘1’, {packages: [‘piechart’]}); google.setOnLoadCallback(initialize); function initialize() { // Create data tables and visualizations here. }

<script type="text/javascript" src="http://www.google.com/jsapi"> <script src=“http://.../pilesofmoney/pom.js"> <script type="text/javascript“> google.load(‘visualization’, ‘1’); google.setOnLoadCallback(initialize);

Data Table

What: Common Data Format 2D table with rows and columns. Each column has a data type, identifier, and label. Each cell has a value, formatted value, and optional properties.

Data Table Example Data types: string, number, boolean, date, datetime, timeofday var data = new google.visualization. DataTable(); data.addColumn(‘name’, ‘Name’, ‘string’); data.addColumn(‘salary’, ‘Salary’, ‘number’); data.addRows(3); data.setValue(0, 0, ‘John’); data.setValue(0, 1, 10000, ’$10,000’); data.setValue(1, 0, ‘Mary’); data.setValue(1, 1, 15000, ‘$15,000’); data.setValue(2, 0, ‘Steve’); Data.setValue(2, 1, 8000, ‘$8,000’);

Creating and drawing

Where & How: API to Create a Visualization Create (constructor) Draw var container = document.getElementById(‘myDiv’); var chart = new google.visualization.PieChart(container); var options = {is3D: true, legendPosition: ‘bottom’}; chart.draw(data, options);

Events

Events & Actions Communicate between a visualization and the page Communicate with other visualizations

Trigger and listen on named events Generic selection handling: ‘select’ event getSelection setSelection

Select Event var data = new google.visualization.DataTable(); data.addColumn('name', 'Name', 'string'); data.addColumn('name', 'Manager', 'string'); data.addColumn('salary', 'Salary', 'number'); data.addRows(5); data.setCell(0, 0, 'John'); data.setCell(0, 1, null); data.setCell(0, 2, 1000, '$1,000'); ... var tbui = new google.visualization.Table(tableContainer); tbui.draw(data, {}); var orgui = new google.visualization.OrgChart(orgContainr); orgui.draw(data, {}); google.visualization.events.addListener(tbui, 'select', function() { orgui.setSelection(tbui.getSelection()); }); google.visualization.events.addListener(orgui, 'select', function() { tbui.setSelection(orgui.getSelection()); });

Formatters NEW

Table Formatters Enhance table visualization capabilities by supplying different kinds of formatters Arrow Bar Coloring Pattern

More available and more to come…

Adding a Formatter to a Table var data = new google.visualization.DataTable(); data.addColumn('string', 'Key'); data.addRows(3); data.addColumn('number', 'Value'); data.setCell(0, 0, 5); data.setCell(1, 0, -7); data.setCell(2, 0, 0); var formatter = new google.visualization.TableArrowFormat(); formatter.format(data, 1); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true});

Views NEW

Data Views New concept to improve flexibility of working with visualizations over data. Based on sql View Currently supports Choosing columns Reordering columns

Sometimes you need several views over the same data.

Removing a Column var data = new google.visualization.DataTable(); data.addColumn('string', ‘Name'); data.addColumn('string', ‘Gender'); data.addColumn(‘string', ‘Instrument'); data.addRows(3); data.setCell(0, 0, ‘John'); data.setCell(1, 0, ‘Paul'); data.setCell(0, 1, ‘male'); data.setCell(1, 1, ‘male'); data.setCell(0, 2, ‘Guitar’); data.setCell(1, 2, ’Bass’);

var view = new google.visualization.DataView(data); view.setColumns([0, 2]);

Name

Gender

Instrument

Name

Instrument

John

Male

Guitar

John

Guitar

Paul

Male

Bass

Paul

Bass

Visualization Gadgets

What & Why Embed in Gadget containers (iGoogle, Google Spreadsheets, Non-Google containers) Isolated from the container page Users can share & syndicate, organize their own views Embed as an iframe in any web page Soft wiring to a data source url

Visualization Gadgets Gallery Google Gadgets Third party gadgets Google spreadsheets has an integrated directory

Current Visualizations by Google Pie, line, bar, column, area charts (multiple options) Time series chart Org Chart Gauges Tables Motion Chart Map Heat Map More …

Writing Your Own Visualizations

Why Develop for the Visualization Platform? Reach: Any gadget container

iGoogle, Google Spreadsheets, Shindig Non Google containers Any web page Already in wide use on the web

Viable business model: Panorama Eureka

Write Your Own Visualization

var MyChart = function(container) { this.container = container; }; MyChart.prototype.draw = function(data, options) { // Drawing logic goes here };

MyChart.prototype.onclick = function() { google.visualization.events.trigger(this, ‘select’); } MyChart.prototype.getSelection = function() { return [{row: 3}]; }; MyChart.prototype.setSelection = function(selection) { // Change current selection. };

Visualization Gadgets API

function initialize() { // Create and send the query. var prefs = new _IG_Prefs(); // User preferences. gadgetHelper = new google.visualization.GadgetHelper(); var query = gadgetHelper.createQueryFromPrefs(prefs); query.send(handleQueryResponse); }

// Query response handler function. function handleQueryResponse(response) { if (!gadgetHelper.validateResponse(response)) return; // Add code here to display the output table. }

Publish Your Visualization Name space Host your files (js, css, images, …) Create documentation: Description Examples Options reference Data policy

Submit to http://code.google.com/apis/visualization

Connecting to Data Sources

Data Sources Databases Files (e.g. csv) Online (e.g. Google spreadsheets) Applications, Web Services

Visualization Data

Data Access Provide a single data retrieval API and query language across any data source Can create data table on the client Currently query language supports only Google Spreadsheets Many more coming soon…

The Query API

var query = new google.visualization.Query( ); Query.setQuery(‘select ...’); // Optional. Query.send(myCallback); function myCallback(response) { if (!response.isError()) { var data = response.getDataTable();

// Here goes the visualization logic. } }

Query Language select [columns]

from [table] where [conditions] group by [grouping columns] pivot [pivot columns] order by [sort columns] limit [number] offset [number] label [label options] format [format options]

Example:

Pivoting Data

select dept, sum(revenues) group by dept pivot year dept A B C A B C A

year 2005 2005 2005 2006 2006 2006 2007

revenues 10000 15000 20000 30000 40000 50000 60000

dept

2005

2006

2007

A B C

10000 15000 20000

30000 40000 50000

60000

Data Source API Roadmap Opening up server-side APIs Additional data sources More flexibility to use the platform Details coming soon…

Enhanced query language More Google charts and visualizations

Web Page Example

Use Case: Cinematics LTD Background: Cinema chain in Europe. Want to show location of theatres in Europe on their website. Want to show movie popularity.

Implementation: One table. One map. Connect map & table with events. One barchart with live data from Google Spreadsheets.

Use Case

Use Case Loading and initializing. google.load('visualization', '1', {packages: ['table', 'map', 'columnchart']}); google.setOnLoadCallback(initialize); function initialize() { var query = new google.visualization.Query( 'https://spreadsheets.google.com/a/google.com/tq?key=p2L'); query.send(draw); }

Use Case Using data from Google Spreadsheets. function draw(response) { if (response.isError()) { alert('Error in query'); } var ticketsData = response.getDataTable(); var chart = new google.visualization.ColumnChart( document.getElementById('chart_div')); chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom'});

Use Case Generating data on the client. var geoData = new google.visualization.DataTable(); geoData.addColumn('string', 'City'); geoData.addColumn('string', 'Name'); geoData.addColumn('boolean', 'Food'); geoData.addRows(3); geoData.setCell(0, 0, 'London'); geoData.setCell(1, 0, 'Paris'); geoData.setCell(2, 0, 'Moscow'); geoData.setCell(0, 1, 'Cinematics London'); geoData.setCell(1, 1, 'Cinematics Paris'); geoData.setCell(2, 1, 'Cinematics Moscow'); geoData.setCell(0, 2, true); geoData.setCell(1, 2, true); geoData.setCell(2, 2, false);

var geoView = new google.visualization.DataView(geoData); geoView.setColumns([0, 1]);

Use Case Drawing map & table, and attaching events. var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(geoData, {showRowNumber: false});

var map = new google.visualization.Map(document.getElementById('map_div')); map.draw(geoView, {showTip: true}); google.visualization.events.addListener(table, 'select', function() { map.setSelection(table.getSelection()); }); google.visualization.events.addListener(map, 'select', function() { table.setSelection(map.getSelection()); });

Use Case

Wrap up Background Visualizations Data Table Creating and drawing Events Formatters NEW Views NEW Data Connecting to data sources Query API and Query Language Wrapping visualizations inside gadgets Write & Submit your own visualization

Learn More

http://code.google.com/apis/visualization

Reference Examples Group

Also: Site with video + slides

Q&A