html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.column();

​

    //create series

    var series = chart.column(getData());

    series.name("Total support requests");

​

    var xZoom = chart.xZoom();

​

    // enable the scroller

    chart.xScroller(true);

​

    // set listener on chart

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

        e.series.excludePoint(e.pointIndex);

        xZoom.setToPointsCount(15);

    });

​

    // change the scroller orientation

    chart.xScroller().allowRangeChange(false);

​

    // Zooms series by defined points count.

    xZoom.setToPointsCount(15);

​

    // autoHide the scroller

    chart.xScroller().autoHide("true");

​

    // create a chart settings

    chart.xAxis().title("Hours");

    chart.yAxis().title("Support requests");

    chart.title("Amount of support requests by hours");

​

    // display a chart

    chart.container("container");

    chart.draw();

});

​

function getData(){

    return [

["00:00", 10],

["01:00", 4],

["02:00", 17],

["03:00", 20],

["04:00", 20],

["05:00", 16],

["06:00", 35],

["07:00", 6],

["08:00", 15],

["09:00", 19],

["10:00", 25],

["11:00", 34],

["12:00", 42],

["13:00", 14],

["14:00", 50],

["15:00", 25],

["16:00", 34],

["17:00", 40],

["18:00", 64],

["19:00", 48],

["20:00", 22],

["21:00", 37],

["22:00", 53],

["23:00", 62]

    ];

}