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

​

  // 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.fitToTask("2");

​

});

​

function getData() {

  return [

    {

      "id": "1",

      "name": "Task 1",

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

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

      "progressValue": "100%"

    },

    {

      "id": "2",

      "name": "Task 2",

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

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

      "progressValue": "75%"

    },

    {

      "id": "3",

      "name": "Task 3",

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

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

      "progressValue": "50%"

    },

    {

      "id": "4",

      "name": "Task 4",

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

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

      "progressValue": "25%"

    },

    {

      "id": "5",

      "name": "Task 5",

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

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

      "progressValue": "0%"

    }

  ];

}