psychemedia/googDynChartControl.html

## googDynChartControl.html
<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>
	<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>