html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Server 1",

        periods: [

          {id:"1_1", start: "2018-01-05", end: "2018-01-25"},

          {id:"1_2", start: "2018-01-28", end: "2018-02-22"},

          {id:"1_3", start: "2018-03-03", end: "2018-03-25"}

        ],

        custom_field: "(*) "

      },

      {

        id: "2",

        name: "Server 2",

        periods: [

          {id: "2_1", start: "2018-01-07", end: "2018-02-15"},

          {id: "2_2", start: "2018-02-26", end: "2018-03-20"}

        ],

        custom_field: "(!)"

      },

      {

        id: "3",

        name: "Server 3",

        periods: [

          {id: "3_1", start: "2018-01-04", end: "2018-03-25"}

        ],

        custom_field: "(?)"

      }

    ];

    // create a data tree

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

​

    // create a chart

    var chart = anychart.ganttResource(); 

    // set the data

    chart.data(treeData);  

​

    // configure labels of periods

    var periodLabels = chart.getTimeline().periods().labels();

    periodLabels.enabled(true);

    periodLabels.useHtml(true);

    periodLabels.fontColor("#104d89");

    periodLabels.fontWeight(600);

    periodLabels.format(function() {

      var duration = (this.end - this.start) / 1000 / 3600 / 24;

      if (duration > 30) {

        return "<span style='color:#991f00'>" + this.getData("custom_field") +

               " " + duration + " days</span>"

      } else {  

        return this.getData("custom_field") + " " + duration + " days";

      }

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});