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-02", end: "2018-01-25",

         imageSrc: 'https://static.anychart.com/images/kitty.png'

        },

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

​

  var tl = chart.getTimeline();

  tl.elements().normal().fill(fillFunc);

  tl.elements().selected().fill(fillFunc);

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

​

  // fit elements to the width of the timeline

  chart.fitAll();

});

​

function fillFunc() {

  var periods = this.item.get('periods');

  var period = periods[this.periodIndex];

  if (period.imageSrc) {

    return {src: period.imageSrc, mode: 'fit'};

  }

  return this.sourceColor;

}