Google Charts Table Page Event Not Listening

Question

Attempting to perform an action when the user attempts to change the page in a google table.

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table-div',
            'options': {
                'width': '100%',
                'allowHtml': true,
                'page': 'event',
                'pageSize': 15,
                'sortColumn': 0,
                'sortAscending': false
            },
            'view': {
                'columns': [0, 3, 1, 2, 4, 5, shareColumn]
            }
        });

        google.visualization.events.addListener(table, 'page', function(){console.log("1 test");});
        google.visualization.events.addListener(table, 'ready', function(){console.log("2 test");});

        dashboard.bind(filter, [chart, table]);

The table draws fine, the data loads, the ready listener is executed, but when I change pages the other listener does not execute. What is causing this?

Answer 1

be careful when using addListener and the 'ready' event,
'ready' is called everytime the chart is re-drawn.
for example, when a bound filter is used.

as such, the 'page' listener will be added / executed multiple times.

the following example demonstrates using addOneTimeListener instead.

run the snippet below, use the range filter, then click one of the page buttons.

the number of executions will increase each time the filter is used...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'},
        {label: 'Amount', type: 'number'}
      ],
      rows: [
        {c:[{v: 'April'}, {v: 279899811.34}]},
        {c:[{v: 'May'}, {v: 205855811}]},
        {c:[{v: 'June'}, {v: 10009811}]},
        {c:[{v: 'July'}, {v: 79979811}]},
        {c:[{v: 'August'}, {v: 175789911}]},
        {c:[{v: 'September'}, {v: 99899811}]},
        {c:[{v: 'October'}, {v: 149899811}]},
        {c:[{v: 'November'}, {v: 80899811}]},
        {c:[{v: 'December'}, {v: 60899811}]},
        {c:[{v: 'January'}, {v: 225899811}]},
        {c:[{v: 'February'}, {v: 148899811}]},
        {c:[{v: 'March'}, {v: 150899811}]}
      ]
    });

    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table-div',
      'options': {
        'width': '100%',
        'allowHtml': true,
        'page': 'event',
        'pageSize': 4,
        'sortColumn': 0,
        'sortAscending': false
      }
    });

    var filter = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter-div',
      'options': {
        'filterColumnIndex': 1,
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': true
        }
      }
    });

    var i = 0;
    google.visualization.events.addListener(table, 'ready', function(){
      google.visualization.events.addListener(table.getChart(), 'page', function(){
        i++;
        document.getElementById('msg-div0').innerHTML = 'addListener = ' + i;
      });
    });

    var x = 0;
    google.visualization.events.addOneTimeListener(table, 'ready', function(){
      google.visualization.events.addListener(table.getChart(), 'page', function(){
        x++;
        document.getElementById('msg-div1').innerHTML = 'addOneTimeListener = ' + x;
      });
    });

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dashboard.bind(filter, table);
    dashboard.draw(dataTable);
  },
  packages: ['controls', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div id="filter-div"></div>
  <div id="table-div"></div>
  <div id="msg-div0"></div>
  <div id="msg-div1"></div>
</div>

Answer 2

Found that the page listener was not being called.

        google.visualization.events.addListener(table, 'ready', function(){
            google.visualization.events.addListener(table.getChart(), 'page', function(e){
                console.log("On page: " + e.page);
            });
        });

By calling the add once the table is actually read successfully added it and works.