Timeline Example

An example of a Google Timeline.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 180px;"></div>
   <div id="example3.1" style="height: 200px;"></div>

JavaScript

google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Ship' });
    dataTable.addColumn({ type: 'string', id: 'Status' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Vighnaraj', 'Arrival', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Vighnaraj', 'OffLoading', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Vighnaraj', 'Loading', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'VishwaUday','Arrival', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'VishwaUday','Awaiting', new Date(1789, 3, 10), new Date(1797, 3,11)],
      [ 'VishwaUday','OffLoading', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'VishwaUday','Loading', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'VishwaUday', 'Loading', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'VishwaUday', 'Awaiting', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'LadyZ', 'Arrival', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'LadyZ', 'OffLoading', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'LadyZ', 'Loading', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'LadyZ', 'Receiving', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'LadyZ', 'Awaiting', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Meenakshi', 'Arrival', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Meenakshi', 'OffLoading', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Meenakshi', 'Loading', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);


   	var colors = [];
    var colorMap = {
        // should contain a map of category -> color for every...