html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/resource-charts/sales-call-centre/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/resource-charts/sales-call-centre/data.json',

    function (data) {

      var chart = anychart.resource();

      chart.data(data);

​

      chart

        .zoomLevel(0)

        .timeTrackingMode('activity-per-resource')

        .currentStartDate('2016-10-03');

​

      chart.calendar().availabilities([

        {

          each: 'day',

          from: 8,

          to: 18,

          isWorking: true

        }

      ]);

​

      chart.logo().fill({

        src: 'https://cdn.anychart.com/images/resource-chart/logo.png'

      });

​

      var resourceList = chart.resourceList();

      resourceList.types({

        fontColor: '#4CAF50',

        fontSize: 12

      });

​

      // Set images settings.

      resourceList.images().size(85);

​

      // Set tags settings.

      resourceList.tags().background('#70d0f5').fontColor('#fff');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});