Google Combo chart - scatterplot and line - how to customise scatterplot tooltip - google-visualization

Question

'XXX' below shows where I would like custom tooltip to be used - it should actually display a name from a row of data - 'XXX' is used to make the problem stand out here. This works fine on standard scatterplot but not on combo chart. Combo version displays default tooltip.
What am I missing?
Charts currently look like this...image link
`
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'others_average');
data.addColumn('number', '');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
<?php
$wa_startindex = 0;
$i=0;
while(!$chart->atEnd()) {
$wa_startindex = $chart->Index;
?>
[<?php echo($chart->getColumnVal("others_average")); ?>, <?php echo($chart->getColumnVal("band")); ?>, 'XXX']
<?php if($i<($chart->TotalRows)) echo ',';?>
<?php
$i++;
$chart->moveNext();
}
$chart->moveFirst(); //return RS to first record
unset($wa_startindex);
unset($wa_repeatcount);
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
label: 'y1=x',
type: 'number',
calc: function (dt, row) {
return dt.getValue(row, 0)
}
}]);
var options = {
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
},
hAxis: {title: 'Average Band (other courses)', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
vAxis: {title: '<?php echo($chart->getColumnVal("course_title")); ?> Band', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
legend: 'none'
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
`
I don't find the google charts hard to modify for use with PHP/MySQL data - problem just seems to be with the combo chart implmentation..

Answer 1

You should also include the tooltip column (column #2) in the DataView: view.setColumns([0, 1, 2, {....
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'others_average');
data.addColumn('number', '');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
[1, 2, 'xxx1'],
[2, 5, 'xxx2'],
[3, 1, 'xxx3'],
[4, 3, 'xxx4'],
[5, 2, 'xxx5']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {
label: 'y1=x',
type: 'number',
calc: function (dt, row) {
return dt.getValue(row, 0)
}
}]);
var options = {
seriesType: 'scatter',
series: {
1: {
type: 'line'
}
},
hAxis: {title: 'Average Band (other courses)', direction:-1, viewWindow: { min: 1, max: 5 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
vAxis: {title: '... Band', direction:-1, viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
legend: 'none'
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
</div>