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-general-features/external-events/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-general-features/external-events/data.json',

    function (data) {

      // create data tree on raw data

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

​

      // create resource gantt chart

      var chart = anychart.ganttResource();

​

      chart.title('External events');

​

      // set data for the chart

      chart.data(treeData);

​

      // set pixel position of the main splitter

      chart.splitterPosition(120);

​

      // getting chart's data grid

      var dataGrid = chart.dataGrid();

​

      // disabling default 0-column

      dataGrid.column(0, false);

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

​

      // External events

      chart.listen('rowSelect', function (e) {

        var msg = e.item.get('name');

        log(e.type, msg);

      });

      chart.listen('rowClick', callback);

      chart.listen('rowDblClick', callback);

      chart.listen('rowMouseOver', callback);

      chart.listen('rowMouseMove', callback);

      chart.listen('rowMouseOut', callback);

      chart.listen('rowMouseUp', callback);

      chart.listen('rowMouseDown', callback);

​

      function callback(e) {

        var msg = e.item.get('name');

        if (e.period) msg += ', Period #' + (e.periodIndex + 1);

        log(e.type, msg);

      }

​

      // logs actions to textarea

      function log(eventType, message) {

        chart.title(eventType + '. ' + message);

      }

    }

  );

});