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">
<div id="example-timeline"></div>

CSS

.vis-item, .vis-range {
      width:auto !important;
      margin: 2px !important;
    }

JavaScript

//Timline demo created using vis.js - http://visjs.org/ 

//Configuration options for a timeline - http://visjs.org/docs/timeline.html#Configuration_Options



// DOM element where the Timeline will be attached
var container = document.getElementById('example-timeline');

// Create a DataSet with data 
var data = new vis.DataSet([{
    id: 1,
    content: 'First event',
    start: '2014-08-01',
    end: '2014-08-05',
    template : 'template1'
}, {
    id: 2,
    content: 'Pi and Mash',
    start: '2014-08-06',
    end: '2014-08-10',
    template : 'template2'
}, {
    id: 3,
    content: 'Wikimania',
    start: '2014-08-011',
    end: '2014-08-15',
    template : 'template2'
}
]);

// Configuration for the Timeline as JSON object
var options = {
    width: '100%',
    editable: false, /* this option means you can add or remove items by clicking on the timeline */
    margin: {
        item: 20
    },
    template: function (item) {
      var template = item.content
      return template;
  },
  stack: false
};

// Create a Timeline
var timeline = new vis.Timeline(container, null, options);
timeline.setItems(data);