Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Dynamic Chart control, feeding off Google Spreadsheet/visualisation API query
<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>
@patchypt

This comment has been minimized.

Copy link

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.