Google Charts API: Show/Hide Series on Legend Click. How? 구글차트 범례 클릭해서 차트 넣고 빼기

stackoverflow.com/questions/22777344/google-charts-api-show-hide-series-on-legend-click-how

Google Charts API: Show/Hide Series on Legend Click. How?

jsfiddle.net/asgallant/6gz2Q/60/

Show/hide columns by clicking on legend labels - JSFiddle - Code Playground

<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 turn on or off data series by clicking on legend entries</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>

 

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');
    data.addColumn('number', 'y3');
    // add random data
    var y1 = 50, y2 = 50, y3 = 50;
    for (var i = 0; i < 100; i++) {
        y1 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        y2 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        y3 += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        data.addRow([i, y1, y2, y3]);
    }
    
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    
    // create columns array
    var columns = [];
    // display these data series by default
    var defaultSeries = [1, 3];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        if (i == 0 || defaultSeries.indexOf(i) > -1) {
            // if the column is the domain column or in the default list, display the series
            columns.push(i);
        }
        else {
            // otherwise, hide it
            columns.push({
                label: data.getColumnLabel(i),
                type: data.getColumnType(i),
                sourceColumn: i,
                calc: function () {
                    return null;
                }
            });
        }
        if (i > 0) {
            columns.push({
                calc: 'stringify',
                sourceColumn: i,
                type: 'string',
                role: 'annotation'
            });
            // set the default series option
            series[i - 1] = {};
            if (defaultSeries.indexOf(i) == -1) {
                // backup the default color (if set)
                if (typeof(series[i - 1].color) !== 'undefined') {
                    series[i - 1].backupColor = series[i - 1].color;
                }
                series[i - 1].color = '#CCCCCC';
            }
        }
    }
    
    var options = {
        width: 600,
        height: 400,
        series: series
    }
    
    function showHideSeries () {
        var sel = chart.getSelection();
        // if selection length is 0, we deselected an element
        if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (sel[0].row == null) {
                var col = sel[0].column;
                if (typeof(columns[col]) == 'number') {
                    var src = columns[col];
                    
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(src),
                        type: data.getColumnType(src),
                        sourceColumn: src,
                        calc: function () {
                            return null;
                        }
                    };
                    
                    // grey out the legend entry
                    series[src - 1].color = '#CCCCCC';
                }
                else {
                    var src = columns[col].sourceColumn;
                    
                    // show the data series
                    columns[col] = src;
                    series[src - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    }
    
    google.visualization.events.addListener(chart, 'select', showHideSeries);
    
    // create a view with the default columns
    var view = new google.visualization.DataView(data);
    view.setColumns(columns);
    chart.draw(view, options);
}

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