CODEWITHSUNDEEP
google-visualizationdashboardgoogle-datatable
gpsblues
gpsblues

Reputation: 19

Count number of rows after filter in Google Visualisation Table

I have implement various controls in a Google Visualisation Table for multiple filter: CategoryFilter, StringFilter and NumberRangeFilter like this exemple http://jsfiddle.net/asgallant/Ena84/

Is it possible know the number of rows visualised in table after every filter settings? Thank you.

function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'OverallRating');
data.addColumn('string', 'Foot');
data.addRows([
    ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
    ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
    ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
]);

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

var stringFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'string_filter_div',
    options: {
        filterColumnIndex: 0
    }
});

var numberRangeFilter = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'numnber_range_filter_div',
    options: {
        filterColumnIndex: 5,
        minValue: 0,
        maxValue: 100,
        ui: {
            label: 'Overall Rating'
        }
    }
});

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    options: {
        showRowNumber: true
    }
});

dashboard.bind([stringFilter, numberRangeFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});

Upvotes: 1

Views: 2980

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

once the 'ready' event fires on any of the controls, charts, or dashboard

you can use the getDataTable method on any of the controls or charts

to getNumberOfRows

see following working snippet... 

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Team');
  data.addColumn('string', 'Nationality');
  data.addColumn('number', 'Height');
  data.addColumn('number', 'Weight');
  data.addColumn('number', 'OverallRating');
  data.addColumn('string', 'Foot');
  data.addRows([
      ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
      ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
      ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

  var stringFilter = new google.visualization.ControlWrapper({
      controlType: 'StringFilter',
      containerId: 'string_filter_div',
      options: {
          filterColumnIndex: 0
      }
  });

  var numberRangeFilter = new google.visualization.ControlWrapper({
      controlType: 'NumberRangeFilter',
      containerId: 'numnber_range_filter_div',
      options: {
          filterColumnIndex: 5,
          minValue: 0,
          maxValue: 100,
          ui: {
              label: 'Overall Rating'
          }
      }
  });

  var table = new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'table_div',
      options: {
          showRowNumber: true
      }
  });

  dashboard.bind([stringFilter, numberRangeFilter], [table]);
  
  google.visualization.events.addListener(dashboard, 'ready', function () {
    // get number of rows
    console.log(table.getDataTable().getNumberOfRows());
  });
  
  dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
<script src="https://www.google.com/jsapi"></script>
<div id="string_filter_div"></div>
<div id="numnber_range_filter_div"></div>
<div id="table_div"></div>

Upvotes: 4

Related Questions