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  

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

          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();

  });

});