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 data for the chart

    chart.data(treeData);

​

    // set start splitter position settings

    chart.splitterPosition(200);

​

    // 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(250);

​

    // enable Gantt toolbar

    var toolbar = anychart.ui.ganttToolbar();

    toolbar.container("container");

    toolbar.target(chart); // sets target

    toolbar.draw();

​

    // disable Gantt editing

    chart.editing(false);

​

    // set container id for the chart

    chart.container("container");

​

    // initiate chart drawing

    chart.draw();

​

    // zoom chart to specified date

    chart.fitAll();

​

    // Manage Chart Toolbar

​

    // get current toolbar

    var domToolbar = document.getElementsByClassName("anychart-toolbar")[0];

​

    // dispose all buttons in toolbar

    domToolbar.innerHTML = "";

    // change buttons alignment

    domToolbar.style.textAlign = "center";

​

    // create button for live editing

    var editButton = document.createElement("div");

    var outerBox = document.createElement("div");

    outerBox.className = "anychart-inline-block anychart-toolbar-button-outer-box";

    var innerBox = document.createElement("div");

    innerBox.innerHTML = "Enable Live Edit";

    innerBox.className = "anychart-inline-block anychart-toolbar-button-inner-box";

    outerBox.appendChild(innerBox);

    editButton.appendChild(outerBox);

    domToolbar.appendChild(editButton);

    // create class lists for different states of edit button

    var buttonClasses = ["anychart-inline-block", "anychart-toolbar-button"];

    var hoverClasses = ["anychart-inline-block", "anychart-toolbar-button", "anychart-toolbar-button-hover"];

    var clickClasses = ["anychart-inline-block", "anychart-toolbar-button", "anychart-toolbar-button-hover", "anychart-toolbar-button-active"];

    // set default class names for tooltip button

    editButton.className = buttonClasses.join(" ");

    editButton.setAttribute("role", "button");

​

    // manage button visual appearance

    editButton.addEventListener("mouseover", function (){

        editButton.className = hoverClasses.join(" ");

    });

    editButton.addEventListener("mouseout", function() {

        editButton.className = buttonClasses.join(" ");

    });

    editButton.addEventListener("mousedown", function() {

        editButton.className = clickClasses.join(" ");

    });

    editButton.addEventListener("mouseup", function() {

        editButton.className = hoverClasses.join(" ");

    });

​

    // add action on button click

    editButton.addEventListener("click", function(){

        if (chart.editing()) innerBox.innerHTML = "Enable Live Edit";

        else innerBox.innerHTML = "Disable Live Edit";

        chart.editing(! chart.editing());

    });

});

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

    ];

}