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

​

    var buttons = chart.dataGrid().buttons();

    buttons.hovered().background(false);

​

    // Create custom drawing functions.

    var contentFunction = function (path) {

        // Draw different primitives or anything else depending on the state.

        var half = this.width / 2;

        switch (this.state) {

            case 'normal':

                fill = '#dd2c00';

                anychart.graphics.vector.primitives.diagonalCross(path.clear(), half, half, half).fill(fill);

                break;

            case 'hovered':

                fill = anychart.color.lighten('#dd2c00');

                anychart.graphics.vector.primitives.diagonalCross(path.clear(), half, half, half).fill(fill);

                break;

            case 'selected':

                fill = '#00bfa5';

                anychart.graphics.vector.primitives.cross(path.clear(), half, half, half).fill(fill);

                break;

        }

    };

​

    var normal = buttons.normal();

    normal.background(false);

​

    // Set content function.

    normal.content(contentFunction);

​

    var selected = buttons.selected();

    selected.background(false);

​

    // Set content function.

    selected.content(contentFunction);

​

    chart.title('Custom expand/collapse buttons \n Set content parameter as a function');

    chart.container('container');

    chart.draw();

    chart.fitAll();

});

function getData() {

    return [

        {id: 1, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},

        {id: 2, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29', collapsed: true},

        {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-27', actualEnd: '2000-02-28T08:00', connectTo: 6},

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

        {id: 7, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-02-26T08:00', actualEnd: '2000-02-27'}

    ];

}