Google シートへの 2 つのクエリを使用して、2 つのグラフと 2 つのコントロールラッパーを含む Google Charts ダッシュボードをセットアップしようとして問題が発生しました。
ここでは、単一のソースから複数のグラフを作成したり、複数のグラフに対して複数のクエリを実行したり、コントロールの側面がないことを示す多くの例を見てきました。
私は最終的に、単一の Google シートの 2 つのクエリを実行しようとしています。各クエリは、クエリ文字列に基づいてシートから異なるデータ セットを取得し、データをグラフに表示します。また、データ テーブルからデータを選択する filterColumn コントロール ラッパーもあります。
1 つのクエリとグラフで機能する次のコードがあります。1 つのページに両方を表示できるようにプロセスを 2 倍にしようとすると、どちらか一方のグラフが表示されますが、両方は表示されません。これはクエリ間の競合に関係している可能性があると思いますが、理解できません。google.setOnLoadCallback 関数によって開始される両方のクエリを実行する 1 つの関数を作成してみました。しかし、それはうまくいきませんでした。他の例をガイドとして使用してさまざまなパーツを組み合わせようとしましたが、うまくいきません。これは最も近いバージョンです。連続して数回更新すると、1 つのグラフが読み込まれる場合と、別のグラフが読み込まれる場合がありますが、両方が読み込まれることはありません。
誰かが私を正しい方向に向けることができれば、私はそれを感謝します.
<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>