Preview Download

Vis Timeline

The Timeline is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the Timeline. Items can be created, edited, and deleted in the timeline. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years.

visjs.org

github.com/visjs/vis-timeline

Documentation

Licence

v7.7.2

We used some 3rd party plugins while developing the Qoduby template. We have customized these plugins according to our template. You can view examples of this plugin below.

You can find the original documentation of this plugin in the info card above.

Basic Example

										
// 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: 1, content: 'item 1', start: '2014-04-20'},
  {id: 2, content: 'item 2', start: '2014-04-14'},
  {id: 3, content: 'item 3', start: '2014-04-18'},
  {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
  {id: 5, content: 'item 5', start: '2014-04-25'},
  {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);

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

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

										
<div id="visualization"></div>

Advance Example

										
// Create a DataSet (allows two way data-binding)
var visualization2 = document.getElementById('visualization2');
var items = new vis.DataSet([
  {
    id: 1, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>Research</span></div><div><strong>SEO</strong></div>',
    start: '2023-04-09', 
    end: '2023-04-11',
    'className': 'bg-primary'
  },
  {
    id: 2, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>Dashboard Development</span></div><div><strong>DEVELOPMENT</strong></div>',
    start: '2023-04-12', 
    end: '2023-04-15',
    'className': 'bg-info'
  },
  {
    id: 3, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>Logo & Branding Design</span></div><div><strong>DESIGN</strong></div>',
    start: '2023-04-09', 
    end: '2023-04-13',
    'className': 'bg-success'
  },
  {
    id: 4, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>iOS Front-End</span></div><div><strong>MOBILE</strong></div>',
    start: '2023-04-10', 
    end: '2023-04-12',
    'className': 'bg-warning'
  },
  {
    id: 5, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>Android Front-End</span></div><div><strong>MOBILE</strong></div>',
    start: '2023-04-13', 
    end: '2023-04-15',
    'className': 'bg-danger'
  },
  {
    id: 6, 
    content: '<div><img src="https://placehold.co/200x200/dcdcfe/5151f9"> <span>Web Back-End</span></div><div><strong>DEVELOPMENT</strong></div>',
    start: '2023-04-10', 
    end: '2023-04-13',
    'className': 'bg-dark',
    graphHeight: '45px',
  },
]);

// Configuration for the Timeline
var options = {
  zoomable: false,
  orientation: 'bottom',
  showMajorLabels: true,
  showMinorLabels: true,
  type: 'range',
  margin: {
    item: {
      vertical: 50,
    }
  }
};

// Create a Timeline
var timeline2 = new vis.Timeline(visualization2, items, options);

										
<div id="visualization2"></div>