anychart ganttResource how to change range/zoom on the fly - anychart

Question

I use anychart.ganttResource ()
Currently, I limit the timeline of my data by setting a range outside of Gantt, which controls the period I get data from - and I have chart.zoomTo ("week", 2, "firstDate"). This works fine, but now my client want to be able to "zoom" in the chart.
I can see that this is possible using maps, but I can not find anything similar in Gantt. Ideally I would like a slider which could control the zoom or something like zoomOnMouseWheel, but I don't know if this is posible at all.

Answer 1

Zooming with mouseWheel events is possible with some code tricks. I have prepared an example for you, please check it.
anychart.onDocumentReady(function (){
// data tree settings
var treeData = anychart.data.tree(data, "as-table");
// chart type
var chart = anychart.ganttResource();
// chart position
chart.bounds(0, 0, "100%", "100%");
// chart data
chart.data(treeData);
// data tree width
chart.splitterPosition(170);
var dataGrid = chart.dataGrid();
// settings for first column
dataGrid.column(0).width(30).title().text("#");
// settings for the second column
dataGrid.column(1).width(140).format(function(item) {
return item.get("name");
}).title().text("Person");
// chart container
chart.container("container").draw();
//zooming feature
var zoomingCoef = 1;
var isPreviousNegative = true;
//mouse wheel listener
$("#container").on('wheel', function(e){
e.preventDefault();
e.stopImmediatePropagation();
//define the zoomingCoef
if(e.originalEvent.deltaY > 0 ^ isPreviousNegative) {
zoomingCoef -= e.originalEvent.deltaY/10;
} else {
zoomingCoef =1;
}
//zoomIn or zoomOut
if(e.originalEvent.deltaY < 0) {
chart.zoomIn(zoomingCoef);
isPreviousNegative = true;
} else {
chart.zoomOut(zoomingCoef);
isPreviousNegative = false;
}
});
});
// data
var data = [
{
"id": "1",
"name": "Phase 1 - Strategic Plan",
"periods": [
{"id": "1_1", "start": 1171468800000, "end": 1171987200000, "fill": "green"}]
},
{
"id": "2",
"name": "Self-Assessment",
"periods": [
{"id": "2_1", "start": 1173024000000, "end": 1173715200000, "fill": "yellow"}]
},
{
"id": "3",
"name": "Define business vision",
"periods": [
{"id": "3_1", "start": 1169740800000, "end": 1170172800000, "fill": "green"}]
},
{
"id": "4",
"name": "Identify available skills, information and support",
"periods": [
{"id": "4_1", "start": 1171814400000, "end": 1172419200000, "fill": "green"}]
},
{
"id": "5",
"name": "Decide whether to proceed",
"periods": [
{"id": "5_1", "start": 1171296000000, "end": 1171382400000, "fill": "green"}]
},
{
"id": "6",
"name": "Define the Opportunity",
"periods": [
{"id": "6_1", "start": 1173628800000, "end": 1174320000000, "fill": "green"}]
}
];
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>