I need to add different links which open another page to every column on a column chart.
Clicks to every different columns should open another window.
My current template only works if columns are seperate from each other, i want to have it works even columns are contiguous.
My current template is that:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['test', 'test', 'test', 'test', {
role: 'link'
}],
['test', 0.60, 0.62, 0.64, 'link'],
['test', 0.38, 0.53, 0.56, 'link'],
['test', 0.46800, 0.52100, 0.55500, 'link'],
['test', 0.43300, 0.49700, 0.53900, 'link']
]);
var options = {
title: 'test',
subtitle: 'test',
chartArea: {
width: '100%'
},
hAxis: {
title: 'test',
},
vAxis: {
title: 'test',
format: 'percent'
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
google.visualization.events.addListener(chart, 'select', function(e) {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
let link = data.getValue(row, 2);
window.open(link, '_blank');
}
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>