Tooltip doesn't work in Google Scatter Chart - charts

Question

I'm trying to create a scatter plot using Google charts and I don't seem to be able to add a column to be a tooltip. I read various sources that state that the data definition should be as:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// A column for custom tooltip content
data.addColumn({type: 'string',role: 'tooltip',});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
However, it doesn't work.
JSFiddle to demonstrate the issue: https://jsfiddle.net/shakedk/c37L0d1n/

Answer 1

column roles are not supported by material charts,
along with several other options.
see --> Tracking Issue for Material Chart Feature Parity
for custom tooltips, you will need to use a classic chart.
material = google.charts.Scatter -- package: 'scatter'
classic = google.visualization.ScatterChart -- package: 'corechart'
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Example',
},
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="scatterchart_material"></div>

Answer 2

To add to the answer of WhiteHat:
ScatterChart + Tooltip + Dashboard filter column:
I experienced with the ScatterChart that tooltips also do not work with the "arrayToDataTable method" IF there is also a string column that is used as the filter column of the google.visualization.ControlWrapper.
The "arrayToDataTable method" works well with just 2 columns with data and a 3rd column with the tooltip.
It also works well if the 3rd column contains the input for the dashboard filter.
But there is a 3rd and a 4th column then the "arrayToDataTable method" cannot be used (for ScatterCharts).
It works well if I use the DataTable.addRows method:
google.charts.setOnLoadCallback(chart_ecdf);
function chart_ecdf() {
var data = new google.visualization.DataTable();
data.addColumn('number','Population');
data.addColumn('number','Area');
data.addColumn({
type: 'string',
role: 'tooltip',
})
data.addColumn('string','Filter');
data.addRows([
[1324, 9640821, 'Annotated 1', 'A'],
[1133, 3287263, 'Annotated 2', 'A'],
[304, 9629091, 'Annotated 3', 'A'],
[232, 1904569, 'Annotated 4', 'B'],
[187, 8514877, 'Annotated 5', 'B']
]);
var filter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'filter_ecdf',
options: {
filterColumnIndex: 3,
ui: { caption: 'Kies een type', label: false, allowTyping: false, allowMultiple: false, allowNone: false, sortValues: false } },
state: {'selectedValues': ['{{ .Params.ecdf_filter_state | safeJS }}']}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ScatterChart',
containerId: 'grafiek_ecdf',
view: {columns: [0,1,2]},
options: {
chartArea: {top:10, left:35, width:'82%', height:'90%'},
vAxis: {minValue: 0, maxValue: 1, format: 'percent'},
hAxis: {format: '#.##%' },
legend: 'none',
colors: ['#ffa852'] },
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_ecdf'));
dashboard.bind(filter, chart);
dashboard.draw(data);
}