Timeline Example

An example of a Google Timeline.

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;timeline&#39;]}]}"></script>
 <div>
        <h4><p class="text-center">A Timeline</p></h4>
        <div id="timeline" style="width: 95%;"></div>
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

CSS

div.google-visualization-tooltip {
    width: auto;
    height:auto;
    background-color: #ccccff;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

JavaScript

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

    dataTable.addColumn({ type: 'string', id: 'RowLabel' });
    dataTable.addColumn({ type: 'string', id: 'BlockLabel' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
    ["SAT 2B", "Task 1", new Date(2015, 01, 01), new Date(2015, 02, 02)],
    ["SAT 2B", "Task 2", new Date(2015, 01, 05), new Date(2015, 01, 08)],
    ["SAT 2B", "Task 1", new Date("2015-03-10 05:10:39.010000"), new Date("2015-03-15 05:10:39.010000")],
    ["SAT 2C", "Task 1", new Date("2015-04-10 05:10:39.010000"), new Date("2015-04-15 05:10:39.010000")]
    ]);


    var options = {
        timeline: { colorByRowLabel: true }
    };


    chart.draw(dataTable, options);

    google.visualization.events.addListener(chart, 'onmouseover', function(e) {
        setTooltipContent(dataTable,e.row);
    });
}


function setTooltipContent(dataTable,row) {
    
    if (row != null) {
    	var sat = dataTable.getValue(row,0);
      var taskID = dataTable.getValue(row,1);
      var start = dataTable.getValue(row,2).toDateString();
      console.log(typeof start);
      console.log(start);
      var startFormatted = new Date(start, "dd.mm.yyyy hh:MM:ss")
  		//startTime = startDate.toUTCString().replace("GMT","UTC");
      //start.format("dddd, MMMM Do YYYY, h:mm:ss a");
      //start.format('yyyy/DDD-HH:mm:ss');
      var end = dataTable.getValue(row,3);
      
        var content = '<div class="custom-tooltip" ><h1>' + sat + ','+ taskID +'</h1><div>' +'Start:'+startFormatted +', End: '+ end+'</div></div>'; //generate tooltip content
        var tooltip = document.getElementsByClassName("google-visualization-tooltip")[0];
        tooltip.innerHTML = content;
    }
}