Google Line Chart Legend Click Events

Question

I want to hide the line in Line chart when ever the user clicks on the Line Chart legend. Is there any way that I can do it in Google Chart API ? I seen this feature on Highcharts.

Answer 1

Yes it is possible. Here is an example by asgallant:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'City');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Baz');
    data.addRow(['Boston', 5, null, 7, null, 2, null]);
    data.addRow(['New York', 4, null, 8, null, 5, null]);
    data.addRow(['Baltimore', 6, null, 2, null, 4, null]);

    /*  define the series object
     *  follows the standard 'series' option parameters, except it has two additonal parameters:
     *    hidden: true if the column is currently hidden
     *    altColor: changes the color of the legend entry (used to grey out hidden entries)
     */
    var series = {
        0: {
            hidden: false,
            visibleInLegend: false,
            color: '#FF0000'
        },
        1: {
            hidden: false,
            color: '#FF0000',
            altColor: '#808080'
        },
        2: {
            hidden: false,
            visibleInLegend: false,
            color: '#00FF00'
        },
        3: {
            hidden: false,
            color: '#00FF00',
            altColor: '#808080'
        },
        4: {
            hidden: false,
            visibleInLegend: false,
            color: '#0000FF'
        },
        5: {
            hidden: false,
            color: '#0000FF',
            altColor: '#808080'
        }
    };
    var options = {
        series: series,
        height: 400,
        width: 600
    };

    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'select', function () {
        // if row is undefined, we clicked on the legend
        if (typeof chart.getSelection()[0]['row'] === 'undefined') {
            // column is the DataView column, not DataTable column
            // so translate and subtract 1 to get the series index
            var col = view.getTableColumnIndex(chart.getSelection()[0]['column']) - 1;

            // toggle the selected column's data counterpart visibility
            series[col - 1].hidden = !series[col - 1].hidden;

            // swap colors
            var tmpColor = series[col].color;
            series[col].color = series[col].altColor;
            series[col].altColor = tmpColor;

            // reset the view's columns
            view.setColumns([0,1,2,3,4,5,6]);

            // build list of hidden columns and series options
            var hiddenCols = [];
            options.series = [];
            for (var i = 0; i < 6; i++) {
                if (series[i].hidden) {
                    // add 1 to the series index to get DataTable column
                    hiddenCols.push(i + 1);
                }
                else {
                    options.series.push(series[i]);
                }
            }

            // hide the columns and draw the chart
            view.hideColumns(hiddenCols);
            chart.draw(view, options);
        }
    });

    chart.draw(view, options);
}