Google Timeline Chart with more than one column role - charts

Question

I am trying to draw a timeline chart and add two column roles, one for an HTML link (tooltip column role) and another for styling (style).
I can use either one of them successfully but not both at the same time.
For example, here's a sample of my code:
var container = document.getElementById('mychart');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Position' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'string', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', role: 'tooltip', id: 'link', 'p': {'html': true} });
I believe it has to do with the placement of the columns. In the example above, styling is done correctly but the hyperlink is being formed with the tooltip content instead of the actual column role data I'm passing.
If I remove the style column role the hyperlink works fine, even when placed last in the columns. It's leading me to think that I can't have more than one column role but that's not what the documentation says.
Any clues would be appreciated.

Answer 1

In order to have a column have a clickable hyperlink you an extra piece of code:
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
window.open(dataTable.getValue(selection[0].row, 3), '_blank');
}
});
My single row of data for debugging purposes was:
dataTable.addRows([
['My text here', 'bar label', '#676767', 'https://www.google.com', new Date(2019, 12, 22), new Date(2019, 12, 26)]]);
I had shuffled the columns around and was pointing to the wrong column. Just had to change to the right column above to get it to work (column 3, being zero-based).