how to add onmouseout function to table chart

min ji

unread,

Dec 4, 2013, 4:26:01 PM12/4/13

to google-visua...@googlegroups.com

hi,

i want to add a onmouseout function to a table. i add listener but it cannot work. anybody knows how to use it? An example will be better.
thank you!

asgallant

unread,

Dec 4, 2013, 11:49:05 PM12/4/13

to google-visua...@googlegroups.com

The Table visualization does not throw mouse events, so you have to set them up yourself using standard javascript. You should set them up inside a "ready" event handler for the table to ensure that the table elements exist when you create the events.

google.visualization.events.addListener(myTable, 'ready', function () {
// set up mouse event handlers on table elements
});

min ji

unread,

Dec 5, 2013, 5:51:23 AM12/5/13

to google-visua...@googlegroups.com

Thank you, asgallant! could you please give me a detail example?

Here are the codes. when the function onmouseover is fired, a messagebox will be show: i eat ***. how to write it? thank you very much!

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([
  ['MON', 'TUE', 'WED','THUR', 'FRI', 'SAT'],
  ['apple', 'banana', 'melon','apple', 'banana', 'melon'],

  ]);

  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, null);

asgallant

unread,

Dec 5, 2013, 1:17:17 PM12/5/13

to google-visua...@googlegroups.com

Here's one way to do it: http://jsfiddle.net/asgallant/kb6gY/

If your table is large, I don't recommend that you use this method, as it creates an individual event handler for each cell. There is a more efficient way of doing this: use a single event handler on the table, parse the event.target/event.srcElement to figure out what is being moused over, and then fire the alert when appropriate. Writing a script to do that is far more complicated, however, and can get even more complicated if you allow HTML in your table cells.

min ji

unread,

Dec 5, 2013, 4:30:44 PM12/5/13

to google-visua...@googlegroups.com

thank you asgallant! you give me a really good example! in the example http://jsfiddle.net/asgallant/kb6gY/, how i can get the row number and column number when mouseover is fired?

function alertCellContents () {

alert(this.innerHTML);// i also need to output row number and column number

}

if it cannot be realized, i decided to use "select" function instead of onmouseover. i have read the example given in the tutorial. but there is a small mistake. i just can get the row number but the column number is null. how to get the column number?

//code is here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addColumn('boolean', 'Smokes');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
data.setCell(0, 2, true);
data.setCell(1, 2, false);
data.setCell(2, 2, true);

function drawVisualization() {

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);

google.visualization.events.addListener(visualization, 'select', selectHandler);
}

function selectHandler() {
var selection = visualization.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
alert(item.row);
alert(item.column);//it is null
}

}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="table"></div>
</body>
</html>

asgallant

unread,

Dec 5, 2013, 10:21:19 PM12/5/13

to google-visua...@googlegroups.com

The Table visualization only passes row information in the select handler, so you can't get column from that. If you want to use the mouseover, you can get the row index in the table by referring to this.parentNode.rowIndex, and column by referring to this.cellIndex. Those will give you the indices in the HTML table, which do not necessarily correspond to the row/column indices in the DataTable. The row index will be off by at least 1, as the header row takes the first index spot, and could be off by more if you have table paging enabled.

function alertCellContents (e) {
    var columnIndex = this.cellIndex;
    var rowIndex = this.parentNode.rowIndex - 1;
    alert(this.innerHTML);
}

Mike4900

unread,

Nov 15, 2018, 8:46:52 AM11/15/18

to Google Visualization API

@asgallant:

hope you are still part of that group. as you mentioned in your last post, you get the row of the actual visual table part, which is not necessarily the related data row. So i use table paging, showing 10 rows per page. Using the row number shown in the table, i can use it as an offset to the this.parentNode.rowIndex. This might help, but is there a way to get to the bind data in that view?

So i have a datatable, from that i create a view and this is finally presented in the table. I would like to get the access to the datatable...

Any chance to do this?

I can't see why the table does not naturally support tooltips like the other charts do...