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();
                        }
                    }

Answer 2

If you don't need to include scaling and animation then one option is just hide data using lineWidth and areaOpacity values;

 <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script>
        function updateTable() {

            // quick data - cleaned up for this example real data sources
            data = new Array();
            data[0] = new Array();
            data[0][0] = "Day";
            data[0][1] = "Metric 1";
            data[0][2] = "Metric 2";
            data[0][3] = "Metric 3";
            data[1] = new Array();
            data[1][0] = 1;
            data[1][1] = 200;
            data[1][2] = 50;
            data[1][3] = 400;
            data[2] = new Array();
            data[2][0] = 2;
            data[2][1] = 440;
            data[2][2] = 140;
            data[2][3] = 40;
            data[3] = new Array();
            data[3][0] = 3;
            data[3][1] = 300;
            data[3][2] = 500;
            data[3][3] = 600;

            var gdata = google.visualization.arrayToDataTable(data);

            var options = {
              // title: 'kala',
              hAxis: {title: 'Days',  titleTextStyle: {color: '#333'}}
              ,vAxis: {minValue: 0}
              ,height: 300
              ,width: 600
              ,chartArea: {left: 60}
              ,lineWidth: 2
              ,series: {0:{color: 'black', areaOpacity: 0.3, lineWidth: 2}
              ,1:{color: 'red', areaOpacity: 0.3, lineWidth: 2}
              ,2:{color: 'purple', areaOpacity: 0.3, lineWidth: 2}}
            };

            var chart = new google.visualization.AreaChart(document.getElementById('my_chart'));
            chart.draw(gdata, options);

            google.visualization.events.addListener(chart, 
                'select', 
                (function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));

    }

    function AreaSelectHander(chart, gdata, options) {
        // when ever clicked we enter here 
        // more code needed to inspect what actually was clicked, now assuming people
        // play nicely and click only lables...
        var selection = chart.getSelection();       
        var view = new google.visualization.DataView(gdata);
        console.log(options);

        // click and data index are one off
        i = selection[0].column - 1;

        // just simple reverse
        if (options.series[i].lineWidth == 0) {
            options.series[i].lineWidth = 2;
            options.series[i].areaOpacity = 0.3;
        }
        else {
            options.series[i].lineWidth = 0;
            options.series[i].areaOpacity = 0.0;            
        }

        chart.draw(gdata, options);
    }
    </script>

    <script type='text/javascript'>
        google.load('visualization', '1', {packages:['table', 'corechart']});
        google.setOnLoadCallback(updateTable);
    </script>

</head>

<body>
    <div id='my_chart'></div>
</body>

Answer 3

To hide show lines on your GWT Visualization LineChart, follow these steps:-

1.Create a DataView object based on an existing DataTable object:

DataTable dataTable = DataTable.create();
DataView dataView = DataView.create(dataTable);

2.Hide the column of the curve/line that you want to hide in the DataView:

dataView.hideColumns(new int[]{<id_of_the_column>});

3.Draw the entire chart again based on the DataView:

chart.draw(dataView, getOptions());

Please note that there is a caveat here, step 3 is a costly step, for us it is taking almost 20-30 sec. for the the new graph to be drawn. But if the data is not large it should be manageable in your context.

Note: You will have to make your own legend with a checkbox and do the above stuff when user checks/unchecks a checkbox.