multiple database 2 dashboards
by forssux
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
JavaScript
<!DOCTYPE html>
<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', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
control1 = createDashboard1();
control2 = createDashboard2();
google.visualization.events.addListener(control1, 'statechange', function() {
control2.setState(control1.getState());
control2.draw();
});
}
function createDashboard1() {
// 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'}
});
// 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);
return stringFilter;
}
function createDashboard2() {
// Prepare...