html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // set the data

    table = anychart.data.table('x');

    table.addData([

{x: "2000-01-01", low: 2, high: 6},

{x: "2000-02-01", low: 2, high: 7},

{x: "2000-03-01", low: 3, high: 10},

{x: "2000-04-01", low: 5, high: 13},

{x: "2000-05-01", low: 8, high: 17},

{x: "2000-06-01", low: 11, high: 20},

{x: "2000-07-01", low: 13, high: 22},

{x: "2000-08-01", low: 13, high: 21},

{x: "2000-09-01", low: 11, high: 19},

{x: "2000-10-01", low: 8, high: 14},

{x: "2000-11-01", low: 5, high: 10},

{x: "2000-12-01", low: 5, high: 7},

{x: "2001-01-01", low: 3, high: 7},

{x: "2001-02-01", low: 4, high: 7},

{x: "2001-03-01", low: 5, high: 8},

{x: "2001-04-01", low: 7, high: 12},

{x: "2001-05-01", low: 7, high: 14},

{x: "2001-06-01", low: 13, high: 23},

{x: "2001-07-01", low: 15, high: 24},

{x: "2001-08-01", low: 11, high: 20},

{x: "2001-09-01", low: 10, high: 20},

{x: "2001-10-01", low: 7, high: 15},

{x: "2001-11-01", low: 5, high: 11},

{x: "2001-12-01", low: 1, high: 9},

{x: "2002-01-01", low: 2, high: 6},

{x: "2002-02-01", low: 6, high: 9},

{x: "2002-03-01", low: 7, high: 11},

{x: "2002-04-01", low: 9, high: 14},

{x: "2002-05-01", low: 11, high: 17},

{x: "2002-06-01", low: 18, high: 19},

{x: "2002-07-01", low: 19, high: 22}

    ]);

    // map the data

    mapping = table.mapAs({x:'x', high:'high', low: 'low'});

​

    // chart type

    var chart = anychart.stock();

​

    // set the series

    var series = chart.plot(0).rangeSplineArea(mapping);

    series.name("London");

​

    chart.title('Temperature range \n2000-2004');

​

    // display the chart

    chart.container('container');

    chart.draw();

});