Example of Zooming in ASP.NET MVC Gantt Chart Control
This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product.
ID | Name | Start Date | End Date | Duration | Progress | Dependency |
|---|---|---|---|---|---|---|
| 1 | Product concept | 4/2/2024 | 4/8/2024 | 5 days | 18 | |
| 2 | Defining the product and its usage | 4/2/2024 | 4/4/2024 | 3 days | 30 | |
| 3 | Defining target audience | 4/2/2024 | 4/4/2024 | 3 days | 0 | |
| 4 | Prepare product sketch and notes | 4/5/2024 | 4/8/2024 | 2 days | 30 | 2FS |
| 5 | Concept approval | 4/4/2024 | 4/4/2024 | 0 days | 0 | 3FS |
| 6 | Market research | 4/5/2024 | 4/18/2024 | 10 days | 13 | |
| 7 | Demand analysis | 4/5/2024 | 4/10/2024 | 4 days | 15 | |
| 8 | Customer strength | 4/5/2024 | 4/10/2024 | 4 days | 30 | 5FS |
| 9 | Market opportunity analysis | 4/5/2024 | 4/10/2024 | 4 days | 0 | 5FS |
| 10 | Competitor analysis | 4/11/2024 | 4/16/2024 | 4 days | 30 | 7FS |
| 11 | Product strength analsysis | 4/11/2024 | 4/16/2024 | 4 days | 0 | 9FS |
| 12 | Research complete | 4/17/2024 | 4/18/2024 | 2 days | 0 | 10FS |
Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 |
|---|
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 |
|---|
The sample demonstrates the zooming support in Gantt Chart. You can zoom in or zoom out the project timeline dynamically with following toolbar buttons.
ZoomIn - To perform zoom in action on Gantt timeline.ZoomOut - To perform zoom out action on Gantt timeline.ZoomToFit - To show all tasks with timeline fit into available chart width.The zooming feature enables you to view the tasks in the project clearly from minute to year timespan. You need to include
ZoomIn, ZoomOut and ZoomToFit buttons in the toolbar for performing
zooming actions in Gantt Chart.
ZoomIn - If the user clicks on the ZoomIn icon we have increased the timeline cell
width,
when the cell size exceeds the specified range then we have changed the timeline view mode.
ZoomOut - If the user clicks on the ZoomOut icon we have decrease the timeline
cell width, when the cell size falls
behind the specified range then we have changed the timeline view mode based on the zooming levels.
ZoomToFit - In project, if the tasks are rendered in different time ranges, when the user
clicks on the ZoomToFit icon,
then all the tasks are rendered within the current viewable chart container width.