I have a google combochart with two graphs (bar chart and area chart). (see code below)
What I want to do is a "highlight effect on graphs", I mean how to make one graph or the other more transparent depending on the mouseover event.
In other words:
I thought about something like google.visualization.events.addListener(chart, 'onmouseover', function (e){} but I didn't manage to implement it.
Hope to be clear enough, thanks for your help !
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Average'],
['2004/05', 165, 614.6],
['2005/06', 135, 682],
['2006/07', 157, 623],
['2007/08', 139, 609.4],
['2008/09', 136, 569.6]
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
seriesType: 'bars',
series: {
0: {
targetAxisIndex: 0,
type: 'area'
},
1: {
targetAxisIndex: 1,
},
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>