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.defaultRowHeight(40);

​

    var timeLine = chart.getTimeline();

​

    var elements = timeLine.elements();

    elements.stroke('none');

​

    // Get rendering.

    var rendering = elements.rendering();

​

    rendering.drawer(drawer);

​

    chart.title('Get and modify rendering');

    chart.container('container');

    chart.draw();

    chart.fitAll();

});

​

function drawer() {

    // Get the set of shapes used in drawing

    var shapes = this['shapes'];

​

    // Get the 'path' shape from the shapes set

    var path = shapes['path'];

​

    // Get bounds for custom drawing.

    var bounds = this['predictedBounds'];

​

    var h = bounds.height;

    var t = bounds.top;

    var l = bounds.left;

    var r = bounds.left + bounds.width;

​

    var h2 = h / 2;

​

    path.moveTo(l, t)

        .lineTo(l + 2, t)

        .lineTo(l + 2, t + h2 - 1)

        .lineTo(r - 2, t + h2 - 1)

        .lineTo(r - 2, t)

        .lineTo(r, t)

        .lineTo(r, t + h)

        .lineTo(r - 2, t + h)

        .lineTo(r - 2, t + h2 + 2)

        .lineTo(l + 2, t + h2 + 2)

        .lineTo(l + 2, t + h)

        .lineTo(l, t + h)

        .close();

}

​

function getData() {

    return [

        {id: 1, name: 'GroupingTasks', actualStart: '2000-02-24', actualEnd: '2000-02-29', baselineStart: '2000-02-25T24:00', baselineEnd: '2000-02-29T20:00'},

        {id: 2, name: 'ChildGroupingTasks', parent: 1},

        {id: 3, name: 'Task 1 with baseline', parent: 2, progressValue: 0.8, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connector: [{connectTo: 4}], baselineStart: '2000-02-24T24:00', baselineEnd: '2000-02-25T20:00'},

        {id: 4, name: 'Task 2', parent: 2, progressValue: 0.55, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connector: [{connectTo: 5}]},

        {id: 5, name: 'Task 3 with baseline', parent: 2, progressValue: 0.33, actualStart: '2000-02-27', actualEnd: '2000-02-28T01:00', connector: [{connectTo: 6}], baselineStart: '2000-02-27', baselineEnd: '2000-02-28T20:00'},

        {id: 6, name: 'Task 4', parent: 2, progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},

        {id: 7, name: 'Task 5 with milestone', parent: 2, progressValue: 0.1, actualStart: '2000-02-26T08:00'}

    ];

}