Created
June 6, 2011 13:56
-
-
Save psychemedia/1010306 to your computer and use it in GitHub Desktop.
Google Dynamic Chart control, feeding off Google Spreadsheet/visualisation API query
This file contains hidden or 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
| <html><head> | |
| <title>Google visualisation demo: chart query controls</title> | |
| <!--Load the AJAX API--> | |
| <script type="text/javascript" src="https://www.google.com/jsapi"></script> | |
| <script type="text/javascript"> | |
| // Load the Visualization API and the controls package. | |
| // Packages for all the other charts you need will be loaded | |
| // automatically by the system. | |
| google.load('visualization', '1.1', {'packages':['controls','linechart']}); | |
| // Set a callback to run when the Google Visualization API is loaded. | |
| google.setOnLoadCallback(initialize); | |
| function initialize() { | |
| // Replace the data source URL on next line with your data source URL. | |
| var query = new google.visualization.Query('http://spreadsheets.google.com/tq?tq=select%20A%2CE%20where%20E%20%3C%20200&key=0AmbQbL4Lrd61dG1pZ0RITHRWSGVCLXJCOGl2OG5tMlE&gid=4'); | |
| // Send the query with a callback function. | |
| query.send(drawDashboard); | |
| } | |
| function drawDashboard(response) { | |
| var data = response.getDataTable(); | |
| // Everything is loaded. Assemble your dashboard... | |
| var namePicker = new google.visualization.ControlWrapper({ | |
| 'controlType': 'CategoryFilter', | |
| 'containerId': 'filter_div', | |
| 'options': { | |
| 'filterColumnLabel': 'driver', | |
| 'ui': { | |
| 'labelStacking': 'vertical', | |
| 'allowTyping': false, | |
| 'allowMultiple': false | |
| } | |
| } | |
| }); | |
| var laptimeChart = new google.visualization.ChartWrapper({ | |
| 'chartType': 'LineChart', | |
| 'containerId': 'chart_div', | |
| 'options': { | |
| 'width': 800, | |
| 'height': 800 | |
| } | |
| }); | |
| var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')). | |
| bind(namePicker, laptimeChart). | |
| draw(data) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!--Div that will hold the dashboard--> | |
| <div id="dashboard_div"> | |
| <!--Divs that will hold each control and chart--> | |
| <div id="filter_div"></div> | |
| <div id="chart_div"></div> | |
| </div> | |
| <body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
your code really help me,thanks!