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"}

      ]},

      {

        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"}

      ]},

      {

        id: "3",

        name: "Server 3",

        periods: [

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

      ]}

    ];

​

    // 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);  

​

    // set the row and header height

    chart.defaultRowHeight(35);

    chart.headerHeight(105);

​

    // access periods

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

​

    // set the height of periods

    periods.height(40);

​

    // a function for drawing custom elements

    var drawingFunction = function () {

​

      // get the shapes of the element

      var shapes = this["shapes"];

      // get the shape to be modified

      var path = shapes["path"];

      // get the bounds of the element

      var bounds = this["predictedBounds"];

​

      var h = bounds.height;

      var t = bounds.top;

      var l = bounds.left;

      var r = bounds.left + bounds.width;

      var h1 = bounds.top + bounds.height;    

      var h4 = h / 4;

      var h2 = h / 2;

​

      // draw a rounded rectangle

      path.moveTo(l + h4, h1 - h4)

      path.arcTo(h4, h4, -270, 180)

      path.lineTo(r - h4, t + h4)

      path.arcTo(h4, h4, -90, 180)

      path.lineTo(l + h2, h1 - h4)

      path.close(); 

​

    }

​

    // draw custom periods

    periods.rendering().drawer(drawingFunction);

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});