Blazor Gantt Chart Example - Timeline API Customization
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
This sample demonstrates a construction planning workflow from site analysis and soil testing to estimation and design, while showcasing the flexible timeline customization options available in the Blazor Gantt Chart . It illustrates how real-world engineering processes can be effectively represented using task hierarchies, dependencies, and progress tracking across different phases, including site identification, approval, estimation, and detailed design.
The Gantt Chart supports customizable timeline tiers, enabling precise control over interval representation through the TimelineSettings.TopTier and TimelineSettings.BottomTier properties. These settings allow you to define the unit, format, and count of both top and bottom timeline headers, ensuring accurate and flexible visualization of time-based data.
This flexibility allows the timeline view to adapt to varying project durations, ranging from short-term tasks measured in hours to long-term planning across days, weeks, months, quarter-years, half-years, and years.
The sample also includes an interactive property panel that enables runtime modification of timeline settings such as unit width, tier configuration, counts, and display formats. This provides immediate visual feedback and allows users to experiment with different timeline configurations to suit specific planning requirements.
Refer to the Blazor Gantt Chart documentation for comprehensive information on timeline configuration.