Get chart in Google site to resize automatically

[Newbie]

Hi,

I have several Google Charts embedded as gadgets in a Google site. I have used the old API system. Does anyone know how I set the charts to resize automatically based on the screen size that of the user? At the moment the charts look fine in my screen but when another user uses them on a screen with a diff resolution parts of the chart get cut off.

Code for the charts is below.

Thanks

Scott

function doGet() {

  var ss = SpreadsheetApp.openById('SHEET ID');

  var data = ss.getDataRange();

  

  var periodFilter = Charts.newNumberRangeFilter().setFilterColumnIndex(5).build();

 

  var tableChart = Charts.newTableChart()

      .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([2,3,4,5,6,7,8,9,10,11]))

  .build();

  

  var dashboard = Charts.newDashboardPanel().setDataTable(data)

  .bind([periodFilter], [tableChart])

  .build();

  

  var app = UiApp.createApplication();

  var filterPanel = app.createVerticalPanel();

  var chartPanel = app.createHorizontalPanel(); 

  filterPanel.add(periodFilter).setSpacing(10);

  chartPanel.add(tableChart);

  

  dashboard.add(app.createHorizontalPanel().add(filterPanel).add(chartPanel));

  app.add(dashboard);

  return app;

}

[Newbie]

Sorry that code was wrong, correct code is:

function doGet() {

  var ss = SpreadsheetApp.openById('1_wFpkD0pniQ5fQ0kS2w7FwuB6FkeywqG91-ADWrJLJ4');

  var data = ss.getDataRange();

  

  var tableChart = Charts.newTableChart()

      .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([3,4,5,6,7,8,9,10,11]))

      .setDimensions(1150, 700)

  .build();

  

  var periodFilter = Charts.newNumberRangeFilter().setFilterColumnIndex(5).build();

  var countryFilter = Charts.newCategoryFilter().setFilterColumnIndex(1).build();

  var functionFilter = Charts.newCategoryFilter().setFilterColumnIndex(3).build();

  var siteFilter = Charts.newCategoryFilter().setFilterColumnIndex(4).build();

  var dashboard = Charts.newDashboardPanel().setDataTable(data)

  .bind([periodFilter, countryFilter, functionFilter, siteFilter], [tableChart])

  .build();

  

  var app = UiApp.createApplication();

  var filterPanel = app.createHorizontalPanel();

  var chartPanel = app.createHorizontalPanel();

  filterPanel.add(periodFilter).add(countryFilter).add(functionFilter).add(siteFilter).setSpacing(10);

  chartPanel.add(tableChart).setSpacing(10);

  

  dashboard.add(app.createVerticalPanel().add(filterPanel).add(chartPanel));

  app.add(dashboard);

  return app;

}

If I do not have the .setDimensions in there the chart displayed with scrollbars is not large enough to view