admin管理员组文章数量:1316523
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.
2 Answers
Reset to default 8You 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
版权声明:本文标题:javascript - How to get tooltip value from Google Scatter Charts selection - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742003606a2411515.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论