Vis.js Timeline

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<a href="http://visjs.org/" target="_blank">http://visjs.org/</a>
<div id="timeline"></div>

CSS

body, input {
      font: 12pt verdana;
    }
    /* custom styles for individual items, load this after vis.css */
    .vis.timeline .item.green {
      background-color: greenyellow;
      border-color: green;
    }
    /* create a custom sized dot at the bottom of the red item */
    .vis.timeline .item.red {
      background-color: red;
      border-color: darkred;
      color: white;
      font-family: monospace;
      box-shadow: 0 0 10px gray;
    }
    .vis.timeline .item.dot.red {
      border-radius: 10px;
      border-width: 10px;
    }
    .vis.timeline .item.line.red {
      border-width: 5px;
    }
    .vis.timeline .item.box.red {
      border-radius: 0;
      border-width: 2px;
      font-size: 24pt;
      font-weight: bold;
    }
    .vis.timeline .item.orange {
      background-color: gold;
      border-color: orange;
    }
    .vis.timeline .item.orange.selected {
      /* custom colors for selected orange items */
      background-color: orange;
      border-color: orangered;
    }
    .vis.timeline .item.magenta {
      background-color: magenta;
      border-color: purple;
      color: white;
    }
    /* our custom classes overrule the styles for selected events,
       so lets define a new style for the selected events */
    .vis.timeline .item.selected {
      background-color: white;
      border-color: black;
      color: black;
      box-shadow: 0 0 10px gray;
    }

JavaScript

var container = document.getElementById('timeline');

    // Create a DataSet with data (enables two way data binding)
    var data = new vis.DataSet([
      {id: 1, content: 'item 1', start: '2013-04-20'},
      {id: 2, content: 'item 2', start: '2013-04-14'},
      {id: 3, content: 'item 3', start: '2013-04-18'},
      {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', 'className': 'orange'},
      {id: 5, content: 'item 5', start: '2013-04-25'},
      {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

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