Question

I am using Google Chart Tools to display a Table visulisation on my webpage along side a Google Map. When the user clicks a map location, the callback automatically selects the corresponding location from a list of locations in the table.

This works fine, but the table does not automatically scroll the table so the selected row is visible (there are a lot of points so only a limited amount are shown with a scrollbar on the right hand side of the Table vis.)

I can’t see any way of setting the current ‘position’ of the viewport to the Table. Is there a way to do this?

Thanks!

Code snippet below:

arrBuoyLocs = new google.visualization.DataTable();
vTable = new google.visualization.Table(document.getElementById('table_div'));

// do initialisation, etc...
.
.
.


function updateSelectedTableItem(buoyid) {
    console.log('Searching for %s', buoyid);

    idx = -1;
    nRows = arrBuoyLocs.getNumberOfRows();
    for(iRow = 0; iRow < nRows; iRow++) {
    if(arrBuoyLocs.getValue(iRow, 0) == buoyid) {
        console.log('Got match for %s at idx %d', buoyid, iRow);
            idx = iRow;
            break;
        }
    }

    if(idx >= 0) {
        vTable.setSelection([{row: idx, column: null}]);
        // This highlights the row but does not show it if the row is
        // scrolled off the screen. How do I scroll the Table to show
        // the selected row?
    }
}

Answer 1

I have no idea how to do it with google chart api, but heres a thought that might help:

if you can find the screen height, the table row height and calculate how many table rows can fit into your screen, then you can calculate how much the scrollbar needs to scroll to show your selected table row.

so if you have a screen height that can have 20 rows shown, and you selected row 25, then you scroll the scrollbar 5 * rowHeight + margin. this can probably be done in javascript or in an ajax file.

Basically you already have all the data you need to do it, just need to findout how to scroll the scrollbar programatically in javascript.