Google-apps-script row height when filtering

Question

I am using a google-apps-script datatable with a StringFilter to be able to filter rows based on the content of one of the columns. The problem is that when I use the filter, the row height changes to fill the whole table. I would like row height to stay unchanged, as it is not user-friendly specially when you filter and you only get one or two results.

If you use the code example that Google provides in the developers page, you will see the problem:

What should I change so that row height remains unchanged?

Thanks!

Gerardo Gerardo · Accepted Answer · 2015-09-01T21:34:57

I checked that example and you are right, every row changes to fit the table. Also the example uses UI service which is deprecated. I tried using the Charts API and was able to provide different attributes to the chart and even accomplish what you mentioned.

To run the chart also from Apps script you will need the function:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Then you have to create a html file called "index" (or other name you want) and there you will create the html and javascript code.

      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a bar chart,
      // passes in the data and draws it.      
      function drawDashboard() {
         var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]); 
      
        drawChart(data)
      }

      
       function drawChart(data) {

       
        // Create a dashboard.        
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var stringFilter = new google.visualization.ControlWrapper({
            controlType: 'StringFilter',
            containerId: 'filter_div',
            options: {
            filterColumnLabel: 'Motivation Level'
               }
        });

        
        
        // Define a table
        var table = new google.visualization.ChartWrapper({
          chartType: 'Table',
          dataTable: data,
          containerId: 'table_div',
          options: {
          width: '400px'
               }
         });
       
        // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
        // so that the column chart will only display entries that are let through
        // given the chosen slider range.
        
        dashboard.bind([stringFilter], [table]);

        // Draw the dashboard.
        dashboard.draw(data);
      }

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
  </head>
  <body>
  
    <!--Div that will hold the dashboard-->
     <div id="dashboard_div">
    
     <h2>Chart Data</h2>
     
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <br />
      <table>
        <tr>
          <td>
            <div id="chart_div"></div>
          </td>
          <td>
            <div id="table_div"></div>
          </td>
        </tr>
      </table>

    </div>

  </body>
</html>

When creating the Table, notice that I only defined the 'width' of the table and not the height. With this the height gets fixed dynamically.

Google-apps-script row height when filtering

1 Answers