CategoryFilter as column selector 2 tables

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

by forssux

HTML

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

JavaScript

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


function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005', 45, 60, 89, 100],
        ['2006', 155, 50, 79, 24],
        ['2007', 35, 31, 140, 53],
        ['2008', 105, 23, 43, 82],
        ['2009', 120, 56, 21, 67],
        ['2010', 65, 19, 34, 134],
        ['2011', 80, 23, 130, 40],
        ['2012', 70, 140, 83, 90]
    ]);
    var table1 = new google.visualization.Table(document.getElementById('table1_div'));
    table1.draw(data, {});
    
    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: 'BarChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType:...