I’ve tried many times without success to adjust the template code to Google Apps Script. This code doesn’t work to Google Apps Script as wished. thanks in advance…


    function doGet() {
  return HtmlService.createTemplateFromFile('Main')

function onLogin(form) {
  if (form.username == "xxx") {
    var template =  HtmlService.createTemplateFromFile('Response');

    //Setup any variables that should be used in the page
    template.firstName = "Your name is here";
    template.username = form.username;

    return template.evaluate()
  } else {
    throw "You could not be found in the database please try again.";

function include(filename) {
  return HtmlService.createTemplateFromFile(filename)


<?!= include('CSS'); ?>
  function loadPage(htmlOut) {
    var div = document.getElementById('content');
    div.innerHTML = htmlOut;
    document.getElementById('errors').innerHTML = "";
  function onFailure(error) {
    var errors = document.getElementById('errors');
    errors.innerHTML = error.message;
<div id="errors"></div>
<div id="content">
  <?!= include('Login'); ?>


  p b {
    width: 100px;
    display: inline-block;


  function onLoginFailure(error) {
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = false;
    loginBtn.value = 'Login';
<div class="loginPanel">
      <b>Username: </b>
      <input type="text" name="username"/>
    <input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run


    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar"]});

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
          bar: { groupWidth: "90%" }

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>

This is the published app. Type in to username: xxx.


For a working example of your code, click the following link:

Apps Script – Visualization after Login

The Apps Script file with code:

Shared Apps Script File

I see that you want to have a chart displayed after the log in. And the HTML file for the chart has a <script> tag with:

google.load("visualization", "1.1", {packages:["bar"]});

I don’t think that the evaluate method will create the chart in the server before it’s sent back to the browser.

Also, there is this line:


Because the google.load() function is not running, there is no callback. So, the drawStuff() function is never getting called when the HTML is being injected.

You can’t dynamically add <script> tags to HTML and have it run. You’ll need to add all the <script> tags to the Main.html page when the app first runs. It is possible to create a new function, and then run that function at any time after the page has first loaded. You’d need to use

var myFunc = new Function('a', 'b', 'return a + b');

Mozilla new function

There is also another problem. You need to remove:

this.disabled = true;

from the onclick attribute.

So, I would put the <script> tags for the visualization stuff into the Main.html file.