Sorry for late reply... and thx for your help
I newbie in this course. Now I'm try to figure out how to add one more
column as a string, but I face a problem in Column filter
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Year');
data.addColumn('number', 'Foo');
data.addColumn('number', 'Bar');
data.addColumn('number', 'Baz');
data.addColumn('number', 'Cad');
data.addRows([
['AA', '2005', 45, 60, 89, 100],
['AA', '2006', 155, 50, 79, 24],
['AA', '2007', 35, 31, 140, 53],
['AA', '2008', 105, 23, 43, 82],
['AA', '2009', 120, 56, 21, 67],
['AA', '2010', 65, 19, 34, 134],
['AA', '2011', 80, 23, 130, 40],
['AA', '2012', 70, 140, 83, 90],
['BB', '2005', 45, 60, 89, 100],
['BB', '2006', 155, 50, 79, 24],
['BB', '2007', 35, 31, 140, 53],
['BB', '2008', 105, 23, 43, 82],
['BB', '2009', 120, 56, 21, 67],
['BB', '2010', 65, 19, 34, 134],
['BB', '2011', 80, 23, 130, 40],
['BB', '2012', 70, 140, 83, 90]
]);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
initState.selectedValues.push(data.getColumnLabel(i));
}
var chart = new google.visualization.ChartWrapper({
chartType: 'BarChart',
containerId: 'chart_div',
options: {
title: 'Foobar',
width: 600,
height: 400
}
});
var NamerFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'NameFilter_div',
options: {
filterColumnLabel: 'Name',
ui: {
label: 'Name',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
}
});
var yearFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'yearFilter_div',
options: {
filterColumnLabel: 'Year',
ui: {
label: 'Year',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('dash_div'));
dashboard.bind([NamerFilter], [chart]);
dashboard.bind([yearFilter], [chart]);
dashboard.draw(data);
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
google.visualization.events.addListener(columnFilter, 'statechange',
function () {
var state = columnFilter.getState();
var row;
var columnIndices = [0];
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value:
state.selectedValues[i]}])[0];
columnIndices.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
columnIndices.sort(function (a, b) {
return (a - b);
});
chart.setView({columns: columnIndices});
chart.draw();
});
columnFilter.draw();
}
<https://lh3.googleusercontent.com/-Ei4TUMm-Emg/UV6y73SpadI/AAAAAAAAAzk/Y4G_51CUnuQ/s1600/Picture.JPG>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
