How to get data point x/y values when Google Visualisation line chart data point clicked [duplicate] - google-visualization

Question

i want to take out 'text value' on mouse click on anywhere on the row/svg image ,for i.e. in the below image if i click anywhere on 2nd blue highlighted row, then i should be able to get the text 'Adams' as alert. I tried to iterate thru svg elements but svg elements are created horizontally rather then vertically

Answer 1

you can use the 'select' event, to determine the value selected
when the 'select' event fires, check chart.getSelection()
google.visualization.events.addListener(chart, 'select', function () {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
getSelection returns an array of the selected rows,
Timeline charts only allow one row to be selected at a time,
so the selection will always be in the first element
chart.getSelection()[0]
each element in the array will have properties for row and column
(column will always be null for a Timeline chart)
once you have the row, you can use getValue on the DataTable
dataTable.getValue(selection[0].row, 0)
getValue takes two arguments, rowIndex and columnIndex
use 0 to get the value of the first column
see following working snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
google.visualization.events.addListener(chart, 'select', function () {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
chart.draw(dataTable);
},
packages: ['timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>
EDIT
to capture the click anywhere on the row, outside the colored bar,
use the 'ready' event to find the svg elements and add a listener
the elements will have an x attribute of zero (0)
and a fill attribute other than 'none'
since the number of elements will match the number of rows,
we can use the index of the element, amongst its peers, to find the value
see following working snippet,
both the 'select' and 'click' events are used to find the value clicked
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var saveRows = [];
google.visualization.events.addListener(chart, 'ready', function () {
chartRows = container.getElementsByTagName('rect');
Array.prototype.forEach.call(chartRows, function(row) {
if ((parseInt(row.getAttribute('x')) === 0) && (row.getAttribute('fill') !== 'none')) {
saveRows.push(row);
row.addEventListener('click', function (e) {
for (var i = 0; i < saveRows.length; i++) {
if (e.target === saveRows[i]) {
getRowLabel(i);
break;
}
}
}, false);
}
});
});
google.visualization.events.addListener(chart, 'select', function () {
selection = chart.getSelection();
if (selection.length > 0) {
getRowLabel(selection[0].row);
}
});
function getRowLabel(index) {
console.log(dataTable.getValue(index, 0));
}
chart.draw(dataTable);
},
packages: ['timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>