html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = getData();

​

    var chart = anychart.ganttProject();

    chart.data(data, 'as-table');

    chart.title('Move mouse over the row');

    chart.container('container');

    chart.draw();

​

    // Row mouse over event

    chart.listen("rowMouseOver", function(e) {

        var item = e.item;

        chart.title({text: 'rowMouseOver: ' + item.get('name')});

    });

​

    // Row mouse out event

    chart.listen("rowMouseOut", function(e) {

        chart.title('Mouse out');

    });

});

​

function getData() {

    return [

        {id: 1, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-03-28T09:00'},

        {id: 2, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-03-02T08:00'},

        {id: 3, name: 'Define business vision', parent: 2, progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4},

        {id: 4, name: 'Identify available skills, information and support', parent: 2, progressValue: 0, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connectTo: 5},

        {id: 5, name: 'Decide whether to proceed', parent: 2, progressValue: 0, actualStart: '2000-02-29T00:00', actualEnd: '2000-02-29T09:00', connectTo: 7},

        {id: 6, name: 'Define the Opportunity', parent: 1, progressValue: 0.27, actualStart: '2000-02-29', actualEnd: '2000-03-14T08:00'},

        {id: 7, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-03-01T00:00', actualEnd: '2000-03-01T09:00'}

    ];

}