This sample visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product.
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.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 into the services
.