gdd 2nd wave

8/14/2019 Gdd 2nd Wave

1/57


2/57


3/57


4/57

Background


5/57

Visualizations: Generic


6/57

Visualizations: Specific


7/57

Visualizations: Easy

First Name Last Name Phone

John Doe 555-5555

Jane Doe 555-5554

Steve Gates 444-4444


8/57

Visualizations: Hard


9/57

Visualizations: Many Options


10/57

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


11/57

Google Visualization

A single platform for (almost) all web-based datavisualizations.

Applicable for everyone, not just for Google charts.

A directory for all the visualizations supporting the

platform.

Visualization

Data


12/57

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


13/57

Visualizations


14/57

Abstract a Visualization

What: DataHow: Options

Where: Placement within a page


15/57

Loading the API

google.load(visualization, 1, {packages: [piechart]});google.setOnLoadCallback(initialize);

function initialize() {// Create data tables and visualizations here.

}

google.load(visualization, 1);google.setOnLoadCallback(initialize);


16/57

Data Table


17/57

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 optionalproperties.


18/57

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);


19/57

Creating and drawing


20/57

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);


21/57

Events


22/57

Events & Actions

Communicate between a visualization and the pageCommunicate with other visualizations

Trigger and listen on named events

Generic selection handling:

select event

getSelection

setSelection


23/57

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()); });


24/57

Formatters NEW


25/57

Table Formatters

Enhance table visualization capabilities by supplyingdifferent kinds of formatters

Arrow

Bar

Coloring

Pattern

More available and more to come


26/57

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});


27/57

Views NEW


28/57

Data Views

New concept to improve flexibility of working withvisualizations over data.

Based on sql View

Currently supports

Choosing columns

Reordering columns

Sometimes you need several views over the same

data.


29/57

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

John Male Guitar

Paul Male Bass

Name Instrument

John Guitar

Paul Bass


30/57

Visualization Gadgets


31/57

What & Why

Embed in Gadget containers (iGoogle, GoogleSpreadsheets, 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


32/57

Visualization Gadgets Gallery

Google GadgetsThird party gadgets

Google spreadsheets has an integrated directory


33/57

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


34/57

Writing Your Own Visualizations


35/57


36/57

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.

};


37/57

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.}


38/57

Publish Your Visualization

Name spaceHost your files (js, css, images, )

Create documentation:

Description

Examples

Options reference

Data policy

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


39/57

Connecting to Data Sources


40/57

Data Sources

DatabasesFiles (e.g. csv)

Online (e.g. Google spreadsheets)

Applications, Web Services

Visualization Data

D A


41/57

Data Access

Provide a single data retrieval API and query languageacross any data source

Can create data table on the client

Currently query language supports only GoogleSpreadsheets

Many more coming soon

Th Q API


42/57

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.}

}

Q L


43/57

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:

Pi ti D t


44/57

Pivoting Data

select dept, sum(revenues) group by dept pivot year

dept year revenuesA 2005 10000

B 2005 15000

C 2005 20000

A 2006 30000

B 2006 40000

C 2006 50000

A 2007 60000

dept 2005 2006 2007

A 10000 30000 60000

B 15000 40000

C 20000 50000

D t S API R d


45/57

Data Source API Roadmap

Opening up server-side APIsAdditional data sources

More flexibility to use the platform

Details coming soon

Enhanced query language

More Google charts and visualizations


46/57

Web Page Example

U C Ci ti LTD


47/57

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.

U C


48/57

Use Case

Use Case


49/57

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


50/57

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


51/57

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


52/57

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


53/57

Use Case

Wrap up


54/57

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


55/57

Learn More

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

Reference

Examples

Group

Also: Site with video + slides


56/57

Q&A


57/57

gdd 2nd wave

Documents