Group data after filtering

by Alex Azuero

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="control_div"></div>
    <div id="chart_div"></div>
    <div id="dummy_div"></div>
</div>
<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 group data after filtering</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>

CSS

#dummy_div {
    display: none;
}

JavaScript

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

function drawVisualization() {
    // Prepare the data
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Category');
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    
    // add 100 rows of pseudorandom data
    var foo = 25, bar = 50, baz = 75;
    for (var i = 0; i < 100; i++) {
        foo += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        bar += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        baz += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        if (foo > 100) {
            foo -= 5;
        }
        else if (foo < 0) {
            foo += 5;
        }
        if (bar > 100) {
            foo -= 5;
        }
        else if (bar < 0) {
            foo += 5;
        }
        if (bar > 100) {
            foo -= 5;
        }
        else if (bar < 0) {
            foo += 5;
        }
        data.addRows([
            ['Foo', i, foo],
            ['Bar', i, bar],
            ['Baz', i, baz]
        ]);
    }
    
    // create a control to filter the data
    var control = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                allowMultiple: true
            }
        }
    });
    
    // create a chart
    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
            width: 600,
            height: 400
        }
    });

    // create a dummy chart to serve as a placeholder
    var dummy = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'dummy_div',
        options: {
            width: '300px'
        },
       ...