of 57
8/14/2019 Gdd 2nd Wave
1/57
8/14/2019 Gdd 2nd Wave
2/57
8/14/2019 Gdd 2nd Wave
3/57
8/14/2019 Gdd 2nd Wave
4/57
Background
8/14/2019 Gdd 2nd Wave
5/57
Visualizations: Generic
8/14/2019 Gdd 2nd Wave
6/57
Visualizations: Specific
8/14/2019 Gdd 2nd Wave
7/57
Visualizations: Easy
First Name Last Name Phone
John Doe 555-5555
Jane Doe 555-5554
Steve Gates 444-4444
8/14/2019 Gdd 2nd Wave
8/57
Visualizations: Hard
8/14/2019 Gdd 2nd Wave
9/57
Visualizations: Many Options
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
13/57
Visualizations
8/14/2019 Gdd 2nd Wave
14/57
Abstract a Visualization
What: DataHow: Options
Where: Placement within a page
8/14/2019 Gdd 2nd Wave
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);
8/14/2019 Gdd 2nd Wave
16/57
Data Table
8/14/2019 Gdd 2nd Wave
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.
8/14/2019 Gdd 2nd Wave
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);
8/14/2019 Gdd 2nd Wave
19/57
Creating and drawing
8/14/2019 Gdd 2nd Wave
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);
8/14/2019 Gdd 2nd Wave
21/57
Events
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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()); });
8/14/2019 Gdd 2nd Wave
24/57
Formatters NEW
8/14/2019 Gdd 2nd Wave
25/57
Table Formatters
Enhance table visualization capabilities by supplyingdifferent kinds of formatters
Arrow
Bar
Coloring
Pattern
More available and more to come
8/14/2019 Gdd 2nd Wave
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});
8/14/2019 Gdd 2nd Wave
27/57
Views NEW
8/14/2019 Gdd 2nd Wave
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.
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
30/57
Visualization Gadgets
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
32/57
Visualization Gadgets Gallery
Google GadgetsThird party gadgets
Google spreadsheets has an integrated directory
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
34/57
Writing Your Own Visualizations
8/14/2019 Gdd 2nd Wave
35/57
8/14/2019 Gdd 2nd Wave
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.
};
8/14/2019 Gdd 2nd Wave
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.}
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
39/57
Connecting to Data Sources
8/14/2019 Gdd 2nd Wave
40/57
Data Sources
DatabasesFiles (e.g. csv)
Online (e.g. Google spreadsheets)
Applications, Web Services
Visualization Data
D A
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
46/57
Web Page Example
U C Ci ti LTD
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
48/57
Use Case
Use Case
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
53/57
Use Case
Wrap up
8/14/2019 Gdd 2nd Wave
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
8/14/2019 Gdd 2nd Wave
55/57
Learn More
http://code.google.com/apis/visualization
Reference
Examples
Group
Also: Site with video + slides
8/14/2019 Gdd 2nd Wave
56/57
Q&A
8/14/2019 Gdd 2nd Wave
57/57