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?

Answer 1

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>

Answer 2

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)