How do I get the information about the selected node in the Google Charts Org Chart widget?

Question

I have a chart rendered via the Google Charts Org Chart API. How do I get the data about the selected node when a user clicks on a node. I understand it to the point where I make the "getSelection" call to output selection information to the Javascript console:

 console.log(chart.getSelection());

When I look in the Chrome Javascript console, I can see the object (see below), but it doesn't show any attributes of the node in the chart. It only shows row and column. Is there another call to get the actual attributes of the node (like the name, etc)?

Answer 1

You should call chart.getSelection(), not this., because in your function this refers to window, and thus you call window.getSelection() that returns an unrelated object.

Here is the complete example how to get chart selection: Google Charts. Interacting With the Chart

The correct code from the link above, where chart and data refer to global variables:

var selectedItem = chart.getSelection()[0];
if (selectedItem) {
    var selectedValue = data.getValue(selectedItem.row, 0);
    console.log('The user selected ' + selectedValue);
}

Answer 2

This works for me. chart is the instance of your chart and data is the container of your data (a google DataTable instance), composed in the page or fetched via ajax. Once you get the current selection object with chart.getSelection() you are able to query your dataset with the current row position data.getValue(row, col), to obtain the corresponding record. showCurrentDetailCard() is a custom function that i use to display the details of the current node.

google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
        var c = selection[0];
        showCurrentDetailCard(data.getValue(c.row, 0));
    }
}

Hope this helps.