CategoryPickers as axes selectors

This fiddle uses a Google Visualization API CategoryPickers to select the columns used to determine the axes in a chart.

by secretgspot

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="controls">
    <div id="xAxisFilter_div"></div>
    <div id="yAxisFilter_div"></div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div id="chart_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 make CategoryPickers act as axes selectors</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

#xAxisFilter_div {
    float: left;
    width: 200px;
    display: inline-block;
}
#yAxisFilter_div {
    width: 200px;
    display: inline-block;
}
.clear {
    clear: both;
    display: none;
}

JavaScript

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

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        [45, 60, 89, 100],
        [155, 50, 79, 24],
        [35, 31, 140, 53],
        [105, 23, 43, 82],
        [120, 56, 21, 67],
        [65, 19, 34, 134],
        [80, 23, 130, 40],
        [70, 140, 83, 90]
    ]);

    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    
    // put the columns into this data table
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
    }
    
    var chart = new google.visualization.ChartWrapper({
        chartType: 'ScatterChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });
    
    var xAxisFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'xAxisFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'X-axis',
                allowTyping: false,
                allowMultiple: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: {
            selectedValues: ['Foo']
        }
    });
    
    var yAxisFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'yAxisFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Y-axis',
               ...