score:1

In this case, you need some custom data formatting. Below you may find the code which takes the .csv data you provided us before, then parses it, groups and formats. After that creates gantt project chart. This code helps to get the data structure you want.

//parse .csv data and group by WorkStation_Id
d3.csv("data.csv", function (data1) {
    var workStation = d3.nest()
        .key(function (d) {
            return d.WorkStation_Id;
        })
        .entries(data1);

    //get formatted data as a tree
    var formattedData = formatData(workStation);
    console.log(formattedData);

    //set formatted data as a tree
    var treeData = anychart.data.tree(formattedData, "as-tree");
    // chart type
    chart = anychart.ganttProject();

    // set data for the chart
    chart.data(treeData);

    // set container id for the chart
    chart.container('container').draw();

    // Fit all visible data to timeline.
    chart.fitAll();
});

//helper function to format data in apropriate way
//to set to the gantt chart
function formatData(data) {

    var outputData = [];

    data.forEach(function (item) {
        var itemObj = {};
        itemObj['name'] = item['key'];
        itemObj['children'] = [];

        var childs = item['values'];

        for (var i = 0; i < childs.length; i++) {
            var childObj = {};
            childObj['name'] = 'Order ID: ' + childs[i]['Order_Id'] + '-' + i;
            childObj['actualStart'] = new Date(childs[i]['ScheduledTime']).getTime();
            childObj['actualEnd'] = childObj['actualStart'] + childs[i]['Duration(seconds)'] * 1000;
            childObj['Order_Id'] = childs[i]['Order_Id'];
            itemObj['children'].push(childObj);
        }
        outputData.push(itemObj);
    });
    return outputData;
}

Below is a screenshot of the chart which is built by this code. enter image description here


Related Query

More Query from same tag