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

​

  // 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.width(75);

  secondColumn.format(function(item) {

    return item.get("name");

  });

​

var thirdColumn = dataGrid.column(2);

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

  thirdColumn.title("Owner");

  thirdColumn.format(function(item) {

    return item.get("owner");

  });

​

  // initiate chart drawing

  chart.draw();

​

  chart.fitAll();

​

});

​

function getData() {

  return [

    {

      "id": "1",

      "name": "Task 1",

      "owner": "Anthony Quayle",

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

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

    },

    {

      "id": "2",

      "name": "Task 2",

      "owner": "Sam Spiegel",

      "parent": "1",

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

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

    },

    {

      "id": "3",

      "name": "Task 3",

      "owner": "Jack Hawkins",

      "parent": "1",

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

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

    },

    {

      "id": "4",

      "name": "Task 4",

      "owner": "Claude Rains",

      "parent": "1",

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

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

    }

    ]

}