Timeline

The Timeline is an interactive visualization chart to visualize the data in timeline.

---

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.

The timeline can be provided with two types of data:

• Items - containing a set of items to be displayed in time.

• Groups - containing a set of groups used to group items together.

To use the Timeline component, refer to the following steps:

1. On the Widget, navigate to List > Timeline/Gantt and drag Timeline to the UI.

2. Write one JavaScript to get the timeline data (this JavaScript contains groups and items) and drag it to the model of the Widget.

   Sample code:

   var result = {

   groups: [],

   items: [],

   };

    

   var num = 0;

   var types = ["item", "background", "point"];

   var classes = [

   "bg-red text-white",

   "bg-blue text-white",

   "bg-green text-white",

   "bg-grey text-white",

   ];

    

   for (g = 0; g < 5; g++) {

   var group = {

   id: "G-" + g,

   name: "Group " + g,

   groupClass: "bg-transparent text-black",

   };

   result.groups.push(group);

    

   for (i = 0; i < 5; i++) {

   num = num + 1;

   var now = utils.getCurrentTimestamp().getTime() + 300000 * i * (Math.random() * 10);

   var item = {

   id: "I-" + g + "-" + i,

   name: "Item " + g + "-" + i,

   start: now,

   end: now + 120000 + Math.random() * 600000,

   groupId: group.id,

   itemType: types[num % 3],

   itemClass: classes[num % 4],

   };

   result.items.push(item);

   }

   }

    

   result = utils.getMapFromJson(JSON.stringify(result));

3. Right-click on Timeline to open the Property Panel and set the following properties:

4. Navigate to Properties > DataMapping:

   • DataLoader - <JavaScript name>

   • DataBean Path - any path value (for example, timelinedata)

   • Auto Load - On

   • Items Data Path - DataBean Path.items (for example, timelinedata.items)

   • Item Id Field - id

   • Item Content Field - name

   • Item StartField - start

   • Item End Field - end

   • Item Class Field - itemClass

   • Item Display Type - itemType

   • Item Group Id Field - groupId

   • Groups Data Path - DataBean Path.groups (for example, timelinedata.groups)

   • Group Id Field - id

   • Group Content Field - name

   • Group Class Field - groupClass

5. Timeline can be customized using Vis.js Timeline API. Navigate to Properties > UI Properties > Timeline Options and set your custom script.

   Sample script for reference:

   {

   orientation: 'both',

   maxHeight: 500,

   minHeight: 200,

   sowCurrentTime: false,

   getstart() {

   var today = newDate();

   var year = today.getFullYear();

   var startdate = newDate(year, 1, 1);

   return utils.getDateString(startdate, 'YYYY/MM/DD');

   },

   getend() {

   var today = newDate();

   var year = today.getFullYear();

   var enddate = newDate(year + 1, 12, 31);

   return utils.getDateString(enddate, 'YYYY/MM/DD');

   }

   }

   API Link for reference: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options

---