Hiding lines google chart by click legend , legend is not grey and troubles when all the lines are hiding

Question

A time ago i asked here how i can hide lines in a google chart when clicking on the legend. now i have found a solution how i can do this and you can see working it on JSFIDDLE but there some little things that doesn't work for example:

When i click on the legend the line were i clicked on is hide so that's good but the sample in the legend is not grey and i don't understand why because it have to be grey
When i hide all the lines and i want to show the lines again , they only are showing at the chartrangefilter like you can see in the JSFIDDLE example so i want that is not possible to hide al the lines that there is for minimum showing one line and otherwise give a warning in a popup box when someone try to hide the last line.

Can someone helps me?

This is the code that i use to hide te line by clicking

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 (sel[0].row === null) {
                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);
            }
        }
    });

WhiteHat · Accepted Answer

although the series object is being built properly,
it is never updated on the chart

need to set the option before re-drawing

chart.setOption('series', series);

see following working snippet...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart', 'controls','line']
});

function drawVisualization() {
  var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard'));

  var control = new google.visualization.ControlWrapper({
   'controlType': 'ChartRangeFilter',
   'containerId': 'control',
   'options': {
     // Filter by the date axis.
     'filterColumnIndex': 0,
     'ui': {
     'chartType': 'LineChart',
     'chartOptions': {
       'chartArea': {'width': '80%'},
       'hAxis': {'baselineColor': 'none', format: "HH:mm" }
       ,'vAxis': {minValue: 0}
     }
     }
   },
   });
     var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"datetime"},{"label":"RPI1","type":"number"},{"label":"RPI2","type":"number"},{"label":"RPI3","type":"number"},{"label":"RPI4","type":"number"},{"label":"RPI5","type":"number"},{"label":"RPI6","type":"number"},{"label":"RPI7","type":"number"},{"label":"RPI8","type":"number"}],"rows":[{"c":[{"v":"Date(2017, 0, 11, 12, 51, 40)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 51, 50)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 1)"},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 11)"},{"v":23},{"v":21},{"v":22},{"v":22},{"v":20},{"v":20},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 22)"},{"v":23},{"v":22},{"v":20},{"v":22},{"v":23},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 32)"},{"v":20},{"v":20},{"v":21},{"v":22},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 42)"},{"v":20},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 53)"},{"v":23},{"v":20},{"v":21},{"v":22},{"v":21},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 3)"},{"v":23},{"v":22},{"v":23},{"v":21},{"v":20},{"v":22},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 13)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":20},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 24)"},{"v":22},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 34)"},{"v":22},{"v":21},{"v":22},{"v":21},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 44)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 55)"},{"v":20},{"v":21},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 5)"},{"v":22},{"v":20},{"v":23},{"v":20},{"v":20},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 15)"},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 26)"},{"v":21},{"v":22},{"v":22},{"v":21},{"v":21},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 36)"},{"v":22},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 46)"},{"v":21},{"v":22},{"v":21},{"v":22},{"v":21},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 57)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 7)"},{"v":23},{"v":20},{"v":21},{"v":20},{"v":22},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 17)"},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 28)"},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23},{"v":21},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 38)"},{"v":23},{"v":22},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 48)"},{"v":23},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 59)"},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 9)"},{"v":23},{"v":23},{"v":23},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 19)"},{"v":20},{"v":21},{"v":23},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 30)"},{"v":23},{"v":21},{"v":22},{"v":21},{"v":22},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 40)"},{"v":21},{"v":20},{"v":22},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 50)"},{"v":23},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 1)"},{"v":23},{"v":20},{"v":21},{"v":21},{"v":21},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 11)"},{"v":21},{"v":22},{"v":21},{"v":20},{"v":22},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 22)"},{"v":23},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 32)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 42)"},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 52)"},{"v":23},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 3)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 13)"},{"v":21},{"v":20},{"v":20},{"v":20},{"v":21},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 23)"},{"v":21},{"v":21},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 34)"},{"v":20},{"v":21},{"v":23},{"v":22},{"v":20},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 44)"},{"v":23},{"v":22},{"v":21},{"v":21},{"v":20},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 54)"},{"v":22},{"v":21},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 5)"},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 15)"},{"v":23},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 26)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 36)"},{"v":21},{"v":20},{"v":21},{"v":22},{"v":20},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 46)"},{"v":20},{"v":21},{"v":22},{"v":23},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 57)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 7)"},{"v":22},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 17)"},{"v":21},{"v":20},{"v":23},{"v":20},{"v":21},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 28)"},{"v":23},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 38)"},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 48)"},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 59)"},{"v":21},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 9)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":22},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 19)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 30)"},{"v":21},{"v":21},{"v":21},{"v":20},{"v":22},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 40)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 50)"},{"v":21},{"v":22},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 1)"},{"v":20},{"v":23},{"v":22},{"v":20},{"v":21},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 11)"},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 21)"},{"v":20},{"v":21},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 32)"},{"v":22},{"v":23},{"v":22},{"v":22},{"v":23},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 42)"},{"v":22},{"v":20},{"v":21},{"v":22},{"v":20},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 52)"},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 39, 50)"},{"v":21},{"v":22},{"v":22},{"v":22},{"v":20},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 0)"},{"v":23},{"v":20},{"v":22},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 10)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":23},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 21)"},{"v":22},{"v":22},{"v":22},{"v":23},{"v":22},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 31)"},{"v":22},{"v":22},{"v":23},{"v":20},{"v":21},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 41)"},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":22},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 51)"},{"v":22},{"v":21},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 3)"},{"v":22},{"v":21},{"v":22},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 13)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":20},{"v":21},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 23)"},{"v":22},{"v":21},{"v":21},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 34)"},{"v":20},{"v":21},{"v":23},{"v":21},{"v":20},{"v":22},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 44)"},{"v":20},{"v":23},{"v":20},{"v":22},{"v":20},{"v":21},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 54)"},{"v":20},{"v":20},{"v":22},{"v":20},{"v":20},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 5)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":22},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 15)"},{"v":21},{"v":20},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 25)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 36)"},{"v":20},{"v":20},{"v":21},{"v":22},{"v":21},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 46)"},{"v":20},{"v":23},{"v":21},{"v":22},{"v":22},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 56)"},{"v":22},{"v":20},{"v":20},{"v":23},{"v":21},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 7)"},{"v":21},{"v":20},{"v":20},{"v":21},{"v":23},{"v":23},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 17)"},{"v":20},{"v":20},{"v":21},{"v":20},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 27)"},{"v":20},{"v":22},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 37)"},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 48)"},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 58)"},{"v":23},{"v":20},{"v":20},{"v":21},{"v":20},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 8)"},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 19)"},{"v":20},{"v":20},{"v":21},{"v":23},{"v":21},{"v":22},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 29)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 39)"},{"v":20},{"v":23},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 50)"},{"v":23},{"v":21},{"v":21},{"v":20},{"v":20},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 0)"},{"v":22},{"v":22},{"v":20},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 10)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 21)"},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 31)"},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 41)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 52)"},{"v":22},{"v":20},{"v":22},{"v":22},{"v":20},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 3)"},{"v":21},{"v":23},{"v":22},{"v":20},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 13)"},{"v":20},{"v":21},{"v":23},{"v":20},{"v":22},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 23)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 34)"},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 44)"},{"v":23},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 54)"},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 5)"},{"v":22},{"v":23},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 15)"},{"v":21},{"v":22},{"v":20},{"v":21},{"v":23},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 25)"},{"v":22},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 36)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":23},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 46)"},{"v":22},{"v":21},{"v":23},{"v":21},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 56)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 7)"},{"v":23},{"v":20},{"v":22},{"v":23},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 17)"},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 28)"},{"v":23},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 38)"},{"v":23},{"v":21},{"v":23},{"v":23},{"v":21},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 48)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 59)"},{"v":21},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 9)"},{"v":21},{"v":22},{"v":23},{"v":20},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 19)"},{"v":23},{"v":21},{"v":21},{"v":22},{"v":23},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 30)"},{"v":23},{"v":23},{"v":22},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 40)"},{"v":21},{"v":23},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 50)"},{"v":22},{"v":22},{"v":20},{"v":23},{"v":22},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 1)"},{"v":20},{"v":22},{"v":23},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 11)"},{"v":23},{"v":20},{"v":21},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 22)"},{"v":23},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 32)"},{"v":23},{"v":20},{"v":20},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 42)"},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 53)"},{"v":21},{"v":21},{"v":22},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 3)"},{"v":20},{"v":20},{"v":23},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 13)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 24)"},{"v":22},{"v":21},{"v":23},{"v":20},{"v":21},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 34)"},{"v":23},{"v":20},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 44)"},{"v":22},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 55)"},{"v":22},{"v":23},{"v":22},{"v":21},{"v":21},{"v":23},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 5)"},{"v":20},{"v":20},{"v":20},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 15)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 26)"},{"v":23},{"v":22},{"v":23},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 36)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":23},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 46)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 57)"},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 7)"},{"v":22},{"v":21},{"v":21},{"v":23},{"v":23},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 17)"},{"v":22},{"v":21},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 28)"},{"v":20},{"v":22},{"v":23},{"v":20},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 38)"},{"v":21},{"v":23},{"v":23},{"v":20},{"v":22},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 48)"},{"v":21},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 59)"},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 9)"},{"v":22},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 19)"},{"v":21},{"v":21},{"v":23},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 30)"},{"v":22},{"v":20},{"v":23},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 40)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 50)"},{"v":22},{"v":20},{"v":20},{"v":22},{"v":21},{"v":20},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 1)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 11)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 21)"},{"v":21},{"v":23},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 32)"},{"v":20},{"v":21},{"v":20},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 43)"},{"v":21},{"v":20},{"v":20},{"v":22},{"v":22},{"v":20},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 53)"},{"v":20},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 4)"},{"v":23},{"v":22},{"v":20},{"v":21},{"v":21},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 14)"},{"v":21},{"v":20},{"v":23},{"v":20},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 24)"},{"v":22},{"v":20},{"v":22},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 35)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 45)"},{"v":21},{"v":22},{"v":21},{"v":21},{"v":20},{"v":21},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 55)"},{"v":21},{"v":23},{"v":21},{"v":23},{"v":21},{"v":21},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 6)"},{"v":23},{"v":21},{"v":20},{"v":21},{"v":22},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 16)"},{"v":22},{"v":21},{"v":20},{"v":21},{"v":22},{"v":20},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 26)"},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 37)"},{"v":20},{"v":22},{"v":20},{"v":21},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 47)"},{"v":21},{"v":21},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 57)"},{"v":20},{"v":23},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 7)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 18)"},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 28)"},{"v":22},{"v":20},{"v":20},{"v":20},{"v":22},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 39)"},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 49)"},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":22},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 59)"},{"v":22},{"v":21},{"v":21},{"v":23},{"v":20},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 10)"},{"v":23},{"v":20},{"v":21},{"v":23},{"v":21},{"v":20},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 20)"},{"v":23},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 30)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":20},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 40)"},{"v":23},{"v":22},{"v":22},{"v":21},{"v":23},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 51)"},{"v":22},{"v":20},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 1)"},{"v":20},{"v":21},{"v":20},{"v":20},{"v":23},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 11)"},{"v":21},{"v":22},{"v":23},{"v":22},{"v":23},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 22)"},{"v":20},{"v":20},{"v":21},{"v":21},{"v":21},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 33)"},{"v":22},{"v":23},{"v":20},{"v":20},{"v":21},{"v":22},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 43)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":20},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 54)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 4)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 14)"},{"v":23},{"v":20},{"v":23},{"v":21},{"v":22},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 24)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":20},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 35)"},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 45)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":22},{"v":23},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 55)"},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 6)"},{"v":23},{"v":22},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 16)"},{"v":21},{"v":20},{"v":21},{"v":21},{"v":21},{"v":22},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 27)"},{"v":20},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 37)"},{"v":21},{"v":21},{"v":23},{"v":21},{"v":22},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 47)"},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 58)"},{"v":21},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 8)"},{"v":21},{"v":22},{"v":23},{"v":22},{"v":20},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 18)"},{"v":21},{"v":22},{"v":20},{"v":20},{"v":21},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 29)"},{"v":23},{"v":22},{"v":20},{"v":22},{"v":22},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 39)"},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 49)"},{"v":22},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 0)"},{"v":21},{"v":22},{"v":22},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 10)"},{"v":23},{"v":22},{"v":23},{"v":22},{"v":23},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 20)"},{"v":23},{"v":20},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 31)"},{"v":20},{"v":23},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":21}]}]})

   var chart = new google.visualization.ChartWrapper({
   'chartType': 'LineChart',
   'containerId': 'chart',
   'options': {
     // Use the same chart area width as the control for axis alignment.
     'chartArea': {'height': '80%', 'width': '80%',interpolateNulls: true},hAxis: {
      title: 'Datetime'
    },
    vAxis: {
      title: 'Temperature (°C)',
      minValue: 0
    },
     pointSize: 3,
   }
   // Convert the first column from 'date' to 'string'.

   });
  /* Change the format of the date column, used in chart, but not chart range filter */
   dashboard.bind(control, chart);
   dashboard.draw(data);

  var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      columns.push(i);
      if (i > 0) {
          series[i - 1] = {};
      }
    }
  google.visualization.events.addListener(chart, 'select', function () {
    var sel = dashboard.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 (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;
        }

        // set series option
        chart.setOption('series', series);

        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        dashboard.bind(control, chart);
        dashboard.draw(view);
      }
    }
  });
}

note: jsapi is not needed to load the library

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

just use...

this will only change the load statement, to...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

(the callback can be added to the load statement as well)

Hiding lines google chart by click legend , legend is not grey and troubles when all the lines are hiding

Answers (1)

Related Questions