Created
August 3, 2011 09:46
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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