Checkbox selection of series

by dlaliberte

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<ul id="series" style="list-style: none">
    <li><input type="checkbox" name="series" value="1" checked="true" /> Series 1</li>
    <li><input type="checkbox" name="series" value="2" checked="true" /> Series 2</li>
    <li><input type="checkbox" name="series" value="3" checked="true" /> Series 3</li>
</ul>
<div id="chart_div"></div>

JavaScript

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Item');
    data.addColumn('number', 'Series 1');
    data.addColumn('number', 'Series 2');
    data.addColumn('number', 'Series 3');
    
    data.addRows([
        [0, 2, 1, 5],
        [1, 3, 7, 2],
        [2, 5, 4, 7],
        [3, 4, 6, 2],
        [4, 1, 5, 8]
    ]);
    
    var view = new google.visualization.DataView(data);

    var seriesColors = ['blue', 'red', 'orange'];
       
    var chart = new google.visualization.LineChart($('#chart_div')[0]);
    chart.draw(view, {
        strictFirstColumnType: true,
        colors: seriesColors
    });

    $('#series').find(':checkbox').change(function () {
        var cols = [0];
        var colors = [];   
        $('#series').find(':checkbox:checked').each(function () {
            console.log(this);
            var value = parseInt($(this).attr('value'));
            cols.push(value);
            colors.push(seriesColors[value - 1]);
            console.log(value, 'colors: ', colors);
        });
        view.setColumns(cols);
        
        chart.draw(view, {
            strictFirstColumnType: true,
            colors: colors
        });
    });
    
    google.visualization.events.addListener(chart, 'select', function() {
        var selection = chart.getSelection();
        if (selection.length > 0) {
            alert('selected series: ' + selection[0].column);
        }
    });
     
}