CategoryFilter as column selector

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>

JavaScript

google.load('visualization', '1', {packages: ['controls']});
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]
//    ]);
function drawChart() {
    ///// getting the data ////////

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XGqGIs36krgKbRjufKJJNRdu1NUBZlgIJek2ojnOo2Y/edit#gid=967698286');

    // Apply query language statement.
    query.setQuery('SELECT A,B,C  ORDER BY C');

    // Send the query with a callback function.
    query.send(handleQueryResponse);


}

///// ----------------------- //////
    
    function handleQueryResponse(response) {
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();
    
    
    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
       ...