Timeline with VIS.js - using HTML
http://visjs.org/examples/timeline/04_html_data.html
HTML
<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<p>Load HTML contents in the Timeline</p>
<div id="visualization"></div>
CSS
body, html {
font-family: lucida grande, sans-serif;
font-size: 10pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
JavaScript
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 4, content: 'Seg 1', start: '2018-11-12 10:00', end: '2018-11-12 10:10'},
{id: 4, content: 'Seg 2', start: '2018-11-12 10:15', end: '2018-11-12 10:50'}
]);
// Configuration for the Timeline
//var options = {};
var options = {
width: '100%',
height: '200px',
margin: {
item: 20
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);