ShipRotationUsingRole

by TimunAb

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['timeline']}]}"></script>
<div id="example3.1" style="height: 200px;"></div>

JavaScript

google.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: 'Position' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'string', role: 'style' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ '100', 'Complete','#b5b5b5', new Date(1789, 3, 30), new Date(1790, 2, 4) ],
   	[ '100', 'ATL', '#ffffff', new Date(1790, 3, 30), new Date(1792, 2, 4) ],
    [ '100', 'Taxi out', '#ffc1c1', new Date(1792, 3, 30), new Date(1794, 2, 4) ],
  	[ '100', 'SEA','#ffffff', new Date(1794, 2, 4), new Date(1797, 2, 4) ],
    [ '100', 'Flight','#ffff33', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
    [ '100', 'Taxi in', '#ffc1c1', new Date(1801, 2, 4), new Date(1809, 2, 4)  ],
    [ '100', 'Preflight','#21a9ff' , new Date(1809, 2, 4), new Date(1812, 2, 4)],
    [ '101', 'Complete', '#b5b5b5', new Date(1789, 3, 30), new Date(1792, 2, 4)],
    [ '101', 'Taxi out', '#ffc1c1', new Date(1792, 3, 30), new Date(1797, 2, 4)],
    [ '101', 'Flight','#ffff33' , new Date(1797, 2, 4), new Date(1801, 2, 4)],
    [ '101', 'Taxi in', '#ffc1c1', new Date(1801, 2, 4), new Date(1809, 2, 4)],
    [ '101', 'Preflight','#21a9ff' , new Date(1809, 2, 4), new Date(1812, 2, 4)],
    [ '102', 'Taxi out', '#ffc1c1', new Date(1789, 3, 21), new Date(1797, 2, 4)],
    [ '102', 'Flight','#ffff33', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    [ '102', 'Taxi in', '#ffc1c1', new Date(1801, 2, 4), new Date(1805, 2, 4)],
    [ '102', 'Preflight','#21a9ff', new Date(1805, 2, 4), new Date(1810, 2, 4)]
    ]);

        var colors = [];
    var colorMap = {
        // should contain a map of category -> color for every category
        'Complete': '#b5b5b5',
        'Taxi...