html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  var data = [

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

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

    {"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": 951609600000, "actualEnd": 951696000000, "connectTo": "6", "connectorType": "FinishStart"},

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

  ];

​

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

​

  var chart = anychart.ganttProject();

  chart.data(treeData);

  chart.splitterPosition(300);

​

  var dataGrid = chart.dataGrid();

  var firstColumn = dataGrid.column(1);

  firstColumn.width(120);

  var customColumn = dataGrid.column(2);

​

  customColumn.title("Duration");

  customColumn.width(120);

  // Sets column formats.

  customColumn.format(customColumnFormat);

​

  var columnStyle = customColumn.cellTextSettings();

  columnStyle.useHtml(true);

  columnStyle.fontColor("blue");

​

  chart.container("container");

  chart.draw();

  chart.fitAll();

​

  //define a custom content with actual start values

  function customColumnFormat(item){

    var start = item.get("actualStart");

    var end = item.get("actualEnd");

    var duration = end - start;

    var hours = duration/1000/60/60;

    if (hours>24){

      return hours + " hours <a style='color: #7c868e;'>(" + (hours/24).toFixed(0) + " days)<a>";

    }else{

      return hours + " hours";

    }

  }

});