How to perform timeline zooming in Gantt chart?
In Gantt, it is possible to the perform timeline or timescale zooming with custom toolbar icons. The timeline zooming can be achieved by dynamically switching between the available timeline modes in Gantt with the scheduleHeaderSettings property.
It is also possible to resize zooming level for the same timescale by using the timescaleUnitSize property.
The below code example explains how to perform timeline zooming in resource view Gantt.
<script type="text/x-jsrender" id="ZoomIn">
<button>
ZoomIn
</button>
</script>
<script type="text/x-jsrender" id="ZoomOut">
<button>
ZoomOut
</button>
</script>
<script type="text/javascript">
$(function() {
$("#resourceGantt").ejGantt({
dataSource: resourceGanttData,
toolbarSettings: {
showToolbar: true,
customToolbarItems: [{
templateID: "#ZoomIn",
tooltipText: "Zoom In"
},
{
templateID: "#ZoomOut",
tooltipText: "Zoom Out"
}
],
},
toolbarClick: function(args) {
var ganttObject = $("#resourceGantt").ejGantt("instance");
if (args.itemName == "Zoom In") {
if (ganttObject.model.scheduleHeaderSettings.scheduleHeaderType == "year") {
var monthSettings = {
scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Month,
monthHeaderFormat: "MMM yyyy",
durationUnit: ej.Gantt.DurationUnit.Day,
weekHeaderFormat: "M/dd",
timescaleUnitSize: "100%"
}
ganttObject.setModel({
"scheduleHeaderSettings": monthSettings
});
}
else if (ganttObject.model.scheduleHeaderSettings.scheduleHeaderType == "month") {
var weekHeaderSettings = {
scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Week,
durationUnit: ej.Gantt.DurationUnit.Day,
weekHeaderFormat: "MMM dd , yyyy",
timescaleUnitSize: "100%"
}
ganttObject.setModel({
"scheduleHeaderSettings": weekHeaderSettings
});
}
//...
}
//...
});
</script>
You find a Gantt sample with timeline zooming support here.
In the above sample we have rendered two custom buttons for zooming in and out the timeline by using custom toolbar support. These buttons are used to change the Gantt timeline dynamically.
Conclusion
I hope you enjoyed learning about how to perform timeline zooming in Gantt chart.
You can refer to our JavaScript Gantt feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Gantt example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
