Vis Js Timeline Component Basic Overview

Vis.js is a visualization library.Using this library we can handle large amounts of dynamic data and can manipulate the data.This library is very easy to use.

Vis.js contains the multiple components.
Here we are discussing basics of Timeline View.

Timeline Component:

Overview:
The Timeline is an collective visualization chart to conceptualize data in time. The all items can fall on one date, or can contain a start and end date it means a range is also supported. Vis js provides the option to zoom in and freely move the timeline by dragging and scrolling.Librarby supports creation, edition, and deletion of the timeline items.Timwline contains a time scale axis which is automatically adjustable ,ranges from milli seconds to years.

The timeline uses HTML DOM to make the timeline and items set to the timeline. Due to this Vis Js allows the flexible changes using css styling.

Example:

Loading:

Create a Sub folder in your project then Install the vis.js in that sub folder.After that import the library's css and script files in your html codes Head section.

<script src="vis/dist/vis.js"></script>
<link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />

The Timeline constructor is vis.Timeline

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

or when we are using groups:

var timeline = new vis.Timeline(container, items, groups, options);

The timeline constructor contains four parameters:

• Container is the DOM element in which the timeline creates.
• Items is an Array containing items. Iems are data set which we are displaying over the timeline.
• Groups is an Array containing groups. Groups are used to categories the items.
• Options is an optional Object. Options can also be set using the setOptions method . Basically using options we can set settings of the timeline.

Items:

Items over the timeline can be constructed using an Array, a DataSet, or a DataView. Items are normal objects. Items can contain the following basic properties :

start, end , content, group, className, editable, and style. (some properties are optional)

A DataSet offers 2 way data binding, a DataView offers 1 way data binding.

A DataSet is constructed as:

var items = new vis.DataSet([
  {
    start: new Date(2019, 7, 15),
    end: new Date(2015, 8, 2),  // end is optional
    content: 'Trajectory AB'
    // Optional: fields 'id', 'type', 'group', 'className', 'style'
  }
  // more item....
]);

Groups:

We can create groups using an Array, a DataSet, or a DataView. Groups are used to group the items together.Items are categrories per group.

Groups can contain the properties id, content, and className (optional).

A DataSet offers 2 way data binding, a DataView offers 1 way data binding.

setGroups method is used to apply the groups to the timeline or supplied in the constructor. Following is the example to create A data with groups:

var groups = [
  {
    id: 1,
    content: 'Group 1'
    // Optional: a field 'className', 'style', 'order', [properties]
  }
  // more groups...
]);

Configuration Options:

Options can be used to customize or set settings of the timeline.Format of the Options are JSON object. Please nothe that All options are optional.

var options = {
  width: '100%',
  height: '30px',
  margin: {
    item: 20
  }
};