google charts timeline - get text on row mouse click

Question

i want to take out 'text value' on mouse click on anywhere on the row/svg image ,for ie 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>