CategoryFilter as column selector

This fiddle uses a Google Visualization API CategoryPicker control to change the columns in a Visualization API chart.

by khemikal

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="colFilter_div"></div>
<div id="chart_div"></div>

JavaScript

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Status');
    data.addColumn('number', '23');
    data.addColumn('number', '24');
    data.addColumn('number', '25');
    data.addColumn('number', '36');
    data.addRows([
        ['Not Started',  45, 23, 89, 100],
        ['In Progress',  155, 23, 79, 24],
        ['Ready',  35, 36, 50, 53],
        ['Pushed',  105, 23, 19, 82],
        ['Bridged',  120, 24, 14, 67]
    ]);

    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)]);
        // you can comment out this next line if you want to have a default selection other than the whole list
        initState.selectedValues.push(data.getColumnLabel(i));
    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));
    
    var chart = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'ADS Status',
            width: 600,
            height: 400
        }
    });
    
    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Department',
                allowTyping: false,
                allowMultiple: true,
                allowNone:...