1
私は複数の選択肢（チェックボックス）質問のデータを持っています - データは人が1つ以上のオプションを選択できないように構造化されています。複数の列に保存されます。私はコントロールラッパーを使用してGoogleのグラフを構築しようとしているので、フィルタリング可能ですが、同時に、カウントの代わりにパーセンテージを使用してグラフを作成したいと思います。そして、ベース（または分母）が私のデータでは、ベース/分母は8です（8人だけがこの質問に答えました、2人は空白/答えられませんでした）各オプションのパーセンテージを計算して1つの棒グラフですべてのオプションをグラフ化するために、各列の各yesの数を8で割って欲しいと思います。データはこのスプレッドシートにあります。 https://docs.google.com/spreadsheets/d/19VWNZkHG5GEuYCibDmtOlKblKiOWcx94Wi9jyuhvEUo/edit#gid=0複数選択肢質問のコントロールラッパーを使用するGoogleグラフ
同じ出力シートを同じシートに保存しました。 @WhiteHatはデータの集計に役立ちました（そして私は彼がここに正しい方向に導いてくれて大変感謝しています!!!）。データビューでは希望の列を持つ新しいデータビューを作成したとき、エラーメッセージ "指定された軸のすべての系列が同じデータ型でなければなりません"が表示されます。
これまでの私のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/19VWNZkHG5GEuYCibDmtOlKblKiOWcx94Wi9jyuhvEUo/edit?gid=0&range=A:H');
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {return; }
var data = response.getDataTable();
// Define category pickers for All Filters
var CardTier = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'CardTier Filter',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var Campaign = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Campaign Filter',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': options_Column
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, {
calc: function (dt, row) {
var answered = 0;
var q1_1 = dt.getValue(row, 3) || '';
var q1_2 = dt.getValue(row, 4) || '';
var q1_3 = dt.getValue(row, 5) || '';
var q1_4 = dt.getValue(row, 6) || '';
if ((q1_1 !== '') || (q1_2 !== '') || (q1_3 !== '') || (q1_4 !== '')) {
answered = 1;
}
return answered;
},
label: 'Answered',
type: 'number'
}]);
var totalAnswered = google.visualization.data.group(
view,
[{column: 0, type: 'string', modifier: function() {return 'Total';}}],
[{
column: view.getNumberOfColumns() - 1,
type: 'number',
label: view.getColumnLabel(view.getNumberOfColumns() - 1),
aggregation: google.visualization.data.sum
}]
);
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'proxyTable',
dataTable: view
});
proxyTable.draw();
document.getElementById('proxyTableTotal').innerHTML = 'Total Answered = ' + totalAnswered.getValue(0, 1);
// create a "ready" event handler for proxyTable the handles data aggregation and drawing barChart
// Add The question's column index here. We want to draw Status so we Group 2 with dt and also its count...
google.visualization.events.addListener(proxyTable, 'ready', function() {
var formatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
var formatPercent = new google.visualization.NumberFormat({
pattern: '0.0%'
});
var dataTable = proxyTable.getDataTable();
var view2 = new google.visualization.DataView(proxyTable);
view.setColumns([3, 4, 5, 6, {
calc: function (dt, row) {
var amount = dt.getValue(row, 1);
var percent = 0;
if (totalAnswered.getValue(0, 1) > 0) {
percent = amount/totalAnswered.getValue(0, 1);
}
return {
v: percent,
f: formatPercent.formatValue(percent)
};
},
type: 'number',
label: 'Percent'
}, {
calc: function (dt, row) {
var amount = dt.getValue(row, 1);
var percent = 0;
if (totalAnswered.getValue(0, 1) > 0) {
percent = amount/totalAnswered.getValue(0, 1);
}
return 'N=' + formatShort.formatValue(amount) + ' (' + formatPercent.formatValue(percent) + ')';
},
type: 'string',
role: 'annotation'
}]);
// after grouping, the data will be sorted by column 0, then 1, then 2
// if you want a different order, you have to re-sort
barChart.setDataTable(view2);
barChart.draw();
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the controls :
bind(CardTier, Campaign).
bind(Campaign, proxyTable).
// Draw the dashboard
draw(data);
}
}
google.load('visualization', '1', {packages:['corechart', 'controls', 'table'], callback: drawVisualization});
</script>
</head>
<body>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</table>
<div id="proxyTable" ></div>
<div id="proxyTableTotal" ></div>
</div>
</body>
</html>
は、事前に任意の助けをありがとう！ここでビュー
を作成した後
を参照してください。どうもありがとうございました。私はあなたがGoogle VisualizationとChart Wrapperのメソッドのトップレベルの専門家だと感じています。このフィールドに賞があれば、間違いなくあなたに行くはずです!!どうもありがとうございました！！！ – user1577617