Issues with AnyGantt

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.