title: Ingest data from Google sheets to make a gantt chart on Google script and serve the HTML as web app
body: <p>I'm attempting to create a Google Gantt Chart on Google Script, pulling data from a Google Sheets spreadsheet to serve the HTML as web app. I managed to do the trick with other types of charts, but I think there's some problem with the date format, as I keep getting erros like "Invalid data table format: column #3 must be of type 'date'"</p>
  
  <p>I'm not familiar with Javascript, so I'm really lost here. Here is the code on my Code.gs. The file has to be private, it's on my work Gsuite, but is a simple test with data formatted as in the <a href="https://developers.google.com/chart/interactive/docs/gallery/ganttchart" rel="nofollow noreferrer">Google Gantt Charts documentation</a>.</p>
  
  <pre><code>function doGet() {
  
    return HtmlService
    .createTemplateFromFile("Index")
    .evaluate()
    .setTitle("MKT Simple Cycle")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);  
  }
  
  
  function getCycle() {
  
    var ssID   = "1p4jEZtSk4GoVWvR9OrZj2ou1dpUbl6GHYUlJ1bSVY-s",
    sheet  = SpreadsheetApp.openById(ssID).getSheets()[0],
    data   = sheet.getDataRange().getValues();
    return data
  
  }
  </code></pre>
  
  <p>And here is the code on my Javascript.html:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  google.charts.load('current', {'packages':['gantt']});
  google.charts.setOnLoadCallback(getCycle);
  
  function getCycle() {
    google.script.run.withSuccessHandler(drawChart).getCycle();
  }
  
  function drawChart(rows) {
  
    var data = google.visualization.arrayToDataTable(rows, false);
  
    var options = {
      height: 400,
      gantt: {
        trackHeight: 30
      }
    };
  
    var chart = new google.visualization.Gantt(document.getElementById('Cycle'));
  
    chart.draw(data, options);
  
  }
  </code></pre>
  
  <p></p>