Google charts get row hover

I have a problem when it comes to obtaining the event in which the user hover his mouse over the bars (onmouseover). The items it passes through are not the same as what is being printed on the console. This is because it uses the index it has in the graph and it is not equal to the order that the items have in the datatable. Any ideas?

I leave my code below.

function drawChart() {
//var data = google.visualization.arrayToDataTable(dataToHistogram(response));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn({ type: 'number', id: 'precio' });


for (var i = datos.length - 1; i >= 0; i--) {
  dataTable.addRow(["<strike>"+datos[i].titulo+"</strike>", datos[i].valor]);
}


var options = {
  title: '',
  legend: { position: 'none' },
  bar: {groupWidth : 20},
  width: 1200,
  series: [
    {color: '#007d00', visibleInLegend: true}, {}, {},
  ],
  isStacked: 'absolute',
  tooltip:{isHtml: true}
};

var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(dataTable, options);


google.visualization.events.addListener(chart, 'onmouseover', function(e) {
    setTooltipContent(dataTable,e.row);
    //setTooltipContent(dataTable,e.row);
});
    function setTooltipContent(dataTable,row) {
if (row != null) {
      console.log(dataTable.getValue(row, 0));
  }}}

JSFiddle

69 thoughts on “Google charts get row hover”