Timline demo created using vis.js

http://visjs.org/

HTML

<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="outer-top-row">
  <div id="visualization-top-row"></div>
</div>
<div class="outer">
  <div id="visualization"></div>
</div>

CSS

html, body {
    height:100%;
}
      
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
      
      

   
 #visualization,
 #visualization-top-row{

 height: 100%; 
}  
.outer{
  height: 100px
}
.outer-top-row{
  height: 30px;
}

#visualization-top-row .vis-panel.vis-bottom{
  display: none;
}
#visualization-top-row .vis-timeline{
  border-bottom: none;
}

JavaScript

var groupCount = 3;
  var itemCount = 20;

  // create a data set with groups
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  var groups = new vis.DataSet();
  var groupsTopRow = new vis.DataSet();
  
  for (var g = 0; g < groupCount; g++) {
    groups.add({id: g, content: names[g]});
  }
  
  groupsTopRow .add({id: 0, content: "Add here"});

  // create a dataset with items
  var itemsTopRow = new vis.DataSet();
  var items = new vis.DataSet();

  // create visualization
  var container = document.getElementById('visualization');
  var containerTopRow = document.getElementById('visualization-top-row');
  
  var options = {
      height: '100%',
    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
  };
  
  var timelineTopRow = new vis.Timeline(containerTopRow)
  var timeline = new vis.Timeline(container);
  
  timelineTopRow.setOptions(options);
  timelineTopRow.setGroups(groupsTopRow);
  timelineTopRow.setItems(itemsTopRow);
  
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);

  // Sync Position
  timeline.on('rangechange', function (changes) {
  	
  	if(changes.byUser){
  		timelineTopRow.setWindow(changes.start, changes.end);
  	}
  });

  timelineTopRow.on('rangechange', function (changes) {
  	if(changes.byUser){
  		timeline.setWindow(changes.start, changes.end);
  	}
  });
  
  function onSelect (properties) {
    alert('selected items: ' + properties.nodes);
  }
	
  // add event listener
  timeline.on('select', onSelect);
	
  // remove event listener
  timeline.off('select', onSelect);
  
  
  
  
  // Equal Width for 1st colum, the one with names
  visLabelSameWidth();
  
  $(window).resize(function(){
  	visLabelSameWidth();
  });
  
  // Vis same width label.
  function visLabelSameWidth(){
  	$(".vis-labelset .vis-label").css('width', '');
    var maxWidth = Math.max.apply(null, $(".vis-labelset .vis-label").map(function (){
        return $(this).width();
    }).get());
  ...