html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart

    var chart = anychart.line();

​

    // enable the scroller

    chart.xScroller(true);

​

    var xZoom = chart.xZoom();

​

    // zooms settings

    xZoom.setToPointsCount(6);

​

    var startRatio = xZoom.getStartRatio();

    var endRatio = xZoom.getEndRatio();

​

    // get the limits ratio

    chart.title("The chart shows the part from " + startRatio + " to " + endRatio);

​

    // adding a listener

    chart.xScroller().listen("scrollerchangefinish", function(e){

        var startRatio = e.startRatio;

        var endRatio = e.endRatio;

        // change the chart title

        chart.title("The chart shows the part from " + startRatio + " to " + endRatio);

    });

​

    // create a series

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

    series.name("Total support requests");

​

    // create a chart settings

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

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

​

    // 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]

    ];    

}