html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "A",

        name: "Location A",

        children: [

          {

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

            ],

            disc_space: "5 TB"

          },

          {

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

            ],

            disc_space: "7 TB"

          }

      ]},

      {

        id: "B",

        name: "Location B",

        children: [

          {

            id: "3",

            name: "Server 3",

            periods: [

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

            ],

            disc_space: "9 TB"

          }

      ]}

    ];

​

    // 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 tooltips of the timeline

​

    chart.getTimeline().tooltip().useHtml(true);

​

    chart.getTimeline().tooltip().format(function() {

​

      var numChildren = this.item.numChildren();

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

      var startDate = anychart.format.dateTime(this.start, "dd MMM");

      var endDate = anychart.format.dateTime(this.end, "dd MMM");

      var discSpace = this.getData("disc_space");

​

      var parentText = "Number of Servers: " + numChildren;

​

      var childText = "<span style='font-weight:600;font-size:12pt'>" + 

                     startDate + " - " + endDate + "</span><br><br>" +

                     "Duration: " + duration + " days<br>" +

                     "Disc Space: " + discSpace;

​

      // identify the resource type and display the corresponding text

      if (numChildren > 0) {

        return parentText;

      } else {

        return childText;

      }

​

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});