html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

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

    'https://cdn.anychart.com/samples/gantt-general-features/milestones-on-resource-chart/data1.json',

    function (data) {

      // create data tree

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

​

      // create resource gantt chart

      var chart = anychart.ganttResource();

​

      // set data for the chart

      chart.data(treeData);

​

      // set the spliter position

      chart.splitterPosition(220);

​

      // set data grid settings

      var dataGrid = chart.dataGrid();

​

      var firstColumn = dataGrid.column(0);

​

      firstColumn

        .width(80)

        .labels()

        .format(function () {

          return this.item.get('project_number');

        })

        .textShadow({

          color: 'lightgrey',

          offsetX: '3px',

          offsetY: '3px',

          blurRadius: '2px'

        });

      firstColumn

        .title()

        .text('Project\nNumber')

        .fontSize(14)

        .textShadow({

          color: 'lightgrey',

          offsetX: '4px',

          offsetY: '4px',

          blurRadius: '2px'

        });

​

      var secondColumn = dataGrid.column(1);

      secondColumn.width(140).labels().textOverflow('...').textShadow({

        color: 'lightgrey',

        offsetX: '3px',

        offsetY: '3px',

        blurRadius: '2px'

      });

​

      secondColumn

        .title()

        .text('Project\nTitle')

        .fontSize(14)

        .textShadow({

          color: 'lightgrey',

          offsetX: '4px',

          offsetY: '4px',

          blurRadius: '2px'

        });

​

      // get timeline

      var timeline = chart.getTimeline();

​

      timeline.zoomOnMouseWheel(true);

​

      // disable periods tooltip

      timeline.periods().tooltip(false);

​

      // set weekends fill color

      timeline.weekendsFill('red 0.2');

​

      // set holidays fill color

      timeline.holidaysFill('green 0.2');

​

      // get timeline calendar

      var calendar = timeline.scale().calendar();

​

      // set working hours

      calendar.schedule([

        null,

        { from: 10, to: 18 },

        { from: 10, to: 18 },

        { from: 10, to: 18 },

        { from: 10, to: 18 },

        { from: 10, to: 18 },

        null

      ]);

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // set chart's initial zoom

      chart.zoomTo(Date.UTC(2008, 6, 20, 0), Date.UTC(2008, 7, 7, 0));

    }

  );

});