Add Information to Google Timeline bar Hover - html

Question

I'm trying to add three new sections to the hover pop-up on a bar in google timeline charts.
I have tried using the google timeline help but cannot find a solution
The default is Title / Time / Duration, however I want to add Arena / Website
I have created the below code for this as an example.
<DIV>
<p><font face="verdana" size="6" color="Black">Thursday</font></p>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Federation' });
dataTable.addColumn({ type: 'string', id: 'Event' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'WWE / NXT', 'AXXESS', new Date(0,0,0,18,0,0), new Date(0,0,0,22,0,0)],
[ 'WWN', 'Matt Riddles Bloodsport', new Date(0,0,0,15,0,0), new Date(0,0,0,18,0,0)],
[ 'WrestleCon', 'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
[ 'WWN', 'Evolve', new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
[ 'WrestleCon', 'WrestleCon Supershow', new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
[ 'Knockout', 'Knockout in NOLA', new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0)],
[ 'ROH', 'RoH Supercard of Honor', new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0)],
[ 'WWN', 'Beyond Wrestling', new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
var options = {
timeline: { colorByRowLabel: true },
tooltip: {isHtml: true},
legend: 'none',
backgroundColor: '#ffd'
};
chart.draw(dataTable, options);
}
</script>
<div id="example5.1" style="height: 300px;"></div>
</DIV>

Answer 1

you can add your own custom tooltip, see Customizing tooltips in the Timeline reference
the tooltip column will just be a string, either a simple value or html
see following working snippet,
here, a DataView is used to add the tooltip column.
this allows the tooltip to be built dynamically based on the data in the data table
also, the arena is added to the original data table, for easy reference,
but is excluded from the data view...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Federation' });
dataTable.addColumn({ type: 'string', id: 'Event' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', id: 'Arena' });
dataTable.addRows([
['WWE / NXT', 'AXXESS', new Date(0,0,0,18,0,0), new Date(0,0,0,22,0,0), 'Arena A'],
['WWN', 'Matt Riddles Bloodsport', new Date(0,0,0,15,0,0), new Date(0,0,0,18,0,0), 'Arena B'],
['WrestleCon', 'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0), 'Arena C'],
['WWN', 'Evolve', new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0), 'Arena D'],
['WrestleCon', 'WrestleCon Supershow', new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0), 'Arena E'],
['Knockout', 'Knockout in NOLA', new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0), 'Arena F'],
['ROH', 'RoH Supercard of Honor', new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0), 'Arena G'],
['WWN', 'Beyond Wrestling', new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0), 'Arena H']]);
var options = {
timeline: { colorByRowLabel: true },
tooltip: {isHtml: true},
legend: 'none',
backgroundColor: '#ffd'
};
var formatTime = new google.visualization.DateFormat({
pattern: 'HH:mm:ss a'
});
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 1, {
role: 'tooltip',
type: 'string',
calc: function (dt, row) {
// build tooltip
var dateBegin = dt.getValue(row, 2);
var dateEnd = dt.getValue(row, 3);
var oneHour = (60 * 60 * 1000);
var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;
var tooltip = '<div><div class="ggl-tooltip"><span>';
tooltip += dt.getValue(row, 0) + ':</span> ' + dt.getValue(row, 1) + '</div>';
tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
tooltip += formatTime.formatValue(dateEnd) + '</div>';
tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' hours</div></div>';
tooltip += '<div class="ggl-tooltip"><span>Arena: </span>' + dt.getValue(row, 4) + '</div></div>';
return tooltip;
},
p: {html: true}
}, 2, 3]);
chart.draw(view.toDataTable(), options); // <-- use data view to draw chart
});
.ggl-tooltip {
background-color: #ffffff;
border: 1px solid #e0e0e0;
font-family: Arial, Helvetica;
font-size: 14px;
padding: 8px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>