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/gantt-charts/activity-oriented-chart/data.js

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.json',

    function (data) {

      // create data tree

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

​

      // create project gantt chart

      var chart = anychart.ganttProject();

​

      // set data for the chart

      chart.data(treeData);

​

      // set start splitter position settings

      chart.splitterPosition(370);

​

      // get chart data grid link to set column settings

      var dataGrid = chart.dataGrid();

​

      // set first column settings

      dataGrid

        .column(0)

        .title('#')

        .width(30)

        .labels({ hAlign: 'center' });

​

      // set second column settings

      dataGrid.column(1).labels().hAlign('left').width(180);

​

      // set third column settings

      dataGrid

        .column(2)

        .title('Start Time')

        .width(70)

        .labels()

        .hAlign('right')

        .format(function () {

          var date = new Date(this.actualStart);

          var month = date.getUTCMonth() + 1;

          var strMonth = month > 9 ? month : '0' + month;

          var utcDate = date.getUTCDate();

          var strDate = utcDate > 9 ? utcDate : '0' + utcDate;

          return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;

        });

​

      // set fourth column settings

      dataGrid

        .column(3)

        .title('End Time')

        .width(80)

        .labels()

        .hAlign('right')

        .format(function () {

          var date = new Date(this.actualEnd);

          var month = date.getUTCMonth() + 1;

          var strMonth = month > 9 ? month : '0' + month;

          var utcDate = date.getUTCDate();

          var strDate = utcDate > 9 ? utcDate : '0' + utcDate;

          return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;

        });

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart to specified date

      chart.zoomTo(951350400000, 954201600000);

    }

  );

});