Académique Documents
Professionnel Documents
Culture Documents
Google Visualization
Nimrod Talmon
Agenda
Background
Visualizations
Data Table
Events
Formatters NEW
Views NEW
Data
Visualization
Data
Why Use the Platform?
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
Create (constructor)
Draw
‘select’ event
getSelection
setSelection
Select Event
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
Choosing columns
Reordering columns
Sometimes you need several views over the same
data.
Removing a Column
Google Gadgets
Third party gadgets
Google spreadsheets has an integrated directory
Current Visualizations by Google
Reach:
Any gadget container
Panorama
Eureka
Write Your Own Visualization
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);
}
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
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
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.
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
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
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
Events
Formatters NEW
Views NEW
Data
http://code.google.com/apis/visualization
Examples
Group
Q&A