Google Charts - Hide line when clicking legend key

Question

I\'d like to be able to show/hide the lines on my line graph when clicking the relevant key in the legend, is this possible?

Answer 1

Following code display goggle line chart and have functionality to hide/show graph line by clicking on legend label. #graph_sales_data is id of div which display chart and sales_data_graph is variable containg record.

function drawChart() {
                        if (sales_data_graph.length > 1)
                        {
                            $('#graph_sales_data').show();
                            var data = new google.visualization.arrayToDataTable(sales_data_graph);

                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.ChartWrapper({
                                chartType: 'LineChart',
                                containerId: 'graph_sales_data',
                                dataTable: data,
                                colors: ['#ea6f09', '#fb250d', '#0ac9c6', '#2680be', '#575bee', '#6bd962', '#ff0000', '#000000'],
                                options: {
                                    width: 1200,
                                    height: 500,
                                    fontSize: 10,
                                    pointSize: 10
                                }
                            });

                            // create columns array
                            var columns = [0];
                            /* the series map is an array of data series
                             * "column" is the index of the data column to use for the series
                             * "roleColumns" is an array of column indices corresponding to columns with roles that are associated with this data series
                             * "display" is a boolean, set to true to make the series visible on the initial draw
                             */
                            var seriesMap = [{
                                    column: 1,
                                    roleColumns: [1],
                                    display: true
                                }, {
                                    column: 2,
                                    roleColumns: [2],
                                    display: true
                                }, {
                                    column: 3,
                                    roleColumns: [3],
                                    display: true
                                }, {
                                    column: 4,
                                    roleColumns: [4],
                                    display: true
                                }, {
                                    column: 5,
                                    roleColumns: [5],
                                    display: true
                                }, {
                                    column: 6,
                                    roleColumns: [6],
                                    display: true
                                }, {
                                    column: 7,
                                    roleColumns: [7],
                                    display: true
                                }, {
                                    column: 8,
                                    roleColumns: [8],
                                    display: true
                                }];
                            var columnsMap = {};
                            var series = [];
                            for (var i = 0; i < seriesMap.length; i++) {
                                var col = seriesMap[i].column;
                                columnsMap[col] = i;
                                // set the default series option
                                series[i] = {};
                                if (seriesMap[i].display) {
                                    // if the column is the domain column or in the default list, display the series
                                    columns.push(col);
                                }
                                else {
                                    // otherwise, hide it
                                    columns.push({
                                        label: data.getColumnLabel(col),
                                        type: data.getColumnType(col),
                                        sourceColumn: col,
                                        calc: function() {
                                            return null;
                                        }
                                    });
                                    // backup the default color (if set)
                                    if (typeof(series[i].color) !== 'undefined') {
                                        series[i].backupColor = series[i].color;
                                    }
                                    series[i].color = '#CCCCCC';
                                }
                                for (var j = 0; j < seriesMap[i].roleColumns.length; j++) {
                                    //columns.push(seriesMap[i].roleColumns[j]);
                                }
                            }

                            chart.setOption('series', series);

                            function showHideSeries() {
                                var sel = chart.getChart().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[columnsMap[src]].color = '#CCCCCC';
                                        }
                                        else {
                                            var src = columns[col].sourceColumn;

                                            // show the data series
                                            columns[col] = src;
                                            series[columnsMap[src]].color = null;
                                        }
                                        var view = chart.getView() || {};
                                        view.columns = columns;
                                        chart.setView(view);
                                        chart.draw();
                                    }
                                }
                            }

                            google.visualization.events.addListener(chart, 'select', showHideSeries);

                            // create a view with the default columns
                            var view = {
                                columns: columns
                            };
                            chart.draw();
                        }
                        else
                        {
                            $('#graph_sales_data').hide();
                        }
                    }