Google Chart getSelection doesn't have column property

Question

When I use:

chart.getChart().getSelection()[0]

on a chart (from a chartwrapper, hence the getChart() first), the getSelection() function returns only a row-property but no column property even though my 'chart' is a table and clicking anywhere within it should return both a row and column property.

Is this a known google charts bug? Does anyone know of a workaround?

Also I have found this topic on google groups: https://groups.google.com/forum/#!topic/google-visualization-api/O_t7-s96A9w

here they say: Currently the Table object only supports row selection and therefore the column property is always undefined. If this is important for you, you can catch these events by yourself by adding some special html code int he formatted value of each cell.

Anyone have an idea how to do this?

Could you clarify a bit what you are trying to do? I think [this question](http://stackoverflow.com/questions/15632698/google-visualization-click-event/15650043#15650043) may also help you since it seems to be related. — jmac, Nov 27 '13 at 02:58
I want to fetch the selected cell value in a google chart table. Like google say should be possible here: https://code.google.com/apis/ajax/playground/?type=visualization#select_event and here: https://developers.google.com/chart/interactive/docs/events#The_Select_Event. However, when you check out their examples...it doesn't even work. So I guess It hasn't been implemented yet. If somebody would have a work-around to make this work, that would be great. The question you refer to is related but I know how to capture the event, it's the that a gchart Table doesn't return a column coordinate. — Sleenee, Nov 30 '13 at 12:03
You're right, it seems broken -- those examples were working several months ago, even changing the version of the API doesn't seem to fix it. Strange indeed. — jmac, Nov 30 '13 at 12:16

score 2 · Answer 1 · answered Oct 30 '15 at 22:09

Even though google.visualization.table supports row selection only (it explains why column property returns null), you could consider the following approach to access column property:

google.load('visualization', '1', {
    packages: ['table']
});
google.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: '$10,000'
      },
        true
      ],
      ['Jim', {
          v: 8000,
          f: '$8,000'
      },
        false
      ],
      ['Alice', {
          v: 12500,
          f: '$12,500'
      },
        true
      ],
      ['Bob', {
          v: 7000,
          f: '$7,000'
      },
        true
      ]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    table.draw(data, {
        showRowNumber: false
    });
}



function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var e = event || window.event;
  var cell = e.target; //get selected cell
 
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;

}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
<div id="output"></div>

score 0 · Answer 2 · edited May 23 '17 at 12:07

You can format your values with HTML, and pass 'allowHtml: true' in your draw options. Then your HTML can raise the event / execute the js that you want it to when a user clicks on the cell value.

For example, the items below will raise an alert when clicked on:

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Ted',  {v: 10000, f: '<span onclick="alert(0)">$10,000</span>'}, true],
        ['Jim',   {v:8000,   f: '<span onclick="alert(1)">$8,000</span>'},  false],
        ['Alice', {v: 12500, f: '<span onclick="alert(2)">$12,500</span>'}, true],
        ['Bob',   {v: 7000,  f: '<span onclick="alert(3)">$7,000</span>'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function () {
        var s = table.getSelection();
        document.getElementById('row').innerHTML = s[0].row;
        document.getElementById('col').innerHTML = s[0].column;
        console.log(s);
    });
    table.draw(data, {showRowNumber: true, allowHtml: true});
}

google.load('visualization', '1', {packages:['table'], callback: drawTable});

See:

http://jsfiddle.net/fZzch/2/

A cleaner approach is to use a custom formatter:

How to write a custom formatter for Google DataTables (for use on visualisation api)

Google Chart getSelection doesn't have column property

2 Answers2

Linked