html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // set locales

    anychart.format.inputLocale('ja-jp');

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

    anychart.format.outputLocale('ja-jp');

    anychart.format.outputDateTimeFormat('dd MMM yyyy'); //Like '12 Mar 2015'

​

    // create data

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

​

    // create gantt-project chart

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

    dataGrid.column(2).textFormatter(function () {

        var start = this['actualStart'] || this['autoStart'];

        return anychart.format.dateTime(start);

    }).title('start');

​

    dataGrid.column(3).textFormatter(function () {

        var end = this['actualEnd'] || this['autoEnd'];

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

    }).title('end');

​

    // tooltip settings

    dataGrid.tooltip().textFormatter(tooltipFormatter);

    chart.getTimeline().tooltip().textFormatter(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.dateTime(startDate) : '') +

        (endDate ? '\nend date: ' + anychart.format.dateTime(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': Date.UTC(2015, 2, 13),//'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'

        }

​

    ];

}