html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  // create data tree on our data

  var treeData = anychart.data.tree(getData(), anychart.enums.TreeFillingMethod.AS_TABLE);

​

  // create project gantt chart

  var chart = anychart.ganttProject();

​

  // set container id for the chart

  chart.container("container");

​

  // set data for the chart

  chart.data(treeData);

​

  // get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

chart.splitterPosition(120);

​

  // set first column settings

  var firstColumn = dataGrid.column(0);

  firstColumn.cellTextSettings().hAlign("center");

  firstColumn.width(35);

​

​

  var secondColumn = dataGrid.column(1);

  secondColumn.cellTextSettings().hAlign("left");

  secondColumn.format(function(item) {

    return item.get("name");

  });

​

  // initiate chart drawing

  chart.draw();

​

  chart.fitAll();

});

​

function getData() {

  return [

    {

      "id": "1",

      "name": "Parent",

      "actualStart": Date.UTC(2008, 7, 9),

      "actualEnd": Date.UTC(2008, 7, 20)

    },

    {

      "id": "2",

      "name": "Child 1",

      "parent": "1",

      "actualStart": Date.UTC(2008, 7, 9),

      "actualEnd": Date.UTC(2008, 7, 13)

    },

    {

      "id": "3",

      "name": "Milestone",

      "parent": "1",

      "actualStart": Date.UTC(2008, 7, 14),

      "actualEnd": Date.UTC(2008, 7, 14)

    },

    {

      "id": "4",

      "name": "Child 2",

      "parent": "1",

      "actualStart": Date.UTC(2008, 7, 15),

      "actualEnd": Date.UTC(2008, 7, 20)

    }

    ]

}