Search code examples
google-visualizationrowfilter

How to I find the original row index of a table in a google visualization if I have a filtered rows view


I'm using Google Visualization. I have a data table which I have filtered using getFilteredRows()

When I select a row in the filtered table the row index returned matches the on-screen row index but I need to be able to return the original row index from the underlying source data table.

Is that possible?

I've seen a couple of posts that use variations on

table.getDataTable().getTableRowIndex(currentRow)

but both of those methods don't seem to be available for use anymore?

Anybody know a solution? thanks


Solution

  • getTableRowIndex is a DataView method

    on your chart wrapper, if you set the dataTable property to a data view,
    then you can use...

    chartWrapper.getDataTable().getTableRowIndex(currentRow)
    

    however, if the dataTable property is an actual data table,
    this method would not be available (because it is a data view method)


    if using a data table and the chart wrapper's view property to set rows,
    find the actual row by using...

    chartWrapper.getView().rows[currentRow]
    

    see following working snippet...

    google.charts.load('current', {
      packages: ['controls']
    }).then(function () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2012', 900, 700, 200],
        ['2013', 890, 600, 290],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ]);
    
      var chartTable = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'chart_div',
        dataTable: data,
        view: {
          rows: data.getFilteredRows([{
            column: 1,
            minValue: 1000
          }])
        }
      });
    
      var testDiv = document.getElementById('test_div');
      google.visualization.events.addOneTimeListener(chartTable, 'ready', function () {
        google.visualization.events.addListener(chartTable.getChart(), 'select', function () {
          testDiv.innerHTML = '';
          var selection = chartTable.getChart().getSelection();
          for (var i = 0; i < selection.length; i++) {
            var selectedRow = selection[i].row;
            var dataTableRow = chartTable.getView().rows[selectedRow];
            var values = '';
            for (var col = 0; col < data.getNumberOfColumns(); col++) {
              if (values !== '') {
                values += ' -- ';
              }
              values += data.getValue(dataTableRow, col);
            }
            values += '<br/>';
            testDiv.insertAdjacentHTML('beforeEnd', values);
          }
        });
      });
    
      chartTable.draw();
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div"></div>
    <div id="test_div"></div>