Timeline Example

An example of a Google Timeline.

by Loxos

HTML

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

CSS

html{background-color:white;}

JavaScript

google.charts.load('current', {'packages':['timeline']});
      google.charts.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: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
        	[ 'Login', new Date(1500376773239), new Date(1500376775139) ],
          [ 'Search',  new Date(1500376774239),  new Date(1500376774439) ],
          [ 'Item',      new Date(1500376774539),  new Date(1500376775239) ],
          [ 'Order',      new Date(1500376775239),  new Date(1500376776239) ],
          [ 'Sold',      new Date(1500376776239),  new Date(1500376777239) ]
          ]);

        chart.draw(dataTable,{height:300});
      }