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

​

// set colors for milestones

tl.milestoneFill("#4A148C");

tl.milestoneStroke("#1A237E");

​

// set colors for the connectors

tl.connectorFill("#0D47A1");

tl.connectorStroke("#90CAF9");

​

// 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),

"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",

"actual": {

    "fill": "red"

},

"progress": {

    "fill": {

        "color": "black",

        "opacity": 0.3

    }

},

"connectorType": "FinishStart"

},

{

"id": "9",

"name": "Identify needed resources",

parent: "6",

"progressValue": "0%",

"actualStart": (now + 5 * 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"

}

];

}