Show/hide lines in Google Chart and show grayed text in legend - google-visualization

Question

Trying to do a chart to show/hide the lines on click (I think the original code is from #asgallant), but it only works after the first interaction.
PS.: Is it possible to gray out the text in the legend too?
FIDDLE
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([
['Time', 'One', 'Two', 'Three', 'Four', 'Five'],
['05/2013', 0, 3, 0, 0, 8],
['06/2013', 0, 3, 1, 0, 7],
['07/2013', 0, 3, 1, 0, 7],
['08/2013', 0, 3, 1, 0, 7],
['09/2013', 0, 3, 1, 0, 7],
['10/2013', 0, 3, 1, 0, 7],
['11/2013', 0, 3, 1, 0, 7],
['12/2013', 0, 3, 1, 0, 7],
['01/2014', 0, 3, 1, 0, 7],
['02/2014', 0, 3, 1, 0, 7],
['03/2014', 0, 3, 1, 0, 7],
['04/2014', 0, 2, 1, 0, 7],
['05/2014', 0, 2, 1, 0, 7]
]);
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 = {
chartArea: {width: '80%', height: '70%'},
fontSize: ['13'],
lineWidth: 3,
pointSize: 10,
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 (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);
}
}
});
}