html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

label {

    display: inline-block;

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 40px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Development",

        actualStart: 1515974400000,

        actualEnd: 1520640000000,

        children: [

          {

            id: "1_1",

            name: "Analysis",

            actualStart: 1515974400000,

            actualEnd: 1516838400000

          },

          {

            id: "1_2",

            name: "Design",

            actualStart: 1516406400000,

            actualEnd: 1517702400000

          },

          {

            id: "1_3",

            name: "Meeting",

            actualStart: 1517788800000,

            actualEnd: 1517788800000

          },

          {

            id: "1_4",

            name: "Implementation",

            actualStart: 1517788800000,

            actualEnd: 1519430400000

          },

          {

            id: "1_5",

            name: "Testing",

            actualStart: 1519516800000,

            actualEnd: 1520640000000

          }

      ]}

    ];

    // 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 first data grid column

    column_1 = chart.dataGrid().column(0);

    column_1.setColumnFormat("actualStart", "text");

    column_1.title("text");

    column_1.title().fontSize(10);

​

    // configure the second data grid column

    column_2 = chart.dataGrid().column(1);

    column_2.setColumnFormat("actualStart", "date-common-log");

    column_2.title("date-common-log");

    column_2.title().fontSize(10);

    column_2.title().wordWrap("break-word");

    column_2.title().padding(7);

    column_2.depthPaddingMultiplier(0);

    column_2.collapseExpandButtons(false);

​

    // set the position of the splitter

    chart.splitterPosition("40%");

​

    // configure the scale

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});

​

// switch the preset of the second data grid column

function switchPreset(preset) {

  column_2.setColumnFormat("actualStart", preset);

  // update the column title

  if (preset == "date-common-log") {

    column_2.title("date-common-log");

  }

  if (preset == "date-dmy-dots") {

    column_2.title("date-dmy-dots");

  }

    if (preset == "date-iso-8601") {

    column_2.title("date-iso-8601");

  }

    if (preset == "date-us-short") {

    column_2.title("date-us-short");

  }

}