How do I run two queries and display two charts with controls in a Google Charts dashboard
Question
I have been having trouble trying to set up a Google Charts dashboard with two charts and two controlwrappers using two queries to a Google sheet.
I have gone through many of the examples on here demonstrating multiple graphs from single sources, or multiple queries for multiple charts but no control aspect.
I am ultimately trying to run two queries of a single Google sheet, each query pulling a different set of data from the sheet based on the query string, then displaying the data in a graph. There would also be a filterColumn control wrapper that selects data from the data table.
I have the following code which works for one query and graph. When I try to double up the process so that I can display both in one page, one or the other graph will appear, but not both. I get that this may be something to do with a conflict between the queries, but I don't understand it. I tried building one function that ran both queries that would be initiated by the google.setOnLoadCallback function. However, that didn't work. I tried to combine the various parts using others examples as guides, but those don't work. This is the closest version, and when I refresh it several times in a row sometimes one chart will load, other times the other, but never both.
If someone can point me in the right direction I would appreciate it.
<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', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);
google.setOnLoadCallback(initialize2);
function initialize() {
var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B");
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString);
// Send the query with a callback function.
query.send(drawDashboard);
}
function initialize2() {
var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B");
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2);
// Send the query with a callback function.
query2.send(drawDashboard2);
}
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': 'Sample ID',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var laptimeChart = new google.visualization.ChartWrapper({
'chartType': 'Bar',
'containerId': 'chart_div',
'dataSourceUrl': 'https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1',
'query': "select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B",
'options': {
'width': 1600,
'height': 800,
axes: {
x: {
0: {
side: 'top',
label: 'Sample ID'
} // Top x-axis.
}
},
chart: {
title: 'Aging Panel Results',
subtitle: 'Beer force-aged for 2 weeks',
},
'legend': {
position: 'none'
},
'colors': ['#ed8907']
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind(namePicker, laptimeChart).
draw(data)
}
function drawDashboard2(response2) {
var data2 = response2.getDataTable();
// Everything is loaded. Assemble your dashboard...
var namePicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div2',
'options': {
'filterColumnLabel': 'Sample ID',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var laptimeChart2 = new google.visualization.ChartWrapper({
'chartType': 'Bar',
'containerId': 'chart_div2',
'options': {
'width': 1600,
'height': 800,
axes: {
x: {
0: {
side: 'top',
label: 'Sample ID'
} // Top x-axis.
}
},
chart: {
title: 'Aging Panel Results',
subtitle: 'Beer aged 2 weeks',
},
'legend': {
position: 'none'
},
'colors': ['Red']
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')).
bind(namePicker2, laptimeChart2).
draw(data2)
}
</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>
<div id="dashboard_div2">
<!--Divs that will hold each control and chart-->
<div id="filter_div2"></div>
<div id="chart_div2"></div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2016-10-06 21:29:09
first , need to use loader.js for loading the libraries,
this...
<script src="https://www.gstatic.com/charts/loader.js"></script>
not this...
<script src="https://www.google.com/jsapi"></script>
according to the release notes ...
The version of Google Charts that remains available via the
jsapiloader is no longer being updated consistently. Please use the new gstatic loader from now on.
second, you should only use google.setOnLoadCallback once per page
it can also be included in the google.charts.load statement, as in the following example
next, the chartType is incorrect and needs to exist in the packages loaded
for core charts, load package 'corechart' and use --> chartType: 'BarChart'
for material charts, load package: 'bar' --> chartType: 'Bar'
(don't recommend using material charts, several options don't work)
finally , since the chart wrappers are drawn using a dashboard,
don't need these options --> 'dataSourceUrl' or 'query'
see following working snippet...
google.charts.load('current', { callback: function () { var queryString = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Forced' group by B"); var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString); query.send(drawDashboard); var queryString2 = encodeURIComponent("select B, ((5-avg(F))*.4) + ((5-avg(G))*.4) + ((5-avg(H))*.2) + ((5-avg(I))*.125) + ((5-avg(J))*.125) where C contains 'Sept 26' and E contains 'Unforced' group by B"); var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1_DuiDpbRyegaN0zYR4iYp8ZXefO-kIV-F054e9aIcIY/gviz/tq?gid=1757506986&headers=1&tq=' + queryString2); query2.send(drawDashboard2); }, packages: ['controls', 'corechart'] }); function drawDashboard(response) { var namePicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Sample ID', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); var laptimeChart = new google.visualization.ChartWrapper({ chartType: 'BarChart', containerId: 'chart_div', options: { width: 1600, height: 800, axes: { x: { 0: { side: 'top', label: 'Sample ID' } } }, chart: { title: 'Aging Panel Results', subtitle: 'Beer force-aged for 2 weeks', }, legend: { position: 'none' }, colors: ['#ed8907'] } }); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')). bind(namePicker, laptimeChart). draw(response.getDataTable()); } function drawDashboard2(response) { var namePicker = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'filter_div2', options: { filterColumnLabel: 'Sample ID', ui: { labelStacking: 'vertical', allowTyping: false, allowMultiple: false } } }); var laptimeChart = new google.visualization.ChartWrapper({ chartType: 'BarChart', containerId: 'chart_div2', options: { width: 1600, height: 800, axes: { x: { 0: { side: 'top', label: 'Sample ID' } } }, chart: { title: 'Aging Panel Results', subtitle: 'Beer force-aged for 2 weeks', }, legend: { position: 'none' }, colors: ['#ed8907'] } }); var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div2')). bind(namePicker, laptimeChart). draw(response.getDataTable()); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard_div"> <div id="filter_div"></div> <div id="chart_div"></div> </div> <div id="dashboard_div2"> <div id="filter_div2"></div> <div id="chart_div2"></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.