title: Google Apps Script webApp UI redraw UI
body: <p>I have a GAS which displays a leader board (Google Chart) from a Google Spreadsheet.</p>
  
  <p>I like to make it so that each time there is an update to the spreadsheet, the chart would refresh and show the latest scores.</p>
  
  <p>Every time there is a new score, the spreadsheet calculates the new scores and updates the list. (This part is already working correctly using GAS)</p>
  
  <p>what does NOT seem to work is that the webApp does not reload/redraw the chart.</p>
  
  <p>the <code>logChange()</code> function is called by a Spreadsheet Trigger <code>onChange()</code> which fires when the spreadsheet is changed and successfully logs the beginning and end of its process (successfully calls the <code>redrawUI()</code> function).</p>
  
  <p>The webApp code is provided below. Can anyone help me make this app redraw the chart each time there is a change in the spreadsheet?</p>
  
  <pre><code>function doGet(e) {
    var app = drawUI();
    return app;
  }
  
  function logChange(e) {
    Logger.log("Changed at: " + new Date());
    redrawUI();
    Logger.log("after redrawUI recall " + new Date());
    return app;
  }
  
  function redrawUI() {
    var app = drawUI();
    return app;
  }
  
  function drawChart() {
    var ss = SpreadsheetApp.openById('txS....w'); //Spreadsheet Key
    var hs = ss.getSheetByName('All Scores');
    var data = hs.getRange(1, 1, 11, 3);
  
    var barChart = Charts.newBarChart()
    .setDataViewDefinition(Charts.newDataViewDefinition().setColumns([1,2]))
    .setDataTable(data)
    .setOption('axisTitlesPosition', 'in')
    .setOption('hAxis.minorGridlines.count', 9)
    .setOption('theme', 'maximized')
    .setOption('colors', ['#45818e'])
    .setLegendPosition(Charts.Position.NONE)
    .setYAxisTextStyle(Charts.newTextStyle().setFontName('Courier New').setFontSize(48))
    .setDimensions(1000, 800)
    .build();
  
    return barChart;
  }
  
  function drawUI() {
    var barChart = drawChart();
  
    var app = UiApp.createApplication();
    var mainPanel = app.createHorizontalPanel();
    var hsLabel = app.createLabel("THE Geek Game 2013")
                     .setStyleAttribute("font-size", "5em")
                     .setStyleAttribute("font-weight", "bold")
                     .setStyleAttribute("line-height", "2em");
    var subLabel = app.createLabel("Leader Board")
                     .setStyleAttribute("font-size", "3em")
                     .setStyleAttribute("font-weight", "bold")
    var vPanel = app.createVerticalPanel().setId("vPanel");
  
    mainPanel.add(vPanel).setSize("100%", "100%")
      .setCellHorizontalAlignment(vPanel, (UiApp.HorizontalAlignment.CENTER));
    vPanel.add(hsLabel).add(subLabel);
    vPanel.add(barChart).setSize("500", "100%");
    vPanel.setCellHorizontalAlignment(hsLabel, (UiApp.HorizontalAlignment.CENTER));
    vPanel.setCellHorizontalAlignment(subLabel, (UiApp.HorizontalAlignment.CENTER));
  
    app.add(mainPanel);
    app.createServerHandler("redrawUI");  
    return app;
  }
  </code></pre>
  
  <p>If you like to see how the current app displays you see this link:
  <a href="https://script.google.com/macros/s/AKfycbykZZYCXd9SCJL0pnoNrR7L5ekdFQb8CzRsut0vLunKwq4jg8o/exec" rel="nofollow">https://script.google.com/macros/s/AKfycbykZZYCXd9SCJL0pnoNrR7L5ekdFQb8CzRsut0vLunKwq4jg8o/exec</a></p>