Example of Zooming in Javascript Gantt Chart Control

/
/
Zooming

This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product.

More Details...

1
Product concept
4/2/20244/8/20245 days18
2
Defining the product and its usage
4/2/20244/4/20243 days30
3
Defining target audience
4/2/20244/4/20243 days0
4
Prepare product sketch and notes
4/5/20244/8/20242 days2FS30
5
Concept approval
4/8/20244/8/20240 days3FS,4FS0
6
Market research
4/9/20244/19/20249 days14
7
Demand analysis
4/9/20244/12/20244 days15
8
Customer strength
4/9/20244/12/20244 days5FS30
9
Market opportunity analysis
4/9/20244/12/20244 days5FS0
10
Competitor analysis
4/15/20244/18/20244 days7FS30
11
Product strength analsysis
4/15/20244/18/20244 days9FS0
12
Research complete
4/19/20244/19/20241 day10FS0
Product concept
Defining the product and its usage
Defining target audience
Prepare product sketch and notes
Concept approval
Market research
Demand analysis
Customer strength
Market opportunity analysis
Competitor analysis
Product strength analsysis
Research complete
Description

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. To use a zoom support related icons, inject the Toolbar module using the Gantt.Inject(Toolbar) method.