html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Root",

        actualStart: "2018-01-15",

        actualEnd: "2018-03-10",

        children: [

          {

            id: "1_1",

            name: "Child 1",

            actualStart: "2018-01-15",

            actualEnd: "2018-01-25"

          },

          {

            id: "1_2",

            name: "Child 2",

            actualStart: "2018-01-20",

            actualEnd: "2018-02-04"

          },

          {

            id: "1_3",

            name: "Child 3",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-05"

          },

          {

            id: "1_4",

            name: "Child 4",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-24"

          },

          {

            id: "1_5",

            name: "Child 5",

            actualStart: "2018-02-25",

            actualEnd: "2018-03-10"

          }

      ]}

    ];

​

    // create a data tree

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

​

    // create a gantt chart

    chart = anychart.ganttProject();

​

    // set the data

    chart.data(treeData);

​

    // configure the scale

    chart.getTimeline().scale().maximum("2018-03-15");

​

    // allow editing the chart

    chart.edit(true);

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Tree Data Model: Events<br><br>");

    chart.title().padding(10);

​

    /* listen to the treeItemMove event

    and update the chart title */

    treeData.listen("treeItemMove", function (e) {

      var itemName = e.item.get("name");

      chart.title("Tree Data Model: Events<br><br>< " +

                  "<span style = 'color:#990000'>" +

                  itemName + ": </span> treeItemMove >");

    });

​

    /* listen to the treeItemUpdate event

    and update the chart title */

    treeData.listen("treeItemUpdate", function (e) {

      var itemName = e.item.get("name");

      chart.title("Tree Data Model: Events<br><br>< " +

                  "<span style = 'color:#990000'>" +

                  itemName + ": </span> treeItemUpdate >");

    });

​

​

    /* listen to the treeItemCreate event

    and update the chart title */

    treeData.listen("treeItemCreate", function (e) {

      var itemName = e.item.get("name");

      chart.title("Tree Data Model: Events<br><br>< " +

                  "<span style = 'color:#990000'>" +

                  itemName + "</span>: treeItemCreate >");

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});

​

var itemCount = 1;

​

// add a new data item

function addItem() {

  var name = "New Child " + itemCount++;

  treeData.getChildAt(0).addChild({

                                    "name": name,

                                    actualStart: Date.UTC(2018, 1, 31),

                                    actualEnd: Date.UTC(2018, 1, 31) 

                                  });

}