Skip to content

Instantly share code, notes, and snippets.

@battlehorse

battlehorse/test.html

Created September 12, 2011 10:38
Show Gist options
  • Save battlehorse/1210987 to your computer and use it in GitHub Desktop.
Save battlehorse/1210987 to your computer and use it in GitHub Desktop.
Download ZIP
A Google Visualization API dashboard containing a map
Raw
test.html
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'corechart', 'table','map']});
</script>
<script type="text/javascript">
var visualization;
function drawVisualization() {
// Prepare the data
var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0At7FLhuT06-0dDdWaWpkakI2ZjJybjFDWVJ4TFNUQXc&hl=en_GB#gid=0');
query.setQuery('SELECT A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,AA,AB,AC,AD');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var CityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['Monaco']}
});
var CountryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['Monaco']}
});
var table1 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table1',
'options': {
'width': '920px',
'height': 53
}, 'view': {'columns': [0,18,1,15,16,17] ,'rows': [0] }
});
var line1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart6',
'options': {
'width': 475,
'height': 220,
'legend': 'none',
'pointSize': 7,
'title': 'Number of movements',
'chartArea': {'left': 100, 'top': 30, 'width':'60%','height':'70%'},
'vAxis': {'minValue': 0}
},
'view': {'columns': [2,14],'rows': [0,1,2] }
});
var map1 = new google.visualization.ChartWrapper({
'chartType': 'Map',
'containerId': 'map1',
'view': { 'columns': [19, 20]}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind(CountryPicker, CityPicker).
bind([CityPicker], [table1, line1, map1]).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
<head>
<body>
<div id="dashboard"></div>
<div id="control1"></div>
<div id="control2"></div>
<div id="table1"></div>
<div id="map1"></div>
<div id="chart6"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment