html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = getData();

​

    var chart = anychart.ganttResource();

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

​

    var timeline = chart.getTimeline();

​

    // Get periods.

    var periods = timeline.periods();

​

    periods.fill('#F44336');

​

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

    chart.container('container');

    chart.draw();

    chart.fitAll();

​

});

​

function getData() {

    return [

        {

            id: 1,

            name: 'Server 1',

            broken: '11%',

            maintenance: '20%',

            working: '69%',

            periods: [

                {

                    id: '1_1',

                    style: 'working',

                    fill: '#008000 0.7',

                    stroke: 'none',

                    hoverFill: 'green',

                    hoverStroke: 'cyan',

                    start: '2008-01-31T24:00:00',

                    end: '2008-02-02T14:44:51'

                },

                {

                    id: '1_2',

                    style: 'maintenance',

                    stroke: 'none',

                    hoverFill: 'yellow',

                    hoverStroke: 'cyan',

                    start: '2008-02-02T14:44:51',

                    end: '2008-02-03T08:06:15'

                },

                {

                    id: '1_3',

                    style: 'working',

                    fill: '#008000 0.7',

                    stroke: 'none',

                    hoverFill: 'green',

                    hoverStroke: 'cyan',

                    start: '2008-02-03T08:06:15',

                    end: '2008-02-06T21:28:59'

                },

            ]

        },

        {

            id: 2,

            name: 'Server 2',

            broken: '9%',

            maintenance: '25%',

            working: '66%',

            periods: [

                {

                    id: '2_1',

                    style: 'working',

                    fill: '#008000 0.7',

                    stroke: 'none',

                    hoverFill: 'green',

                    hoverStroke: 'cyan',

                    start: '2008-01-31T24:00:00',

                    end: '2008-02-01T17:48:22'

                },

                {

                    id: '2_2',

                    style: 'working',

                    fill: '#008000 0.7',

                    stroke: 'none',

                    hoverFill: 'red',

                    hoverStroke: 'cyan',

                    start: '2008-02-01T17:48:22',

                    end: '2008-02-02T07:26:52'

                },

                {

                    id: '2_3',

                    style: 'working',

                    fill: '#008000 0.7',

                    stroke: 'none',

                    hoverFill: 'green',

                    hoverStroke: 'cyan',

                    start: '2008-02-02T07:26:52',

                    end: '2008-02-03T01:42:13'

                },

                {

                    id: '2_4',

                    style: 'maintenance',

                    stroke: 'none',

                    hoverFill: 'yellow',

                    hoverStroke: 'cyan',

                    start: '2008-02-03T01:42:13',

                    end: '2008-02-03T16:54:00'

                },

            ]

        }

    ];

}