Search All Columns in Table with one StringFilter Control

This fiddle demonstrates how to search a table for any string in any column with a single control.

by Alex Azuero

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="filter_div"></div>
    <div id="table_div"></div>
</div>
<br />
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to search all columns in a table with one StringFilter Control</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

JavaScript

function drawVisualization() {
    // Prepare the data
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name 1');
    data.addColumn('string', 'Name 2');
    data.addRows([
        ['foo', 'bar'],
        ['foo', 'baz'],
        ['bar', 'baz'],
        ['bar', 'bat'],
        ['bar', 'cad'],
        ['bat', 'fiz'],
        ['qud', 'raf']
    ]);
    
    // create a list of columns for the dashboard
    var columns = [{
        // this column aggregates all of the data into one column
        // for use with the string filter
        type: 'string',
        calc: function (dt, row) {
            for (var i = 0, vals = [], cols = dt.getNumberOfColumns(); i < cols; i++) {
                vals.push(dt.getFormattedValue(row, i));
            }
            return vals.join('\n');
        }
    }];
    for (var i = 0, cols = data.getNumberOfColumns(); i < cols; i++) {
        columns.push(i);
    }
    
    // Define a slider control for the 'Donuts eaten' column
    var filter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'filter_div',
        options: {
            filterColumnIndex: 0,
            matchType: 'any',
            caseSensitive: false,
            ui: {
                label: 'Search table:'
            }
        },
        view: {
            columns: columns
        }
    });
    
    // Define a pie chart
    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: {
            
        },
        view: {
            columns: [1, 2]
        }
    });
    
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dashboard.bind([filter], [table]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawVisualization});