I'm trying to get the tooltip of the selected entity on Google scatter chart. I create my datatable as following:

data = google.visualization.arrayToDataTable([
    ['Lines changed', 'TTL', 'Tooltip'],
    [25, 12, 'Text for first'],
    [34, 20, 'Text for second']
]);

and then I can access the selected one using

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column)); // this gives me the Y-value for that row and index
});

Does anyone know how to get the tooltip text from that row and index instead of the Y-value?

EDIT

I can indeed add tooltips using the arrayToDataTable() method by setting column property like:

data.setColumnProperty(2, 'role', 'tooltip');

this makes third column (index 2) a tooltip. It's only that I can't (easily) add HTML to the tooltip using the method above. I had to revert to using new google.visualization.DataTable() instead.

I'm trying to get the tooltip of the selected entity on Google scatter chart. I create my datatable as following:

data = google.visualization.arrayToDataTable([
    ['Lines changed', 'TTL', 'Tooltip'],
    [25, 12, 'Text for first'],
    [34, 20, 'Text for second']
]);

and then I can access the selected one using

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column)); // this gives me the Y-value for that row and index
});

Does anyone know how to get the tooltip text from that row and index instead of the Y-value?

EDIT

I can indeed add tooltips using the arrayToDataTable() method by setting column property like:

data.setColumnProperty(2, 'role', 'tooltip');

this makes third column (index 2) a tooltip. It's only that I can't (easily) add HTML to the tooltip using the method above. I had to revert to using new google.visualization.DataTable() instead.

• javascript
• google-visualization

2 Answers 2

You cannot add tooltips to the chart using arrayToDataTable. As the docs says :

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray : A two-dimensional array, where each row represents a row in the data table. If opt_firstRowIsData is false (the default), the first row will be interpreted as header labels. The data types of each column are interpreted automatically from the data given. If a cell has no value, specify a null or empty value as appropriate. You cannot use Date or DateTime values, or JavaScript literal object notation for cell values.

use addColumn / addRows instead :

function drawVisualization() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'Lines changed');
    dataTable.addColumn('number', 'TTL');

    // column for tooltip content
    dataTable.addColumn({type: 'string', role: 'tooltip'});

    dataTable.addRows([
        [25, 12, 'Text for first'],
        [34, 20, 'Text for second']
    ]);

    // create and draw the visualization.
    var chart = new google.visualization.ScatterChart(document.getElementById('visualization'));
    chart.draw(dataTable);
}
google.setOnLoadCallback(drawVisualization);

The above code produces the following scatter chart :

Update

Totally forgot the question :-) Here is how you extract the tooltip in a click event (almost similar to your code, just addressing the dataTable instead) :

google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    // this gives you 'Text for first' / 'Text for second' etc
    console.log(dataTable.getValue(selection[0].row, 2)); 
});

Adding on to davidkonrad's answer above, if you have multiple data series and you want to specifically access the tooltip string associated with the selected data point, then you can do this:

google.visualization.events.addListener(chart, 'select', function () {
    // when a point is selected
    var selection = chart.getSelection();
    console.log(data.getValue(selection[0].row, selection[0].column + 1));
});

This assumes that every data series has an associated custom tooltip column.