Reputation: 1931
Using the following google chart how would I go about hiding a line by clicking the legend? It currently has two lines Elec and Gas I would like to be able to hide or show each one based on clicking the corresponding legend. I understand I have to add an event listener function to the chart but Im kinda lost on how to do that on this particular chart. The example i can find are done slightly differently.
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Electricity', 'Gas'],
[new Date('2017-05-01'), 12.903, 4.624],
[new Date('2017-05-02'), 15.82, 34.4],
[new Date('2017-05-03'), 9.087, 29.542],
[new Date('2017-05-04'), 11.094, 18.003],
[new Date('2017-05-05'), 10.709, 16.573],
[new Date('2017-05-06'), 10.547, 67.86],
[new Date('2017-05-07'), 22.491, 4.011],
[new Date('2017-05-08'), 14.245, 14.898],
[new Date('2017-05-09'), 0, 0],
[new Date('2017-05-10'), 0, 0],
[new Date('2017-05-11'), 0, 0],
[new Date('2017-05-12'), 0, 0],
[new Date('2017-05-13'), 0, 0],
[new Date('2017-05-14'), 0, 0],
[new Date('2017-05-15'), 0, 0],
[new Date('2017-05-16'), 0, 0],
[new Date('2017-05-17'), 0, 0],
[new Date('2017-05-18'), 0, 0],
[new Date('2017-05-19'), 0, 0],
[new Date('2017-05-20'), 0, 0],
[new Date('2017-05-21'), 0, 0],
[new Date('2017-05-22'), 0, 0],
[new Date('2017-05-23'), 0, 0],
[new Date('2017-05-24'), 0, 0],
[new Date('2017-05-25'), 0, 0],
[new Date('2017-05-26'), 0, 0],
[new Date('2017-05-27'), 0, 0],
[new Date('2017-05-28'), 0, 0],
[new Date('2017-05-29'), 0, 0],
[new Date('2017-05-30'), 0, 0],
[new Date('2017-05-31'), 0, 0],
]);
var dateRange = data.getColumnRange(0);
var oneDay = (1000 * 60 * 60 * 24);
var ticksAxisH = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
// add tick every 3 days
if ((((i - dateRange.min.getTime()) / oneDay) % 3) === 0) {
ticksAxisH.push(new Date(i));
}
}
// ensure last day is added
if (ticksAxisH[ticksAxisH.length - 1].getTime() !== dateRange.max.getTime()) {
ticksAxisH.push(dateRange.max);
}
var options = {
chartArea: {
width: "80%"
},
width: 900,
height: 500,
hAxis: {
title: 'Daily Total',
viewWindowMode: 'pretty',
ticks: ticksAxisH,
slantedText: false,
format: 'd MMM yy',
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false,
textAlign: 'right'
},
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
},
vAxis: {
title: 'kWh',
titleTextStyle: {
color: 'black',
fontSize: 16,
fontName: 'Arial',
bold: true,
italic: false
},
textStyle: {
color: 'black',
fontSize: 12,
fontName: 'Arial',
bold: true,
italic: false
},
},
legend: {
position: 'top',
width: "90%"
},
backgroundColor: '#fff',
colors: ['#f36daa', '#51b9d2'],
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-tab-2'));
chart.draw(data, options);
}
Upvotes: 1
Views: 5263
Reputation: 1931
I was able to achieve it by adding the following code to the char. See this question and answer for details Show/hide lines/data in Google Chart
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 = 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);
}
}
});
Upvotes: 6