Timeline Example

An example of a Google Timeline.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
       <div id="timeline" style="width: 800px; height: 250px;"></div>
       <div id="hi">
        <svg width="100" height="200" aria-label="A chart." style="overflow: hidden;"><defs id="defs"></defs>
<g>
<rect x="0" y="0" width="856" height="40.992" stroke="none" stroke-width="0" fill="#ffffff"></rect>

<rect x="0" y="40.992" width="856" height="40.992" stroke="none" stroke-width="0" fill="#e6e6e6"></rect>

<text text-anchor="end" x="20" y="25.046" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">1</text>

<text text-anchor="end" x="20" y="66.038" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">2</text>

<text text-anchor="end" x="20" y="107.02999999999999" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#4d4d4d">3</text>

<rect x="0" y="0" width="856" height="122.976" stroke="#9a9a9a" stroke-width="1" fill-opacity="1" fill="none"></rect>

</g>

<g></g><g><</text></g><g></g><g></g><g></g><g></g></svg>
        </div>

CSS

#hi
{
  position:fixed;
  bottom:270px;
  background-color:white;
  height:125px;
  width:100px;
}
#timeline
{
  position:absolute;
  left:110px;
  top:7px;
  
}

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: 'Name' });
        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });

        dataTable.addRows([
           [ 'Jesse Matthews', 'Works as taxi driver', new Date(2003, 9), new Date(2009, 9)],[ 'Morgan Harrington', 'Morgan Harrington disappears', new Date(2009, 9, 17), new Date(2010, 0, 27)],[ 'Hannah Graham', 'Hannah Graham disappears', new Date(2014, 8, 13), new Date(2014, 9, 18)],[ 'Jesse Matthews', 'Charged with intent to defile; extradited from Texas', new Date(2014, 8, 23), new Date(2014, 8, 24)],[ 'Hannah Graham', 'Human remains confirmed as Hannah Graham', new Date(2014, 9, 25), new Date(2014, 9, 25)],[ 'Jesse Matthews', 'Investigation closed; charged with intent to defile', new Date(2015, 1, 10), new Date(2015, 1, 10)]
          ]);
          var options = {
        timeline: { colorByRowLabel: true,showRowLabels: false  }
    };

        chart.draw(dataTable,options);
      }