Example of Timeline API in Javascript Gantt Chart Control

All Controls
/
Gantt Chart
/
Timeline API

This sample allows you to customize the Gantt chart timeline by adjusting the timeline unit size, header text format, and count for both the top and bottom tiers, and provides an option to enable the multitaskbar feature.

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
Timeline Unit Size
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar
Description

This example demonstrates how to effectively customize the timeline settings of a Gantt chart. You can customize the timeline width by adjusting the timelineunitsize property in timelineSettings. The Gantt chart supports various timeline units such as minutes, hours, days, weeks, months, and years. You can easily customize these units by changing the unit for both top tier and bottom tier in timelineSettings. The format of the timeline can be customized by modifying the format value for both the top and bottom tiers. You can combine timeline cells in the top and bottom tiers using the count property in timelineSettings. Tooltips are visible by default in the Gantt chart timeline, You can customize the tooltip visiblity by using the showtooltip property in the timeline settings. enablemultitaskbar allows you to display multiple taskbars within a parent row, ensuring a clear overview even in collapsed states. 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.