toggle hide/show series in google chart

Question

I have a google line chart that will have some series, and i would like to show / hide the serie by clicking in the legend.
I'm really stuck and the examples i've found on internet just doesnt work when i try to implement.

This code is hiding a "day column", but i want to hide the whole serie from value 1

that's how far i got :

and after trigger the selection event

    $(function() {
        if (typeof Adianti.chartsQueue == 'undefined')
        {
            Adianti.chartsQueue = new Array;
        }
        function render_charts()
        {
            Adianti.chartsLoaded = true;
            while (Adianti.chartsQueue.length > 0)
            {
                next = Adianti.chartsQueue.shift();
                next();
            }
        }
        
        var render_line_chart = function() {
            var data = google.visualization.arrayToDataTable( {$data|raw} );
            var options = {
              title : '{$title}',
              vAxis: {title: '{$ytitle}'},
              hAxis: {title: '{$xtitle}'},
              seriesType: 'lines'
            };

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

            //view.setRows([0,1,2,3,4,5,6,7,8,9])

            var chart = new google.charts.Line(document.getElementById('chart_line_div_{$uniqid}'));

            google.visualization.events.addListener(chart, 'select', function () {
              //var target = chart.getSelection();

              //teste = chart.getSelection();

              //view.setColumns([0,1,3])
              view.hideRows(0,0)
              //view.hideRows(0);

              chart.draw(view, options);
            });
            //chart.draw(data, options);
            chart.draw(view, options);

        };
            

        if (Adianti.chartsQueue.length == 0) {
            Adianti.chartsQueue.push( render_line_chart );
            
            if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
                jQuery.ajax({
                        type: "GET",
                        url: "https://www.gstatic.com/charts/loader.js",
                        success: function() {
                            google.charts.load('current', {'packages':['bar', 'line', 'corechart']});
                            google.charts.setOnLoadCallback(render_charts);
                        },
                        dataType: "script",
                        cache: true
                });

            }
            else {
                render_charts();
                

            }
        }
        else
        {
            Adianti.chartsQueue.push( render_line_chart );
        }





    });

Answer 1

Based on this post

in ' Rony SP ' answer fiddle, i found my way to implement in my code .

Result :

    $(function() {
                if (typeof Adianti.chartsQueue == 'undefined')
                {
                    Adianti.chartsQueue = new Array;
                }
                function render_charts()
                {
                    Adianti.chartsLoaded = true;
                    while (Adianti.chartsQueue.length > 0)
                    {
                        next = Adianti.chartsQueue.shift();
                        next();
                    }
                }
                
                var render_line_chart = function() {
                    var data = google.visualization.arrayToDataTable( {$data|raw} );
                    var series = {};
                    for (var i = 0; i < data.getNumberOfColumns(); i++) {
                        if (i > 0) {
                            series[i - 1] = {};
                        }
                    }                
                    var options = {
                      title : '{$title}',
                      vAxis: {title: '{$ytitle}'},
                      hAxis: {title: '{$xtitle}'},
                      seriesType: 'lines',
                      series:series
                    };


                    var view = new google.visualization.DataView(data);
                    var chart = new google.charts.Line(document.getElementById('chart_line_div_{$uniqid}'));

                    google.visualization.events.addListener(chart, 'select', function () {
                        var target = chart.getSelection()[0]
                        if(chart.getSelection().length > 0)
                        { 
                            if (target.row === null)
                            {   
                                var col = target.column
                                if (view.columns[col] == col) 
                                {   
                                    view.columns[col] = {
                                        label: data.getColumnLabel(col),
                                        type: data.getColumnType(col),
                                        calc: function () {
                                            return null;
                                        }
                                    }
                                    series[col - 1].color = '#CCCCCC';
                                }else{
                                    view.columns[col] = col;
                                    series[col - 1].color = null;
                                }
                            }
                            view.setColumns(view.columns);
                            chart.draw(view, options);                    
                        } 

                    });
                    chart.draw(view, options);
                };
                    

                if (Adianti.chartsQueue.length == 0) {
                    Adianti.chartsQueue.push( render_line_chart );
                    
                    if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
                        jQuery.ajax({
                                type: "GET",
                                url: "https://www.gstatic.com/charts/loader.js",
                                success: function() {
                                    google.charts.load('current', {'packages':['bar', 'line', 'corechart']});
                                    google.charts.setOnLoadCallback(render_charts);
                                },
                                dataType: "script",
                                cache: true
                        });

                    }
                    else {
                        render_charts();
                        

                    }
                }
                else
                {
                    Adianti.chartsQueue.push( render_line_chart );
                }





            });