Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Google Dynamic Chart control, feeding off Google Spreadsheet/visualisation API query
<title>Google visualisation demo: chart query controls</title>
<!--Load the AJAX API-->
<script type="text/javascript" src=""></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.
function initialize() {
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('');
// Send the query with a callback function.
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).
<!--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>

This comment has been minimized.

Copy link

patchypt commented Jun 14, 2017

your code really help me,thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.