html,

body,

#container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

    // set locales

    anychart.format.inputLocale('fr-fr');

    anychart.format.inputDateTimeFormat('yyyy.MM.dd'); //Like '2015.03.12'

    anychart.format.outputLocale('fr-fr');

    // create data

    var treeData = anychart.data.tree(getData(), 'as-table');

    // create gantt-project chart

    chart = anychart.ganttProject();

    // set container id

    chart.container('container');

    // set data

    chart.data(treeData);

    // datagrid settings

    var dataGrid = chart.dataGrid();

    dataGrid.column(0).title().text('#');

    dataGrid.column(1).width(250).title('title');

    var c2 = dataGrid.column(2);

    c2.labels().format(function() {

        var start = this.actualStart || this.autoStart;

        return anychart.format.date(start);

    });

    c2.title('start');

    var c3 = dataGrid.column(3);

    c3.labels().format(function() {

        var end = this.actualEnd || this.autoEnd;

        return (end === void 0) ? '' : anychart.format.date(end); //can be milestone

    });

    c3.title('end');

    // tooltip settings

    dataGrid.tooltip().format(tooltipFormatter);

    chart.getTimeline().tooltip().format(tooltipFormatter);

    // initiate chart drawing

    chart.draw();

});

// formatter for timeline and datagrid tooltips

function tooltipFormatter() {

    var startDate = this.actualStart || this.autoStart;

    var endDate = this.actualEnd || this.autoEnd;

    var progress = this.progressValue;

    if (progress === void 0) {

        var auto = this.autoProgress * 100;

        progress = (Math.round(auto * 100) / 100 || 0) + '%';

    }

    return (startDate ? 'start date: ' + anychart.format.date(startDate) : '') +

        (endDate ? '\nend date: ' + anychart.format.date(endDate) : '') +

        (progress ? '\nprogress: ' + progress : '');

}

// simple data

function getData() {

    return [{

            id: '1',

            name: 'Phase 1 - Strategic Plan'

        },

        {

            id: '2',

            name: 'Self assessment',

            parent: '1'

        },

        {

            id: '3',

            name: 'It defines the business vision',

            parent: '2',

            actualStart: '2015.03.13',

            actualEnd: '2015.03.24'

        },

        {

            id: '4',

            name: 'To identify the available skills, information and support',

            parent: '2',

            actualStart: '2015.03.25',

            actualEnd: '2015.04.06'

        },

        {

            id: '5',

            name: 'Decide whether you want to continue',

            parent: '2',

            actualStart: '2015.04.07',

            actualEnd: '2015.04.15',

            baselineStart: '2015.04.06',

            baselineEnd: '2015.04.18'

        }

    ];

}