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) {

​

    // 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 the elements to the width of the timeline

    chart.fitAll();

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

    chart.dataGrid().fixedColumns(true);

    // set the container id

    chart.container("container");

​

    // draw the chart

    chart.draw();

  });

});