This visualization library is a dynamic and browser-based library designed to handle large amounts of dynamic data and to enable manipulation of and interaction with the data.
You can read more about this library on the official website.
The example I share with you and my codepen account is about :
First, you need to create this HTML5 tag:
1 | <div id="visjs"></div> |
The CSS I used is this:
1 2 3 4 5 | #visjs { box-sizing: border-box; width: 100%; height: 300px; } |
The javascript is used to create the items and groups of items like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // using the DOM element var container = document.getElementById('visjs'); // create a DataSet and fill with data var items = new vis.DataSet([ {id: 1, content: 'day 0', start: '1976-03-07', type: 'point'}, {id: 2, content: 'my first CI', start: '1990-03-10'}, {id: 3, content: 'college', start: '1990-09-15', end: '1994-09-15'}, {id: 4, content: 'licensed management', start: '1999-09-15', type: 'point'}, {id: 5, content: 'my first computer', start: '2002-04-25'}, {id: 6, content: 'Pascal language', start: '1993-06-03', type: 'point'} ]); // Configuration for the Timeline var options = {}; // Create a Timeline var timeline = new vis.Timeline(container, items, options); |
This is the final result.
See the Pen visjs_001 by Cătălin George Feștilă (@catafest) on CodePen.