html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/21da3da501982400b8ca35690b17ea5a/raw/d17e3774c6db1502b5d95677a5656ecc43f24526/resourceChartData.json', function (data) {

​

    // set the japanese locale

    anychart.format.outputLocale('ja-jp');

​

    // create a data tree

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

​

    // create a resource gantt chart

    var chart = anychart.ganttResource();

​

    // set the data

    chart.data(treeData);

​

    // fit elements to the width of the timeline

    chart.fitAll();

​

    // set the position of the splitter to match the first column

    chart.dataGrid().fixedColumns(true);

​

    // enable and configure the chart title

    var title = chart.title();

    title.enabled(true);

    title

      .text('Tokyo 2020 Paralympic Schedule - Venues and Sports')

      .fontSize(18)

      .fontWeight(600)

      .fontColor('#b32e3c')

      .padding(10);

​

    // customize the color of the bars

    var elements = chart.getTimeline().elements();

    elements.normal().fill('#e96a7b 0.75');

    elements.normal().stroke('#db4e50');

​

    // enable labels

    elements.labels().enabled(true);

    elements.labels().fontColor('White');

​

    // set the row height

    chart.defaultRowHeight(25);

​

    // set the header height

    chart.headerHeight(95);

​

    // enable html for the data grid tooltip

    chart.dataGrid().tooltip().useHtml(true);

​

    // configure the tooltips of the timeline

    chart.getTimeline().tooltip().useHtml(true);

​

    chart.getTimeline().tooltip().title(false);

    chart.getTimeline().tooltip().separator(false);

​

    chart.getTimeline().tooltip().format(function(e) {

      var depth = e.item.meta('depth');

      var tooltipText;

​

      // when hovering a venue row

      // show the number of sports in the venue

      if (depth === 0) {

        tooltipText = e.item.numChildren() + ' Sports in the venue.';

      } else {

        if (typeof e.period === 'undefined') {

          // when hovering an event row

          // show the sport and the number of events

          var events = e.item.get('periods').length;

          tooltipText = '<span style=\'font-weight:600;font-size:12px\'>' +

              events + ' ' +

              e.name + ' event(s).</span>';

        } else {

          // when hovering an event bar

          // show the start and end of the event

          var start = anychart.format.dateTime(e.start, 'dd MMM');

          var end = anychart.format.dateTime(e.end, 'dd MMM');

​

          tooltipText = '<span style="font-weight:600;font-size:12px">' +

              start + '-' + end + ' </span>';

        }

      }

​

      return tooltipText;

    });

​

    chart.dataGrid().tooltip().format(function(e)

    {

      // different tooltips for venues and sports

      // in the data grid

​

      var depth = e.item.meta('depth');

      var tooltipText;

​

      // the number of sports for venues

      if (depth === 0) {

        tooltipText = e.item.numChildren() + ' Sports in the venue.';

      } else {

        // the number of events for sports

        tooltipText = '<span style="font-weight:600;font-size:12px">' +

            e.name + ': ' +

            e.item.get('periods').length + ' event(s) in the venue. </span>';

      }

​

      return tooltipText;

    }

    );

​

    // disable the first data grid column

    chart.dataGrid().column(0).enabled(false);

​

    // set the width of the labels column

    chart.dataGrid().column(1).width(285);

​

    // set the text of the first data grid column

    var column_1 = chart.dataGrid().column(1);

    column_1.labels()

      .useHtml(true);

​

    // format labels depending on whether it is a venue or a sport

    column_1.labels().format(function(e) {

      // decision based on a depth in hierarchy

      var depth = e.item.meta('depth');

      var style = (depth === 0) ? 'bold' : '400';

      return '<span style="font-size:12px;font-weight:' + style + '">' + e.name + ' </span>';

    });

​

    // set the container id

    chart.container('container');

​

    // draw the chart

    chart.draw();

​

  });

});