Skip to content

Instantly share code, notes, and snippets.

@battlehorse
Created August 3, 2011 09:46
Show Gist options
  • Save battlehorse/1122276 to your computer and use it in GitHub Desktop.
Save battlehorse/1122276 to your computer and use it in GitHub Desktop.
Google Chart Tools controls and dashboards API: hide a chart until a specific set of categories has been chosen.
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Country', 'Region/State', 'City', 'Population'],
['USA', 'California', 'San Francisco', 776733],
['USA', 'California', 'Los Angeles', 3694820],
['USA', 'California', 'Mountain View', 70708],
['USA', 'New York', 'New York', 8175173],
['USA', 'New York', 'Albany', 857592],
['France', 'Ile-de-France', 'Paris', 2193031],
['France', 'Ile-de-France', 'Orly', 21372],
['France', 'Provence', 'Marseille', 852395],
['France', 'Provence', 'Nice', 348556]
]);
// Define category pickers for 'Country', 'Region/State'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Region/State',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a bar chart to show 'Population' data.
// The bar chart will show _only_ if the user has choosen a value
// from both category pickers.
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': 400,
'height': 300,
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3]}
});
// Define a table.
// The table shows whatever is selected by the category pickers. It's here
// just for reference and debugging.
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
// Configure the controls so that:
// - the 'Country' selection drives the 'Region' one,
// - both the 'Country' and 'Region' selection drive the barchart
// - both the 'Country' and 'Region' selection drive the table
dashboard.bind(countryPicker, regionPicker);
dashboard.bind([countryPicker, regionPicker], [barChart, table]);
// Draw the dashboard
dashboard.draw(data);
google.visualization.events.addListener(dashboard, 'ready', function() {
var countrySelectedValues = countryPicker.getState()['selectedValues'];
var regionSelectedValues = regionPicker.getState()['selectedValues'];
if (countrySelectedValues.length == 0 || regionSelectedValues.length == 0) {
document.getElementById('chart1').style.visibility = 'hidden';
} else {
document.getElementById('chart1').style.visibility = 'visible';
}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment