CODEWITHSUNDEEP
google-visualization
Joe Samraj
Joe Samraj

Reputation: 331

google chart get selected value

I am trying to get the selected value of a Google Table Chart. When the chart content is not filtered using the string filter, it returns the index of the selected row according to the DataTable, but when it is filtered using the string filter, it doesn't returns the correct issue.

To replicate the issue please do the following code 1. Run the below code

  1. Select Aaron in the table. A message box will display its index as 5.

  2. Type letter 'A' in the string filter. Now select the Aaron, it will return 0 which is a bug.

  3. It should return the index of the row in the data table for 'Aaron' which is 5

    <!DOCTYPE html>
<html>
  <head>
    <title>Google Developers</title>

      <link rel="stylesheet" type="text/css" href="/_static/07491c0cdc/css/screen-docs.css" />
      <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
      <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" type="text/css">
      <script src="/_static/07491c0cdc/js/prettify-bundle.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script>
    <script src="http://www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="/_static/07491c0cdc/js/framebox.js"></script>
  </head>
  <body class="docs slim framebox_body">


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

<div id="stringFilter_dashboard_div" style="border: 1px solid #ccc">
<div id="stringFilter_control_div" style="padding-left: 2em"></div>
<div id="stringFilter_chart_div"></div>
</div>

<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart', 'table', 'gauge', 'controls']});
  google.setOnLoadCallback(apiLoaded);
  function apiLoaded() {
    drawStringFilter();
  }

  function drawStringFilter() {
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('stringFilter_dashboard_div'));
    var control = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'stringFilter_control_div',
      'options': {
        'filterColumnIndex': 0
      }
    });
    var chart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'stringFilter_chart_div',
      'options': {'height': '25em', 'width': '20em'}
    });

    google.visualization.events.addListener(chart,'select',tableSelectHandler);

    function tableSelectHandler(){
        var selectedItem = chart.getChart().getSelection()[0];
        alert(selectedItem.row);
    }

    var data = google.visualization.arrayToDataTable([
      ['Name', 'Age'],
      ['Michael' , 12],
      ['Elisa', 20],
      ['Robert', 7],
      ['John', 54],
      ['Jessica', 22],
      ['Aaron', 3],
      ['Margareth', 42],
      ['Miranda', 33]
    ]);
    dashboard.bind(control, chart);
    dashboard.draw(data);
  }
</script>


    <script>

      devsite.github.Link.convertAnchors();

        window.prettyPrint();


    </script>
  </body>
</html>

Upvotes: 2

Views: 7303

Answers (2)

asgallant
asgallant

Reputation: 26340

Expanding on juvian's answer, you should test the selection length before trying to access any elements in the array, as the array may be empty (or contain multiple elements if more than one row is selected):

function tableSelectHandler(e){
    var selection = chart.getChart().getSelection();
    var dt = chart.getDataTable();
    for (var i = 0; i < selection.length; i++) {
        // colIndex is the index of the column you want to get data from
        var value = dt.getValue(selection.row, colIndex);
    }
}

Upvotes: 3

juvian
juvian

Reputation: 16068

This should work:

function tableSelectHandler(e){
    var selectedItem = chart.getChart().getSelection()[0];
    var true_selected =  chart.getDataTable().getTableRowIndex(selectedItem.row)
    alert(true_selected);
}

getTableRowIndex traces the row back to the datatable

Upvotes: 4

Related Questions