Category filter to select column
by nickdunbar
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
</script>
<div id="dashboard">
<div id="Filter1_div"></div>
<h4 id="title"></h4>
<div id="chart_div"></div>
</div>
JavaScript
google.load('visualization', '1', {
packages: ['controls']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1-McDAQ_77-WnqjMcka1eu9ZO_U35kzcy3C-idbbqJ8Y/edit?usp=sharing');
query.send(handleQueryResponse);
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var columnsTable = new google.visualization.DataTable();
var initState = {
selectedValues: []
};
var members = data.getNumberOfRows();
console.log(members);
var numberofmetrics = (data.getNumberOfColumns() - 3) / 2;
console.log(numberofmetrics);
var metrics = new Array(numberofmetrics);
for (var i = 0; i < numberofmetrics; i++) {
metrics[i] = data.getValue(i, data.getNumberOfColumns() - 1);
console.log(metrics[i]);
}
var label1 = data.getColumnLabel(4);
var label2 = data.getColumnLabel(4 + numberofmetrics);
var label3 = data.getColumnLabel(data.getNumberOfColumns() - 2);
var label4 = data.getColumnLabel(1);
columnsTable.addColumn('string', 'member');
columnsTable.addColumn('number', label1);
columnsTable.addColumn('number', label2);
columnsTable.addColumn('string', label3);
columnsTable.addColumn('number', label4);
columnsTable.addColumn({
type: 'string',
role: 'style'
});
console.log(metrics);
for (var i = 0; i < members; i++) {
columnsTable.addRow([
data.getValue(i, 0),
data.getValue(i, 4),
data.getValue(i, 4 + numberofmetrics),
data.getValue(i, data.getNumberOfColumns() - 2),
...