HTML Page

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(getData);

      function getData(){
        google.script.run.withSuccessHandler(drawChart).useDataRange();
      }

      function drawChart(data) {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President'});        
        dataTable.addColumn({ type: 'string', id: 'dummy bar label'});
        dataTable.addColumn({ type: 'string', role: 'tooltip'});
        dataTable.addColumn({ type: 'string', id: 'style', role: 'style'});
        dataTable.addColumn({ type: 'date', id: 'Start'});
        dataTable.addColumn({ type: 'date', id: 'End'});
        
        var rows = [];

        //Loop through the data you loaded and push it to the rows array
        //You need to fix the dates in this step

        for(var i=0; i<data.length; i++){
          var currentElement = data[i];
          var transformFirstDate = new Date(currentElement[4]);
          var transformSecondDate = new Date(currentElement[5])

          rows.push([currentElement[0],currentElement[1],currentElement[2],currentElement[3],transformFirstDate,transformSecondDate]);
        }

        dataTable.addRows(rows);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="timeline-tooltip" style="height: 400px;"></div>
  </body>
</html>
Editor is loading...