categorypicker in dashboard example with multiple columns

by forssux

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="dashboard">
    <div id="control2"></div>
    <div id="chart2"></div>
    <div id="chart4"></div>
    <div id="categoryPick2"></div>
    <div id="lineChart"></div>
    <div id="table2"></div>
</div>

JavaScript

function drawVisualization() {
    //var listOfValues = document.getElementById("id1").value ;
    var listOfValues = '2010,84,65,45,facebook,bad,12345-2011,64,75,85,facebook,bad,2345-2012,66,76,88,facebook,good,2345-',
        myData = [[
            {label: 'Year', type: 'number'},
            {label: 'Positive', type: 'number'},
            {label: 'Negative', type: 'number'},
            {label: 'Neutral', type: 'number'},
            {label: 'Comments', type: 'string'},
            {label: 'Status', type: 'string'},
            {label: 'Score', type: 'number'}
        ]],
        temp = listOfValues.split("-"),
        temp2,
        row;
    for(var i = 0; i < temp.length; i++){
        temp2 = temp[i].split(',');
        if (temp2.length == 7) {
            row = [];
            for (var j = 0; j < temp2.length; j++) {
                if (temp2[j] == parseInt(temp2[j])) {
                    row.push(parseInt(temp2[j]));
                }
                else if (temp2[j] == parseFloat(temp2[j])) {
                    row.push(parseFloat(temp2[j]));
                }
                else {
                    row.push(temp2[j]);
                }
            }
            myData.push(row);
        }
    }
    
    // Prepare the data
    var data = google.visualization.arrayToDataTable(myData);
    
    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'control2',
        'options': {
            'filterColumnLabel': 'Year',
            'ui': {
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true
            }
        }
    });
    
    // Define a category picker control for the Gender column
    var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'categoryPick2',
       ...