Here are some code samples to demonstrate using the Google Visualization API.
|
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(5);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Mary');
data.setCell(1, 1, 25000, '$25,000');
data.setCell(1, 2, true);
data.setCell(2, 0, 'Steve');
data.setCell(2, 1, 8000, '$8,000');
data.setCell(2, 2, false);
data.setCell(3, 0, 'Ellen');
data.setCell(3, 1, 20000, '$20,000');
data.setCell(3, 2, true);
data.setCell(4, 0, 'Mike');
data.setCell(4, 1, 12000, '$12,000');
data.setCell(4, 2, false);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
google.visualization.events.addListener(table, 'select', function() {
var row = table.getSelection()[0].row;
alert('You selected ' + data.getValue(row, 0));
});
}
<style type='text/css'>
.bold-green-font {
font-weight: bold;
color: green;
}
.bold-font {
font-weight: bold;
}
.right-text {
text-align: right;
}
.large-font {
font-size: 15px;
}
.italic-darkblue-font {
font-style: italic;
color: darkblue;
}
.italic-purple-font {
font-style: italic;
color: purple;
}
.underline-blue-font {
text-decoration: underline;
color: blue;
}
.gold-border {
border: 3px solid gold;
}
.deeppink-border {
border: 3px solid deeppink;
}
.orange-background {
background-color: orange;
}
.orchid-background {
background-color: orchid;
}
.beige-background {
background-color: beige;
}
</style>
...
function drawTable() {
var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};
var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(5);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000, '$10,000', {'className': 'bold-green-font large-font right-text'});
data.setCell(0, 2, true, {'style': 'background-color: red;'});
data.setCell(1, 0, 'Mary', null, {'className': 'bold-font'});
data.setCell(1, 1, 25000, '$25,000', {'className': 'bold-font right-text'});
data.setCell(1, 2, true, {'className': 'bold-font'});
data.setCell(2, 0, 'Steve', null, {'className': 'deeppink-border'});
data.setCell(2, 1, 8000, '$8,000', {'className': 'deeppink-border right-text'});
data.setCell(2, 2, false, null);
data.setCell(3, 0, 'Ellen', null, {'className': 'italic-purple-font large-font'});
data.setCell(3, 1, 20000, '$20,000');
data.setCell(3, 2, true);
data.setCell(4, 0, 'Mike');
data.setCell(4, 1, 12000, '$12,000');
data.setCell(4, 2, false);
var conatiner = document.getElementById('table');
var table = new google.visualization.Table(conatiner);
table.draw(data, options);
table.setSelection([{'row': 4}]);
}
Temperature:
<script>
var gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Engine');
gaugeData.addColumn('number', 'Torpedo');
gaugeData.addRows(2);
gaugeData.setCell(0, 0, 120);
gaugeData.setCell(0, 1, 80);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
redFrom: 250, redTo: 280, minorTicks: 5};
var gauge;
function drawGauge() {
gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(gaugeData, gaugeOptions);
}
function changeTemp(dir) {
gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
gauge.draw(gaugeData, gaugeOptions);
}
</script>
<input type='button' value='Go Faster' onclick='changeTemp(1)' />
<input type='button' value='Slow down' onclick='changeTemp(-1)' />
function drawIntensityMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setCell(0, 0, 'US');
data.setCell(0, 1, 10000);
data.setCell(0, 2, 8000);
data.setCell(1, 0, 'CA');
data.setCell(1, 1, 7000);
data.setCell(1, 2, 5000);
data.setCell(2, 0, 'CN');
data.setCell(2, 1, 8000);
data.setCell(2, 2, 12000);
data.setCell(3, 0, 'GB');
data.setCell(3, 1, 7000);
data.setCell(3, 2, 15000);
var imap = new google.visualization.IntensityMap(document.getElementById('intensitymap_div'));
imap.draw(data, {});
}
This example demonstrates how to combine visualizations for more complex interactivity.
It demonstrates the following features:
Click on the table's headers to see the column chart getting sorted also.
function drawSort() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time');
data.addRows(5);
data.setCell(0, 0, 'John');
data.setCell(0, 1, 10000);
data.setCell(0, 2, true);
data.setCell(1, 0, 'Mary');
data.setCell(1, 1, 25000);
data.setCell(1, 2, true);
data.setCell(2, 0, 'Steve');
data.setCell(2, 1, 8000);
data.setCell(2, 2, false);
data.setCell(3, 0, 'Ellen');
data.setCell(3, 1, 20000);
data.setCell(3, 2, true);
data.setCell(4, 0, 'Mike');
data.setCell(4, 1, 12000);
data.setCell(4, 2, false);
var formatter = new google.visualization.TableNumberFormat({prefix: '$'});
formatter.format(data, 1); // Apply formatter to second column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var table = new google.visualization.Table(document.getElementById('table_sort_div'));
table.draw(view);
var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));
chart.draw(view);
google.visualization.events.addListener(table, 'sort',
function(event) {
data.sort([{column: event.column, desc: !event.ascending}]);
chart.draw(view);
});
}
Get started quickly with an Interactive Code Sample you can edit and save.
An end-to-end example for creating a web page with visualization charts embedded in it. It also demonstrates a chart connected to Google Spreadsheets and two charts interacting using visualization Events.
The example displays a simple statistics page for popular movies and cinema locations of a make-belief cinema chain company.
The page includes a Map and a Table visualization that interact with each other to display the theater locations. The page includes a column chart displaying the number of tickets each movie sold per location. It derives its data from a Google Spreadsheet. The published version of this Spreadsheet can be viewed for completeness.
<html>
<head>
<title>
Cinematics
</title>
<style type="text/css">
.header {
color: purple;
background-color: #abc;
font-size: 40px;
text-align: center;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Note that you need to replace the key ABCDEF with your Maps API key. -->
<!-- Sign up for a Maps API key here: http://code.google.com/apis/maps/signup.html -->
<script src="http://maps.google.com/maps?file=api&v=2&api;key=ABCDEF"
type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1',
{'packages': ['table', 'map', 'columnchart']});
google.setOnLoadCallback(initialize);
function initialize() {
// The URL here is the URL of the spreadsheet.
// This is where the data is.
var query = new google.visualization.Query(
'http://spreadsheets.google.com/pub?key=pCQbetd-CptF0r8qmCOlZGg');
query.send(draw);
}
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',
'titleY': 'Number of tickets'});
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]);
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});
// Set a 'select' event listener for the table.
// When the table is selected,
// we set the selection on the map.
google.visualization.events.addListener(table, 'select',
function() {
map.setSelection(table.getSelection());
});
// Set a 'select' event listener for the map.
// When the map is selected,
// we set the selection on the table.
google.visualization.events.addListener(map, 'select',
function() {
table.setSelection(map.getSelection());
});
}
</script>
</head>
<body>
<div class="header">Cinematics</div>
<table align="center">
<tr valign="top">
<td style="width: 50%;">
<div id="map_div" style="width: 400px; height: 300;"></div>
</td>
<td style="width: 50%;">
<div id="table_div"></div>
</td>
</tr>
<tr>
<td colSpan=2>
<div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
</td>
</tr>
</table>
</body>
</html>
Note that you need to replace the key ABCDEF with your Maps API key. Sign up for a Maps API key
This example demonstrates how to write a custom gadget. The gadget encapsulates the exact visualization, options and data source. It wraps the Table visualization in a gadget container and hard-codes the data source and several options. Gadgets allow you to hard-code values in your visualization, just as you can with non-gadget visualizations.
For more information about gadgets, click here.
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Custom gadget"
author="Google"
author_email="visualization.api@gmail.com"
description="Custom gadget"
thumbnail="http://visapi-gadgets.googlecode.com/svn/trunk/image/thumbnail.png"
screenshot="http://visapi-gadgets.googlecode.com/svn/trunk/image/screenshot.png">
<Require feature="idi" />
<Require feature="locked-domain" />
</ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
google.setOnLoadCallback(init);
function init() {
var container = document.getElementById('chart');
sendQuery();
}
function sendQuery() {
var query = new google.visualization.Query('http://google-visualization.appspot.com/python/dynamic_example');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
// Default error message handling
var gadgetHelper = new google.visualization.GadgetHelper();
if (!gadgetHelper.validateResponse(response))
return;
var data = response.getDataTable();
var visualization = new google.visualization.Table(document.getElementById('visualization'));
visualization.draw(data, null);
}
</script>
<div id="visualization">
<img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
</div>
]]>
</Content>
</Module>
You can take this xml and use it as a gadget.