javascript - How to get tooltip value from Google Scatter Charts selection - Stack Overflow

admin管理员组

文章数量:1316677

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

Share Improve this question Follow edited Aug 15, 2013 at 13:08 mavili asked Aug 15, 2013 at 10:37 mavilimavili 3,42444 gold badges3232 silver badges4646 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

本文标签： javascriptHow to get tooltip value from Google Scatter Charts selectionStack Overflow