Blazor Gantt Chart Example - Working Time Range Settings
This sample visualizes the support for changing the default timeline DurationUnit from day to hours. Tasks progress can be visualized in hourly basis.
ID | Name | Start Date | End Date | Duration | Progress | Dependency | Notes |
|---|
| 1 | Product concept | 4/2/2021 | 4/2/2021 | 5 Hours | 33 | ||
| 2 | Defining the product usage | 4/2/2021 | 4/2/2021 | 3 Hours | 30 | ||
| 3 | Defining the target audience | 4/2/2021 | 4/2/2021 | 3 Hours | 40 | ||
| 4 | Prepare product sketch and notes | 4/2/2021 | 4/2/2021 | 2 Hours | 30 | 2FS | |
| 5 | Concept approval | 4/2/2021 | 4/2/2021 | 0 Hours | 0 | 3FS,4FS | |
| 6 | Market research | 4/2/2021 | 4/12/2021 | 38 Hours | 25 | ||
| 7 | Demand analysis | 4/2/2021 | 4/5/2021 | 4 Hours | 15 | ||
| 8 | Customer strength | 4/2/2021 | 4/5/2021 | 4 Hours | 30 | 5FS | |
| 9 | Market opportunity analysis | 4/2/2021 | 4/5/2021 | 4 Hours | 0 | 5FS | |
| 10 | Competitor analysis | 4/9/2021 | 4/12/2021 | 4 Hours | 30 | 7FS,8FS | |
| 11 | Product strength analysis | 4/5/2021 | 4/5/2021 | 4 Hours | 40 | 9FS | |
| 12 | Research completed | 4/12/2021 | 4/12/2021 | 0 Hours | 30 | 10FS |
Fri | Sat | Sun | Mon | Tue | Wed | Thu | Fri | Sat | Sun | Mon |
00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
In this example, you can see how to render a Gantt chart with the provided data source and customizable working hours in a day using GanttDayWorkingTime. Given duration in dataSource will be considered with this unit. Gantt chart supports the following DurationUnit values:
DayHourMinute
The working hours vary between organizations. This feature will help keep track of each task and resource task status based on the company's working time.
More information on the work time range can be found in this documentation section.