Google line chart hide lines by click legend
by liggth
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="chart_div" height="700px" width="1800px"></div>
JavaScript
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable([
['x', 'y1', 'y2', 'y3'],
[1, 2, 3, 4],
[2, 3, 1, 5],
[3, 1, 4, 2],
[4, 2, 2, 1],
[5, 3, 1, 4]
]);
var options = {
hAxis: {
title: 'Datetime',
format: 'M/d/yy HH:mm:ss'
},
vAxis: {
title: 'Temperature (°C)'
},
width: '100%',
height: 500
};
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 = {
hAxis: {
title: 'Datetime'
},
vAxis: {
title: 'Temperature (°C)'
},
width: "100%",
height: 500,
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...