Re: getSelection doesn't return column

[asgallant]

Each visualization returns either the row, column, or both, of the selected element, and generally, they return whatever is sufficient to identify specifically what was selected.  The Table visualization was only designed for selecting rows, not individual cells, and so it only returns the row selected.

If you want to get creative and sneaky, you can format your data as HTML elements and embed row and column metadata as tag attributes.  Attach "click" event listeners to all the data HTML elements and pull the row and column info from the tags.

You can also make a feature request for the ability to select cells or columns (perhaps an option to indicate what you want to be able to select?), but I wouldn't hold my breath waiting for it to be implemented.  The API team has indicated in the past that the Table visualization is unlikely to be updated any time soon.

On Wednesday, October 3, 2012 4:01:02 PM UTC-4, Dan Franko wrote:

Hello, 

This is my first post.  I've been trying to figure out why getSelection doesn't return the current column as well as the row?  There's a mention on https://developers.google.com/chart/interactive/docs/events#The_Select_Event that "Note that the table chart only fires row selection events; however, the code is generic, and can be used for row, column, and cell selection events," on that same page.  Is it possible to get the selected column as well?

I doesn't even work as expected on the playground.

https://code.google.com/apis/ajax/playground/?type=visualization#select_event

Thanks in advance!

[asgallant]

Here's an example custom formatter you could try:

// custom format the DataTable to make it possible to detect click events on individual cells
function clickFormat (row, column, value, class) {
    return '<span class="' + class + '" row="' + row + '" column="' + column + '">' + value + '</span>';
}

// iterate over the DataTable and format every cell with the clickFormat
// make sure to do all other formatting first!
for (var i = 0; i < data.getNumberOfRows(); i++) {
    for (var j = 0; j < data.getNumberOfColumns(); j++) {
        data.setFormattedValue(i, j, clickFormat(i, j, data.getFormattedValue(i, j), 'clickableClass'));
    }
}

You will need to have the "allowHtml" option set to true for this to work.  You can then attach a click event handler to elements with the "clickableClass" class.  Here's an example using jQuery:

$('.clickableClass').on('click', function () {
    var row = $(this).attr('row');
    var column = $(this).attr('column');
    var value = data.getValue(row, column);
    alert('You clicked on row ' + row + ', column ' + column + ', which has the value ' + value + '.');
});

I didn't test that, so there could be errors, but it's basically what you need.

On Friday, November 16, 2012 5:20:57 PM UTC-5, Robert Whelan wrote:

I have been trying to figure out how I could implement your suggestion here with the html elements and click listeners.  I have been looking at datatable.setCell but I am not sure how I can set the metadata tags attributes or tie the click listeners.

Any advise would be greatly appreciated.

Thanks,

[Robert Whelan]

Very cool.  I will check it out and report back!

[Robert Whelan]

BTW, it works great!  couple of tweaks (like class is a reserved word), but basically exactly like you suggested!  Great solution!

[Harry Chang]

I had the exactly same problem. Bu I tried to put the code segment somewhere in my table chart and it did not work. Could you post the complete code example where one can select individual table cell? Thanks a lot!!! - Harry

[asgallant]

Try this: http://jsfiddle.net/asgallant/RSxSh/

This example uses the jQuery library, which you need to either link from a CDN or a local copy.  You can, of course, do this with plain javascript instead (or with a different library, if you prefer).