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

​

  // set start splitter position settings

  chart.splitterPosition(370);

​

  // get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

  // set first column settings

  var firstColumn = dataGrid.column(0);

  firstColumn.title('#');

  firstColumn.width(30);

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

​

  // set second column settings

  var secondColumn = dataGrid.column(1);

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

  secondColumn.width(180);

​

  // set third column settings

  var thirdColumn = dataGrid.column(2);

  thirdColumn.title('Start Time');

  thirdColumn.width(70);

  thirdColumn.cellTextSettings().hAlign('right');

  thirdColumn.format(function(item) {

    var date = new Date(item.get('actualStart'));

    var month = date.getUTCMonth() + 1;

    var strMonth = (month > 9) ? month : '0' + month;

    var utcDate = date.getUTCDate();

    var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;

    return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;

  });

​

  // set fourth column settings

  var fourthColumn = dataGrid.column(3);

    fourthColumn.title('End Time');

    fourthColumn.width(80);

    fourthColumn.cellTextSettings().hAlign('right');

    fourthColumn.format(function(item) {

      var date = new Date(item.get('actualEnd'));

      var month = date.getUTCMonth() + 1;

      var strMonth = (month > 9) ? month : '0' + month;

      var utcDate = date.getUTCDate();

      var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;

      return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;

    });

​

  // initiate chart drawing

  chart.draw();

​

  // zoom chart to specified date

  chart.zoomTo(951350400000, 954201600000);

});

function getData() {

  return [

    {"id": "1", "name": "Phase 1 - Strategic Plan", "progressValue": "14%", "actualStart": 951350400000, "actualEnd": 954201600000},

    {"id": "2", "name": "Self-Assessment", parent:"1", "progressValue": "25%", "actualStart": 951350400000, "actualEnd": 951955200000},

    {"id": "3", "name": "Define business vision", parent:"2", "progressValue": "0%", "actualStart": 951408000000, "actualEnd": 951440400000, "connectTo": "4", "connectorType": "FinishStart"},

    {"id": "4", "name": "Identify available skills, information and support", parent:"2", "progressValue": "0%", "actualStart": 951494400000, "actualEnd": 951526800000, "connectTo": "5", "connectorType": "FinishStart"},

    {"id": "5", "name": "Decide whether to proceed", parent:"2", "progressValue": "0%", "actualStart": 951753600000, "actualEnd": 951786000000, "connectTo": "7", "connectorType": "FinishStart"},

    {"id": "6", "name": "Define the Opportunity", parent:"1", "progressValue": "27%", "actualStart": 951782400000, "actualEnd": 952992000000},

    {"id": "7", "name": "Research the market and competition", parent:"6", "progressValue": "0%", "actualStart": 951840000000, "actualEnd": 951872400000, "connectTo": "8", "connectorType": "FinishStart"},

    {"id": "8", "name": "Interview owners of similar businesses", parent:"6", "progressValue": "60%", "actualStart": 951868800000, "actualEnd": 952473600000, "connectTo": "9", "connectorType": "FinishStart"},

    {"id": "9", "name": "Identify needed resources", parent:"6", "progressValue": "0%", "actualStart": 952531200000, "actualEnd": 952650000000, "connectTo": "10", "connectorType": "FinishStart"},

    {"id": "10", "name": "Identify operating cost elements", parent:"6", "progressValue": "0%", "actualStart": 952704000000, "actualEnd": 952995600000, "connectTo": "12", "connectorType": "FinishStart"}  

];

}