Created
May 17, 2011 09:11
-
-
Save battlehorse/976184 to your computer and use it in GitHub Desktop.
Google Chart Tools controls and dashboards API: using a view specification with custom column reordering and generated columns.
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
| <!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"> | |
| <!-- | |
| 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) | |
| --> | |
| <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.1', {packages: ['controls']}); | |
| </script> | |
| <script type="text/javascript"> | |
| function drawVisualization() { | |
| // Prepare the data. | |
| var data = google.visualization.arrayToDataTable([ | |
| ['Name', 'Age'], | |
| ['Michael' , 12], | |
| ['Elisa', 20], | |
| ['Robert', 7], | |
| ['John', 54], | |
| ['Jessica', 22], | |
| ['Aaron', 3], | |
| ['Margareth', 42], | |
| ['Miranda', 33] | |
| ]); | |
| // Define a StringFilter control for the 'Name' column | |
| var stringFilter = new google.visualization.ControlWrapper({ | |
| 'controlType': 'StringFilter', | |
| 'containerId': 'control1', | |
| 'options': { | |
| 'filterColumnLabel': 'Name' | |
| } | |
| }); | |
| // Define a table visualization | |
| var table = new google.visualization.ChartWrapper({ | |
| 'chartType': 'Table', | |
| 'containerId': 'chart1', | |
| 'options': {'height': '13em', 'width': '20em'}, | |
| 'view': {'columns': [1, 0, { | |
| 'type': 'string', 'label': 'Uppercase', | |
| 'calc': function(dt, rowNum) { | |
| return String(dt.getValue(rowNum, 0)).toUpperCase(); | |
| } | |
| }]} | |
| }); | |
| // Create the dashboard. | |
| var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')). | |
| // Configure the string filter to affect the table contents | |
| bind(stringFilter, table). | |
| // Draw the dashboard | |
| draw(data); | |
| } | |
| 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