Google Combo Chart with multiple series, how to add custom HTML Tooltip - charts

Question

I've Google combo chart and like to add a Tooltip. The icCube documention has an example how to add a HTML tooltip but this will not work for series, only the last item in the serie gets the tooltip. I found an answer how to do this, see this post.
But how can I achieve this in icCube?

Answer 1

for google charts, you can reference the Data Format of the specific chart
for most, the tooltip follows the series column
to have multiple series, each with it's own custom html tooltip,
add a column after each series column
NOTE: for custom html tooltips to work, the following must be in place...
the column must have property --> html: true
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
and the configuration options must include...
tooltip: {isHtml: true}
see following working snippet, the tooltip columns are loaded initially as null
then the tooltip is built based on the values in the series columns
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', label: 'Year'});
// series 0
dataTable.addColumn({type: 'number', label: 'Category A'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 1
dataTable.addColumn({type: 'number', label: 'Category B'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 2
dataTable.addColumn({type: 'number', label: 'Category C'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
dataTable.addRows([
['2014', 1000, null, 2000, null, 3000, null],
['2015', 2000, null, 4000, null, 6000, null],
['2016', 3000, null, 6000, null, 9000, null],
]);
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
dataTable.setValue(i, 2, getTooltip(i, 1));
dataTable.setValue(i, 4, getTooltip(i, 3));
dataTable.setValue(i, 6, getTooltip(i, 5));
}
function getTooltip(rowIndex, columnIndex) {
return '<div class="ggl-tooltip"><span>' +
dataTable.getValue(rowIndex, 0) + ': </span>' +
dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
}
chart.draw(dataTable, {
legend: {
position: 'bottom'
},
pointSize: 4,
seriesType: 'area',
series: {
2: {
pointSize: 12,
pointShape: {
type: 'star',
sides: 5,
dent: 0.6
},
type: 'scatter'
}
},
tooltip: {isHtml: true}
});
},
packages: ['corechart']
});
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>