CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
MikiMrki
MikiMrki

Reputation: 195

Get values on click from Google visualisation datatable

Here I have a Google vizualisation datatable. I need to get values from table row.

CODE:http://jsfiddle.net/AVHY8/11/

I currently write:

 new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
                alert(selection[i].row);
            }
        });
    });

So now when I click on row I just get number of row... but how I can get values of that row?

I try with alert data.getValue[(selection[i].row)]; but it doesn't work? Any ideas?

UPDATE:

I also try with this code:

 // Add our selection handler.
google.visualization.events.addListener(table, 'select', selectHandler);

// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
  var selection = table.getSelection();
  var message = '';
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      var str = data.getFormattedValue(item.row, item.column);
      message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
    } else if (item.row != null) {
      var str = data.getFormattedValue(item.row, 0);
      message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
    } else if (item.column != null) {
      var str = data.getFormattedValue(0, item.column);
      message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

It doesn't work again.

Upvotes: 0

Views: 2112

Answers (3)

Thiago Soares
Thiago Soares

Reputation: 1

You can use events listners to do that.

google.visualization.events.addListener(table, 'select', function () {
    selectHandler(table);
});

function selectHandler(myTable) {
    var selectedItem = myTable.getSelection()[0];
    if (selectedItem) {
       console.log(data.getValue(selectedItem.row, 0))
    }
}

The number in front of the "selectedItem.row" is the column value you want to get.

Upvotes: 0

Prashant vishwakarma
Prashant vishwakarma

Reputation: 487

 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      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('number', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, 10],
          ['Jim',   {v:8000,   f: '$8,000'},  20],
          ['Alice', {v: 12500, f: '$12,500'}, 38],
          ['Bob',   {v: 7000,  f: '$7,000'},  20]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, { showRowNumber: true });

      
            $("#table_div table tbody tr td").click(function () {
                alert($(this).html());
            });
      
      }
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="table_div">
    </div>

Upvotes: 0

Jan Misker
Jan Misker

Reputation: 2149

In your JSFiddle the data array is inside the drawVisualization function, so the event handlers don't have access to it. If you put it in global scope (or in a closure that includes the event handlers) it should work.

Edit: Aha, the index of the selection refers to the current datatable, which is altered by the ControlWrapper. What you can do is instead of data.getValue(..) do table.getDataTable().getValue(..).

Also note that you don't deselect the previously selected rows, leading to some confusion.

Upvotes: 1

Related Questions