javascript - How to use Google Charts api Control Wrapper for header column filter? - Stack Overflow

In my script I add the series of name-values to the data column. as Follows

for (var colmnName in MyResultHeader){
     data.addColumn('number', colmnName);

}

I want the users to be able to filter by these columns for example

A  | B | C  | D
12 | 2 | 21 | 32
43 | 12| 23 | 21

How Can I add a Filter that has a dropdown (A,B,C,D) , So the selected the column will display on the chart?

ControlWrapper enforces us to mentions options': 'filterColumnIndex':

In my script I add the series of name-values to the data column. as Follows

for (var colmnName in MyResultHeader){
     data.addColumn('number', colmnName);

}

I want the users to be able to filter by these columns for example

A  | B | C  | D
12 | 2 | 21 | 32
43 | 12| 23 | 21

How Can I add a Filter that has a dropdown (A,B,C,D) , So the selected the column will display on the chart?

ControlWrapper enforces us to mentions options': 'filterColumnIndex':

• javascript
• google-visualization

Share Improve this question Follow asked Jun 18, 2013 at 5:48 Njax3SmmM2x2a0Zf7HpdNjax3SmmM2x2a0Zf7Hpd 1,37444 gold badges2323 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

There is no direct support in Google Charts to let developers build controls such that users can select columns, but you can build it using a CategoryFilter as shown in this example by Andrew Gallant: http://jsfiddle/asgallant/WaUu2/

Here is the essence of that idea:

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 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();