How to keep data in view when using 'controlType': 'StringFilter' on a Table?

18 views
Skip to first unread message

Wouter

unread,
Feb 5, 2018, 4:16:46 PM2/5/18
to Google Visualization API
How to keep data in view when using 'controlType': 'StringFilter' on a Table?

I generate data using Python and calculate the right table heigth using 50+(tableRows*50). Some table contain 100+ rows -> adding the  'controlType': 'StringFilter'  is great.

However, the remaining rows (almost) disappear from the user view after filtering. This also happens if I use height 100% in a large div. I unfortunately cannot reproduce the automatic resizing that occurs in this example. Please advice how to avoid this? E.g. can I align the filtered data to the top (currently it is vertically centered). Or can I set table height based on the number of rows?

I like this example where the option is set based on an own var, but it does not seem to work for the dashboard (because the options are already set, unlike the chart.draw(data, optionsthat happens after ?) 

This is what I tried, I would really appreciate your help, I am learning by doing :)



function tabelGemeenteOverzicht() {
 
var tableHeight = '8000';
 
var dashboard = new google.visualization.Dashboard(
        document
.getElementById('dashboard-gemeente-wijken-buurten-overzicht'));
 
var data = google.visualization.arrayToDataTable([
       
['Naam', 'Regio', 'Actief', 'Informatie periode', 'Aantal<br>inwoners'],
       
{{ .Params.gemeenteoverzicht | safeJS }} ]);
 
var control = new google.visualization.ControlWrapper({
     
'controlType': 'StringFilter',
     
'containerId': 'filter-gemeente-wijken-buurten-overzicht',
     
'options': { 'filterColumnLabel': 'Naam', 'matchType': 'any'} });
 
var table = new google.visualization.ChartWrapper({
 
'chartType': 'Table',
 
'containerId': 'tabel-gemeente-wijken-buurten-overzicht',
 
'options': {'height': tableHeight, 'width': '100%', 'allowHtml': true, 'showRowNumber': false}  });
  dashboard
.bind(control, table);
  google
.visualization.events.addListener(dashboard, 'ready', heightHandler)
  dashboard
.draw(data); } ;


function heightHandler() {
 
var tableRows = table.getDataTable().getNumberOfRows();
 
var tableHeight = 50+(tableRows*50); }

Reply all
Reply to author
Forward
0 new messages