Example of Timeline API in Blazor Gantt Chart Component
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
ID | Name | Start Date | End Date | Duration | Progress | Dependency | Notes |
|---|
| 1 | Project initiation | 4/5/2021 | 4/16/2021 | 10 days | 56 | ||
| 2 | Identify site location | 4/5/2021 | 4/9/2021 | 5 days | 70 | ||
| 3 | Perform soil test | 4/5/2021 | 4/9/2021 | 5 days | 50 | ||
| 4 | Soil test approval | 4/12/2021 | 4/16/2021 | 5 days | 50 | 2FS | |
| 5 | Project estimation | 4/12/2021 | 4/16/2021 | 5 days | 25 | ||
| 6 | Develop floor plan for estimation | 4/12/2021 | 4/16/2021 | 5 days | 0 | ||
| 7 | List materials | 4/12/2021 | 4/16/2021 | 5 days | 50 | ||
| 8 | Development of final design | 4/5/2021 | 4/7/2021 | 3 days | 23 | ||
| 9 | Develop dimensions and design | 4/5/2021 | 4/6/2021 | 2 days | 30 | ||
| 10 | Develop designs to meet industry | 4/5/2021 | 4/6/2021 | 2 days | 40 | ||
| 11 | Include all the details | 4/5/2021 | 4/7/2021 | 3 days | 30 | ||
| 12 | CAD - Computer Aided Design | 4/5/2021 | 4/7/2021 | 3 days | 0 |
Apr 02, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 | Jul 11, 2021 | Jul 18, 2021 | Jul 25, 2021 | Aug 01, 2021 | Aug 08, 2021 | Aug 15, 2021 |
F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F |
Properties
Unit width |
|
Top tier | |
Count |
|
Unit |
|
Format |
|
Bottom tier | |
Count |
|
Unit |
|
Format |
In this example, you can see how to change the timeline settings in the 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.
Using GanttTimelineSettings.TimelineViewMode, the Gantt Chart can visualize many timeline modes such as minutes, hours, days, weeks, months, and years.
Tooltip is enabled by default for the timeline headers. To see the tooltip in action, hover over a point or tap on a point on touch-enabled devices.
More information about the timeline in the Gantt chart can be found in this documentation section.