html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

// create data table on loaded data

var dataTable = anychart.data.table();

dataTable.addData(getData());

​

// map loaded data

var mapping = dataTable.mapAs({'value': 1});

​

// create stock chart

var chart = anychart.stock();

​

// add a series

chart.plot(0).line(mapping);

​

// events

// create a listener function

listener = function(e){

    chart.title("The selected range is: " + anychart.format.dateTime(e.firstSelected, 'dd MMM yyyy') + " - " + anychart.format.dateTime(e.lastSelected,'dd MMM yyyy'));

}

​

// attach it to all required events

chart.listen("selectedrangechangestart", listener);

chart.listen("selectedrangebeforechange", listener);

chart.listen("selectedrangechange", listener);

chart.listen("selectedrangechangefinish", listener);

​

// adjust the title

chart.title("Drag the scroller to watch the selected range is changing");

​

// set container id for the chart

chart.container('container');

​

// initiate chart drawing

chart.draw();

});

​

​

function getData(){

return [

    ['2003-12-24', 2011.08],

    ['2003-12-25', 2020.78],

    ['2003-12-26', 2044.55],

    ['2003-12-29', 2056.75],

    ['2003-12-30', 2089.60],

    ['2003-12-31', 2083.63],

    ['2004-01-01', 2093.54],

    ['2004-01-02', 2011.08],

    ['2004-01-05', 2020.78],

    ['2004-01-06', 2044.55],

    ['2004-01-07', 2056.75],

    ['2004-01-08', 2089.60],

    ['2004-01-09', 2083.63],

    ['2004-01-12', 2093.54],

    ['2004-01-13', 2113.11],

    ['2004-01-14', 2104.29],

    ['2004-01-15', 2101.86],

    ['2004-01-16', 2126.12],

    ['2004-01-20', 2149.03],

    ['2004-01-21', 2139.33],

    ['2004-01-22', 2146.32],

    ['2004-01-23', 2124.76],

    ['2004-01-26', 2120.56],

    ['2004-01-27', 2148.05],

    ['2004-01-28', 2125.02],

    ['2004-01-29', 2085.54],

    ['2004-01-30', 2068.36]

    ];

}