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 actStart = item.get(anychart.enums.GanttDataFields.ACTUAL_START);

var date = new Date(actStart || item.meta('autoStart'));

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 actEnd = item.get(anychart.enums.GanttDataFields.ACTUAL_END);

var date = new Date(actEnd || item.meta('autoEnd'));

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;

    });

    var now = (new Date()).getTime();

    var sec = 1000;

    var min = 60 * sec;

    var hour = 60 * min;

    var day = 24 * hour;

​

    var tl = chart.getTimeline();

    // creating a line marker

    tl.lineMarker(0).value(anychart.enums.GanttDateTimeMarkers.CURRENT);

    // creating a text marker

    tl.textMarker(0).value(anychart.enums.GanttDateTimeMarkers.CURRENT).text('TODAY').fontSize(20);

    // creating a range marker

    tl.rangeMarker(0).from(Date.UTC(2016, 0, 1)).to(anychart.enums.GanttDateTimeMarkers.END);

    tl.rangeMarker(1).from(now - 7 * day).to(anychart.enums.GanttDateTimeMarkers.CURRENT);

​

    // initiate chart drawing

    chart.draw();

​

    // zoom chart to specified date

    chart.fitAll();

});

​

function getData() {

    var now = (new Date()).getTime();

    var sec = 1000;

    var min = 60 * sec;

    var hour = 60 * min;

    var day = 24 * hour;

    return [

{"id": "1", "name": "Phase 1 - Strategic Plan", "progressValue": "14%"},

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

{

    "id": "3",

    "name": "Define business vision",

    parent: "2",

    "progressValue": "0%",

    "actualStart": (now - 9 * day),

    "actualEnd": (now - 2 * day),

    "connectTo": "4",

    "connectorType": "FinishStart"

},

{

    "id": "4",

    "name": "Identify available skills, information and support",

    parent: "2",

    "progressValue": "0%",

    "actualStart": (now + 5 * day),

    "actualEnd": (now + 10*day),

    "connectTo": "5",

    "connectorType": "FinishStart"

},

{

    "id": "5",

    "name": "Decide whether to proceed",

    parent: "2",

    "progressValue": "0%",

    "actualStart": (now + 3*day),

    "actualEnd": (now + 5 * day),

    "connectTo": "7",

    "connectorType": "FinishStart"

},

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

{

    "id": "7",

    "name": "Research the market and competition",

    parent: "6",

    "progressValue": "0%",

    "actualStart": (now + 6*day),

    "actualEnd": (now + 13 * day),

    "connectTo": "8",

    "connectorType": "FinishStart"

},

{

    "id": "8",

    "name": "Interview owners of similar businesses",

    parent: "6",

    "progressValue": "60%",

    "actualStart": (now + 5 * day),

    "actualEnd": (now + 15 * day),

    "connectTo": "9",

    "connectorType": "FinishStart"

},

{

    "id": "9",

    "name": "Identify needed resources",

    parent: "6",

    "progressValue": "0%",

    "actualStart": (now + 5 * day),

    "actualEnd": (now + 10 * day),

    "connectTo": "10",

    "connectorType": "FinishStart"

},

{

    "id": "10",

    "name": "Identify operating cost elements",

    parent: "6",

    "progressValue": "0%",

    "actualStart": (now + 15 * day),

    "actualEnd": (now + 29 * day),

    "connectTo": "12",

    "connectorType": "FinishStart"

}

    ];

}