​

anychart.onDocumentReady(function () {

    // create data

    var data = [{

        id: 1,

        parent: null,

        name: "Root",

        actualStart: Date.UTC(2018, 01, 02),

        actualEnd: Date.UTC(2018, 06, 15),

    },

    {

        id: 2,

        parent: 1,

        name: "Parent 1",

        actualStart: Date.UTC(2018, 01, 02),

        actualEnd: Date.UTC(2018, 01, 22),

        progressValue: "90%"

    },

    {

        id: 3,

        parent: 2,

        name: "Child 1–1",

        actualStart: Date.UTC(2018, 01, 23),

        actualEnd: Date.UTC(2018, 02, 20),

        progressValue: "75%"

    },

    {

        id: 4,

        parent: 2,

        name: "Child 1–2",

        actualStart: Date.UTC(2018, 02, 23),

        actualEnd: Date.UTC(2018, 02, 23),

        progressValue: "60%"

    },

    {

        id: 5,

        parent: 1,

        name: "Parent 2",

        actualStart: Date.UTC(2018, 02, 26),

        actualEnd: Date.UTC(2018, 04, 26),

        progressValue: "80%"

    },

    {

        id: 7,

        parent: 5,

        name: "Child 2–1",

        actualStart: Date.UTC(2018, 04, 29),

        actualEnd: Date.UTC(2018, 05, 15),

        progressValue: "30%"

    },

​

    ];

    // create a data tree

    var treeData = anychart.data.tree(data, "as-table");

​

    // create a chart

    var chart = anychart.ganttProject();

​

    // set the data

    chart.data(treeData);

    // configure the scale

    chart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));

    // set the container id

    chart.container("container");

    // initiate drawing the chart

    chart.draw();

    // fit elements to the width of the timeline

    chart.fitAll();

});