html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = [

        {id: 1, name: 'Planning', actualStart: '2108-02-06', actualEnd: '2108-02-15', connectTo: 2, connectorType: 'finish-start'},

        {id: 2, name: 'Research', actualStart: '2108-02-16', actualEnd: '2108-02-20', connectTo: 3, connectorType: 'start-start'},

        {id: 3, name: 'Design', actualStart: '2108-02-20', actualEnd: '2108-03-05', connectTo: 4, connectorType: 'finish-finish'},

        {id: 4, name: 'Development', actualStart: '2108-02-28', actualEnd: '2108-03-15', connectTo: 5, connectorType: 'start-finish'},

        {id: 5, name: 'Review', actualStart: '2108-03-15', actualEnd: '2108-03-20'}

        ];

​

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

​

    var chart = anychart.ganttProject();

    chart.data(treeData);

    chart.title('ConnectorSelect type');

    chart.edit(true);

​

    // Set event type.

    // Select a connector and change the title on the event.

    chart.listen('connectorSelect', function(e){

        chart.title('The connector from ' + e.fromItem.get('name') + ' to ' + e.toItem.get('name') + ' is selected');

    });

​

    chart.getTimeline().connectors().stroke('#008b00', 3);

    chart.defaultRowHeight(45);

    chart.getTimeline().labels(false);

    chart.getTimeline().tooltip(false);

​

    var dataGrid = chart.dataGrid();

    dataGrid.column(0).width(10);

    dataGrid.column(1).width(150);

​

    chart.splitterPosition(150);

    chart.container('container');

    chart.draw();

    chart.fitAll();

});