Issues with AnyGantt - anychart

Question

Im using AnyGantt, but Im having problems setting it up correctly.
Here is the full code:
var endpoint = '/api/chart/data/'
var label = []
var start = []
var end = []
var werk = []
$.ajax({
method: 'GET',
url: endpoint,
success: function(data){
labels = data.label
start = data.start
end = data.end
uplant = data.werk
var obj = {}
var finalArray = []
for (var i = 1; i <= start.length; i++) {
var first = { id: i, name: uplant[i] }
obj = { ...obj, ...first }
var periods = { id: labels[i], start: start[i - 1], end: end[i - 1] }
if (obj.periods) {
obj.periods.push(periods)
} else {
obj.periods = [periods]
}
finalArray.push(obj)
}
anychart.onDocumentReady(function () {
var data = finalArray;
var treeData = anychart.data.tree(data, "asTable");
chart = anychart.ganttResource();
chart.data(treeData);
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
var dataGrid = chart.dataGrid();
dataGrid.column(0)
.title('#')
.width(30)
.cellTextSettings({hAlign: 'center'});
dataGrid.column(1)
.title('Werk')
.width(60)
.cellTextSettings({hAlign: 'left'})
.format(function () {
return this.name;
});
chart.getTimeline().horizontalScrollBar().enabled(true);
/* chart.getTimeline().periods().edit(true); */
chart.getTimeline().edit(true);
chart.getTimeline().tooltip(false);
chart.getTimeline().elements().labels(false);
chart.container("containerx");
chart.draw();
chart.fitAll();
});
},
error:function(error_data){
console.log("error")
console.log(error_data)
}});
I can't click and move the periods (tasks) and I cant scroll.
Thank you very much for any suggestions
Please find below a screenshot of the chart:
Please find below a screenshot of the chart:

Answer 1

Scale range
You are applying the scale min/max correctly:
chart.getTimeline().scale().minimum("2018-01-01");
chart.getTimeline().scale().maximum("2020-01-01");
But then you override the default scale and it drops the min/max settings:
var dateTimeScale = anychart.scales.dateTime();
var dateTimeTicks = dateTimeScale.ticks();
chart.xScale(dateTimeScale);
There's no need to do this! The default Gantt Chart is already a dateTime type. Solution - simply remove those three lines above from your code.
LiveEdit
Your line chart.getTimeline().periods().edit(true); is correct, but due to a little bug in the current version 8.7.0 (Aug 2019) this setter doesn't work for types of elements. To avoid it replace this line with the following line chart.getTimeline().edit(true);.
Scrollers
The Gantt chart doesn't support x/yScrollers, only simple scroll bars.
The following methods the Gantt chart doesn't support:
chart.xScroller(true);
chart.yScroller(true);
For zooming, you can use one of the API functions. This subject is described in detail in the Gantt zooming article.