基于Fusion Tables的Google Charts中的事件监听器

Question

I am trying to use Google Fusion Tables with Google Charts to construct a table that would response to changes in a drop down menu.

I am following this example very closely:

https://developers.google.com/fusiontables/docs/samples/gviz_datatable

I can draw the table using data from the Fusion Tables. The table would response to the selection menu without issues.

I want to implement a selectHandler that would store the content of the row that is selected by the user. I am going to pass the content of the row to other functions, but I just couldn't get the selectHandler to work correctly.

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

  function drawTable() {

      var query = "SELECT 'key', 'description' as Style, " +
              "'business_name' as Name, 'Rating' " +
              'FROM 15bCp26r1CDuN86Tu8hMOGRWlZwNI30Pl60srz9g';
      var vendors = document.getElementById('vendors').value;
      if (vendors) {
        query += " WHERE 'description' = '" + vendors + "'";
      }

      var queryText = encodeURIComponent(query);

      var gvizQuery = new google.visualization.Query(
        'http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

      gvizQuery.send(function(response) {
        var table = new google.visualization.Table(
          document.getElementById('visualization'));

        var data = response.getDataTable();

        table.draw(data, {
            showRowNumber: false,
            sortColumn: 3,
            sortAscending: false
        });

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

        function selectHandler() {
            //alert("Selected");
            var selectedItem = table.getSelection()[0];
            var value = data.getValue(selectedItem.row, selectedItem.column);
            alert(value);
        }

    });      

  }

I am following the example pretty closely. The selectHandler does work. I can get an alert box to pop up when the user click on a row, but I can't store the content of the row to the variable value.

What am I doing wrong?

Answer 1

When you declare var value inside the selectHandler function, the scope of value is local to the function. Once the function returns, the local variables are marked for garbage collection and made unaccessible. If you want to store value longer-term, then it needs to be declared outside the local scope of selectHandler , like this:

var value;
function selectHandler () {...}

Incidentally, in the selectHandler function, you should be testing for the length of the selection, as it could be zero (which would throw an error in your code) or more than 1 (in which case you are not capturing all of the relevant information). Try something like this:

function selectHandler() {
    var selection = table.getSelection();
    if (selection.length > 0) {
        // do something
    }
}

or this:

function selectHandler() {
    var selection = table.getSelection();
    for (var i = 0; i < selection.length; i++) {
        // do something
    }
}