'Adding different links to each column (Google Charts)

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>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source