如何在Google charts仪表板中运行两个查询并显示两个带有控件的图表
How do I run two queries and display two charts with controls in a Google Charts dashboard
我一直有麻烦，试图建立一个谷歌图表仪表板与两个图表和两个控制包装使用两个查询谷歌工作表。
我已经看了这里的许多例子，展示了来自单一来源的多个图形，或者多个图表的多个查询，但没有控制方面。
我最终试图运行单个Google表的两个查询，每个查询从基于查询字符串的表中提取不同的数据集，然后在图中显示数据。还有一个filterColumn控件包装器，用于从数据表中选择数据。
我有以下的代码，它适用于一个查询和图形。当我尝试将进程加倍，以便在一个页面中同时显示两个图形时，将显示其中一个图形，但不会同时显示两个图形。我知道这可能与查询之间的冲突有关，但我不明白。我试着建立一个功能，运行两个查询，将由谷歌发起。setOnLoadCallback函数。然而，这不起作用。我试着用其他的例子来结合不同的部分作为指导，但这些都不起作用。这是最接近的版本，当我连续刷新它几次时，有时会加载一个图表，有时会加载另一个，但从来没有同时加载。
如果有人能给我指个方向，我会很感激的。
<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>
首先，需要使用loader.js来加载库，
…<script src="https://www.gstatic.com/charts/loader.js"></script>
这…<script src="https://www.google.com/jsapi"></script>
根据发行说明…
通过
jsapi加载器仍然可用的Google Charts版本不再持续更新。从现在开始请使用新的gstatic加载器。
第二，每页只能使用一次google.setOnLoadCallback
也可以包含在google.charts.load语句中，如下例
下一步， chartType不正确，需要存在于加载的packages
对于core图表，加载'corechart'包并使用-> chartType: 'BarChart'
材料图表，加载包:'bar' -> chartType: 'Bar'
(不建议使用材料图表，有几个选项不起作用)
最后，因为图表包装器是使用仪表板绘制的，
不需要这些选项——> 'dataSourceUrl'或'query'
请参阅下面的工作代码片段…
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>相关文章：
- 将循环中的两个文本框相乘，并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 如何应用带过滤器的ng if来过滤记录，并在同一页面中显示两个不同的视图
- 解耦按钮(两个按钮同时切换），并根据数据显示相应的按钮
- 如何将(a*b）两个输入文本值相乘，并在javascript中随文本变化动态显示
- php:两个日历没有显示
- 两个amCharts图与iPad上的jQueryMobile框架不显示在同一页面上
- 同时在两个文本框上显示光标
- 在两个位置显示数组中的随机单词
- 需要在 html 中使用两个下拉列表来显示不同的 json 值
- 如何在同一个表中显示这两个嵌套ng重复的元素
- 如何在AngularJS中显示基于两个下拉列表的内容
- 点击页面刷新;重新显示两个输入元素
- 想要使用document.getelementbyid显示两个变量
- 如何在javascript中使两个按钮显示在一起
- 如何使用仅显示/查看两个项目的甘特图
- 如何使两个角度列表在html表中并排显示
- 添加两个数字，并使用Javascript在文本框中显示结果
- 使用两个不同表中的值在一个谷歌地图上显示标记
- 使用数据库中的两个变量在jqplot中显示图形
