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>

<script type="text/javascript">
google.load(‘visualization’, ‘1’, {packages: [‘piechart’]});
google.setOnLoadCallback(initialize);

function initialize() {
// Create data tables and visualizations here.
}
</script>

<script type="text/javascript"
src="http://www.google.com/jsapi"></script>

<script src=“http://.../pilesofmoney/pom.js"></script>
<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(

<data-source-url> );
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 year revenues dept 2005 2006 2007
A 2005 10000
A 10000 30000 60000
B 2005 15000
B 15000 40000
C 2005 20000
C 20000 50000
A 2006 30000
B 2006 40000
C 2006 50000
A 2007 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 Also: Site with video + slides

Examples
Group
Q&A