@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...
Many thanks
Mike
Am Freitag, 6. Dezember 2013 04:21:19 UTC+1 schrieb asgallant:
>
> 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);
> }
>
>
>
> On Thursday, December 5, 2013 4:30:44 PM UTC-5, min ji wrote:
>>
>>
>> - 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>
>>
>>
>> On Thursday, December 5, 2013 7:17:17 PM UTC+1, asgallant wrote:
>>>
>>> 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.
>>>
>>> On Thursday, December 5, 2013 5:51:23 AM UTC-5, min ji wrote:
>>>>
>>>> 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);
>>>> google.visualization.events.addListener(myTable, 'ready', function () {
>>>> // set up mouse event handlers on table elements
>>>> });
>>>> }
>>>>
>>>>
>>>> On Thursday, December 5, 2013 5:49:05 AM UTC+1, asgallant wrote:
>>>>>
>>>>> 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
>>>>> });
>>>>>
>>>>> On Wednesday, December 4, 2013 4:26:01 PM UTC-5, min ji wrote:
>>>>>>
>>>>>> 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!
>>>>>>
>>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/b3db4b80-a63e-40f8-8461-a1fd48cbd3a3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
