Click on legend hide / show lines in line chart using google-chart API.

Google Line chart visualization events example.

I have found some example to show / hide lines in Google line chart.

Here is the code follows:

HTML CODE:::

 <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript Code:::

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales', 'Expenses'],

          ['2004',  1000,      400],

          ['2005',  1170,      460],

          ['2006',  660,       1120],

          ['2007',  1030,      540]

        ]);

        var options = {

          title: 'Company Performance',

         

        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

    var columns = [];

    var series = {};

    for (var i = 0; i < data.getNumberOfColumns(); i++) {

        columns.push(i);

        if (i > 0) {

            series[i - 1] = {};

        }

    }

    

    var options = {

        width: 600,

        height: 400,

        series: series

    }

    

    google.visualization.events.addListener(chart, 'select', function () {

        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 (typeof sel[0].row === 'undefined') {

                var col = sel[0].column;

                if (columns[col] == col) {

                    // hide the data series

                    columns[col] = {

                        label: data.getColumnLabel(col),

                        type: data.getColumnType(col),

                        calc: function () {

                            return null;

                        }

                    };

                    

                    // grey out the legend entry

                    series[col - 1].color = '#CCCCCC';

                }

                else {

                    // show the data series

                    columns[col] = col;

                    series[col - 1].color = null;

                }

                var view = new google.visualization.DataView(data);

                view.setColumns(columns);

                chart.draw(view, options);

            }

        }

    });

      

      }

Here is the example jsfiidle link ::: http://jsfiddle.net/xDUPF/4/light/