Example of Timeline API in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Timeline API

This sample illustrates the different phases from planning to delivery, involved in a software development lifecycle. It demonstrates the different timeline modes available in the Gantt chart. Options are available to change the unit, format, and count of the header texts for both top and bottom timeline headers.

More Details...

1
Project schedule
2/8/20243/13/202425 days48
2
Planning
2/8/20242/14/20245 days100
3
Plan timeline
2/8/20242/14/20245 days100
4
Plan budget
2/8/20242/14/20245 days100
5
Allocate resources
2/8/20242/14/20245 days100
6
Planning complete
2/14/20242/14/20240 days3FS,4FS,5FS0
7
Design
2/15/20242/21/20245 days85
8
Software specification
2/15/20242/19/20243 days6FS60
9
Develop prototype
2/15/20242/19/20243 days6FS100
10
Get approval from customer
2/20/20242/21/20242 days9FS100
11
Design complete
2/21/20242/21/20240 days10FS0
12
Implementation phase
2/22/20243/6/202410 days26
13
Phase 1
2/22/20243/5/20249 days25
14
Implementation module 1
2/22/20243/5/20249 days25
15
Development task 1
2/22/20242/26/20243 days11FS50
16
Development task 2
2/22/20242/26/20243 days11FS50
17
Testing
2/27/20242/28/20242 days15FS,16FS0
18
Bug fix
2/29/20243/1/20242 days17FS0
19
Customer review meeting
3/4/20243/5/20242 days18FS0
20
Phase 1 complete
3/5/20243/5/20240 days19FS0
21
Phase 2
2/22/20243/6/202410 days28
22
Implementation Module 2
2/22/20243/6/202410 days28
23
Development task 1
2/22/20242/27/20244 days50
24
Development task 2
2/22/20242/27/20244 days50
25
Testing
2/28/20242/29/20242 days23FS,24FS0
26
Bug fix
3/1/20243/4/20242 days25FS0
27
Customer review meeting
3/5/20243/6/20242 days26FS0
28
Phase 2 complete
3/6/20243/6/20240 days27FS0
29
Phase 3
2/22/20243/5/20249 days25
30
Implementation module 3
2/22/20243/5/20249 days25
31
Development task 1
2/22/20242/26/20243 days50
32
Development task 2
2/22/20242/26/20243 days50
33
Testing
2/27/20242/28/20242 days31FS,32FS0
34
Bug fix
2/29/20243/1/20242 days33FS0
35
Customer review meeting
3/4/20243/5/20242 days34FS0
36
Phase 3 complete
3/5/20243/5/20240 days35FS0
37
Integration
3/7/20243/11/20243 days20FS,28FS,36FS0
38
Final testing
3/12/20243/13/20242 days37FS0
39
Final delivery
3/13/20243/13/20240 days38FS0
Project schedule
Planning
Plan timeline
Plan budget
Allocate resources
Planning complete
Design
Software specification
Develop prototype
Get approval from customer
Design complete
Implementation phase
Phase 1
Implementation module 1
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 1 complete
Phase 2
Implementation Module 2
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 2 complete
Phase 3
Implementation module 3
Development task 1
Development task 2
Testing
Bug fix
Customer review meeting
Phase 3 complete
Integration
Final testing
Final delivery
Unit width
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar
Description

In this example, you can see how to change the timeline settings in Gantt chart. The top and bottom timeline header texts can be customized by using the timelineSettings.topTier and timelineSettings.bottomTier properties. Using these properties, you can change the format, count, and units of the timeline header texts. Gantt chart has built-in support for many timeline modes such as minutes, hour, day, week, month and year. The default timeline headers can also be replaced with custom header texts by using the formatter method. Tooltip is enabled by default for the timeline headers, to see the tooltip in action, hover a point or tap on a point in touch enabled devices. Injecting Module: Gantt control features are segregated into individual feature-wise modules. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method. To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method. If the enableMultiTaskbar property is enabled, it displays child taskbars in the parent row when in collapsed state.