html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data

    var data = [

      {

        id: "1",

        name: "Tasks",

        actualStart: "2018-02-02",

        actualEnd: "2018-02-25",

        children: [

          {

            id: "1_1",

            name: "Task 1",

            actualStart: "2018-02-02",

            actualEnd: "2018-02-07",

            connectTo: "1_2",

            connectorType: "finish-start"

          },

          {

            id: "1_2",

            name: "Task 2",

            actualStart: "2018-02-09",

            actualEnd: "2018-02-09",

            connectTo: "1_5",

            connectorType: "start-start"

          },

          {

            id: "1_3",

            name: "Task 3",

            actualStart: "2018-02-11",

            actualEnd: "2018-02-23",

            connectTo: "1_4",

            connectorType: "finish-finish"

          },

          {

            id: "1_4",

            name: "Task 4",

            actualStart: "2018-02-18",

            actualEnd: "2018-02-25",

            connectTo: "1_5",

            connectorType: "start-finish"

          },

          {

            id: "1_5",

            name: "Task 5",

            actualStart: "2018-02-15",

            actualEnd: "2018-02-21"

          }

      ]}

    ];

​

    // create a data tree

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

    // create a chart

    var chart = anychart.ganttProject();

    // set the data

    chart.data(treeData);

​

    // configure the scale

    chart.getTimeline().scale().maximum("2018-02-27");

​

    // disable labels of elements

    chart.getTimeline().elements().labels(false);

​

    // configure connectors

    var connectors = chart.getTimeline().connectors();

    connectors.normal().stroke("3 #455a64");

    connectors.selected().stroke("3 #ffa000");

​

    // allow editing the chart

    chart.edit(true);

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Events: Connectors<br><br>");

    chart.title().padding(10);

​

    /* listen to the connectorMouseOver event

    and update the chart title */

    chart.listen("connectorMouseOver", function (e) {

      var sourceName = e.fromItem.get("name");

      var targetName = e.toItem.get("name");

      var type = e.connType;

      chart.title("Events: Connectors<br><br>" +

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

                  sourceName + " - " + targetName +

                  " (" + type + ")</span>: connectorMouseOver >");

    });

​

    /* listen to the connectorClick event

    and update the chart title */

    chart.listen("connectorClick", function (e) {

      var sourceName = e.fromItem.get("name");

      var targetName = e.toItem.get("name");

      var type = e.connType;

      chart.title("Events: Connectors<br><br>" +

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

                  sourceName + " - " + targetName +

                  " (" + type + ")</span>: connectorClick >");

    });

​

    /* listen to the connectorDblClick event

    and update the chart title */

    chart.listen("connectorDblClick", function (e) {

      var sourceName = e.fromItem.get("name");

      var targetName = e.toItem.get("name");

      var type = e.connType;

      chart.title("Events: Connectors<br><br>" +

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

                  sourceName + " - " + targetName +

                  " (" + type + ")</span>: connectorDblClick >");

    });

​

    /* listen to the beforeCreateConnector event

    and update the chart title */

    chart.listen("beforeCreateConnector", function (e) {

      var sourceName = e.source.get("name");

      var targetName = e.target.get("name");

      var type = e.connectorType;

      chart.title("Events: Connectors<br><br>" +

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

                  sourceName + " - " + targetName +

                  " (" + type + ")</span>: beforeCreateConnector  >");

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});