JSFiddle - React, Tailwind, and code Playground

by giuseppe straziota

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css">
<div id="example-timeline"></div>

CSS

vis-panel: {
  border: none;
}

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: 'Treatment',
    start: '2016-01-01',
    end: '2016-02-10',
    type: 'range',
    group: 1,
    subgroup: 88,
    editable: true
}, {
    id: 2,
    content: 'Remissie',
    start: '2016-01-10',
    group: 2
}, {
    id: 3,
    content: 'Recifief',
    start: '2016-01-15',
    group: 1
}, {
    id: 4,
    content: 'Complicatie',
    start: '2016-01-16',
    group: 3
},
{
    id: 6,
    content: 'Treatment2',
    start: '2016-01-15',
    end: '2016-03-10',
    type: 'range',
    group: 2
}
]);

var groups = [
{
	id: 1,
  content: 'Acute Leukemie',
  subgroupOrder: function (a,b) {
  	return a.subgroupOrder - b.subgroupOrder;
  }
},
{
	id: 2,
  content: 'Therapie1'
},
{
	id: 3,
  content: 'Therapie2'
}
];

// 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: 10
    }
};

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