Brief Introduction To Vis Js Timeline

OverView

Timeline is an interactive visualization chart to visualize data on time. Data items can be on the same date, or there may be a start and end date (a category). You can easily move and zoom from time to time by dragging and scrolling in the timeline. Items can be created, edited, and deleted in the timeline, the time size on the axis is automatically adjusted, and supports the scales from millisecond to year. 

The timeline uses regular HTML DOM to render timelines and items placed on the timeline, allowing for flexible customization using this CSS style.

Install or download the vis.js library in your project's subfolders Include Library's script and CSS files in the head of your HTML code:

The timeline is a construtor of the Timeline

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

Items

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