Event Listener in Google Charts API
- by DeanGrobler
I'm busy using Google Charts in one of my projects to display data in a table. Everything is working great. Except that I need to see what line a user selected once they click a button.
This would obviously be done with Javascript, but I've been struggling for days now to no avail. Below I've pasted code for a simple example of the table, and the Javascript function that I want to use (that doesn't work).
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
google.setOnLoadCallback(drawTable);
var table = "";
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows(4);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, 10000, '$10,000');
data.setCell(0, 2, true);
data.setCell(1, 0, 'Jim');
data.setCell(1, 1, 8000, '$8,000');
data.setCell(1, 2, false);
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 12500, '$12,500');
data.setCell(2, 2, true);
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 7000, '$7,000');
data.setCell(3, 2, true);
table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true});
}
function selectionHandler() {
selectedData = table.getSelection();
row = selectedData[0].row;
item = table.getValue(row,0);
alert("You selected :" + item);
}
</script>
</head>
<body>
<div id='table_div'></div>
<input type="button" value="Select" onClick="selectionHandler()">
</body>
</html>
Thanks in advance for anyone taking the time to look at this. I've honestly tried my best with this, hope someone out there can help me out a bit.
