Issue with json data mapping with Highcharts

Question

I'm trying to implement highcharts, but having difficulties in mapping the JSON data correctly.

Fiddle: https://jsfiddle.net/AndreasBren/vux52sL4/11/

---

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

        const forstart = start;
        const newstart = forstart.map((str) => {
            const [year, month, date] = str.split("-");
            return `${date}.${month}.${year}`;
        });
        // console.log(newstart); "01.01.2019"
        var dates = newstart.map(function(str) {
            return new Date(str);
        });
        var sdates_ms = dates.map(function(date) {
            return date.getTime();
        });

        const forend = end;
        const newend = forend.map((str) => {
            const [year, month, date] = str.split("-");
            return `${date}.${month}.${year}`;
        });
        // console.log(newend); // "03.01.2019"
        var dates = newend.map(function(str) {
            return new Date(str);
        });
        var edates_ms = dates.map(function(date) {
            return date.getTime();
        });

        var obj = {}
        var finalArray = []
        for (var i = 1; i <= start.length; i++) {
            var first = {
                name: uplant[i]
            }
            obj = {
                ...obj,
                ...first
            }
            var data = {
                start: sdates_ms[i - 1],
                end: edates_ms[i - 1],
                name: labels[i],
                y: 0
            }
            if (obj.data) {
                obj.data.push(data)
            } else {
                obj.data = [data]
            }
            finalArray.push(obj)
        }
        day = 1000 * 60 * 60 * 24
        var chart = Highcharts.ganttChart('container', {
            chart: {
                spacingLeft: 1,
                scrollablePlotArea: {
                    minWidth: 700,
                    scrollPositionX: 0
                }
            },
            title: {
                text: 'Gantt Visualisation'
            },
            subtitle: {
                text: ''
            },
            plotOptions: {
                series: {
                    animation: true,
                    dragDrop: {
                        draggableX: true,
                        draggableY: true,
                        dragPrecisionX: day / 3
                    },
                    dataLabels: {
                        enabled: false,
                        format: '{point.name}',
                        style: {
                            cursor: 'default',
                            pointerEvents: 'none'
                        }
                    },
                    allowPointSelect: true,
                }
            },
            scrollbar: {
                enabled: true
            },
            yAxis: {
                type: 'category',
                categories: uplant,

            },
            xAxis: {
                currentDateIndicator: true,
            },
            tooltip: {
                xDateFormat: '%a %b %d, %H:%M'
            },

            series: finalArray,
            scrollbar: {
                enabled: true,
                barBackgroundColor: 'gray',
                barBorderRadius: 7,
                barBorderWidth: 0,
                buttonBackgroundColor: 'gray',
                buttonBorderWidth: 0,
                buttonArrowColor: 'yellow',
                buttonBorderRadius: 7,
                rifleColor: 'yellow',
                trackBackgroundColor: 'white',
                trackBorderWidth: 1,
                trackBorderColor: 'silver',
                trackBorderRadius: 7
            }
        });


    },
    error: function(error_data) {
        console.log("error")
        console.log(error_data)
    }
});

---

Result:

One row contains all plants and all orders

Row 1 > Plant 1, Plant 2, ... > Order 1, Order 2, ...

Expected Result:

Each row stands for one plant and contains the orders of this plant

Row 1 > Plant 1 > Order 1
Row 2 > Plant 2 > Order 2
....

---

Fiddle: https://jsfiddle.net/AndreasBren/vux52sL4/11/

---

Thank you very much for any help!

Answer 1

There is a lot of confusion in your code. The main reason that all the orders appear to the first row, is because you're setting the y:0 inside the data binding loop. Also you start the for loop index from 1 which is unnecessary and leads to unwanted behavior. There is a much more cleaner and simple way to make the data object like this:

labels    = ["Workorder1","Workorder2"]
start     = ["2001.02.01","2002.02.10"]
end       = ["2001.03.02","2002.03.10"]
uplant    = ["Plant A","Plant B"]

const makeDate = str => {
  const [year, month, date] = str.split(".")
  return new Date(`${month}.${date}.${year}`).getTime()
}

const finalArray = start.map((s, i) => ({
  name: labels[i],
  start: makeDate(s),
  end: makeDate(end[i]),
  y: i
}))

define the yAxis like this:

yAxis: {
  type: 'category',
  categories: uplant,
  min: 0,
  max: uplant.length - 1
},

and the series like this:

series: [{ data: finalArray }]

Check my working fiddle: https://jsfiddle.net/lytrax/hyq206xt/26/