html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set the data

  table = anychart.data.table("month");

  table.addData([

    {'month': '2010-01-01', 'low': 5.8,  'high': 7.9},

    {'month': '2010-02-01', 'low': 4.6,  'high': 6.1},

    {'month': '2010-03-01', 'low': 5.9,  'high': 8.1},

    {'month': '2010-04-01', 'low': 7.8,  'high': 10.7},

    {'month': '2010-05-01', 'low': 10.5, 'high': 13.7},

    {'month': '2010-06-01', 'low': 13.8, 'high': 17},

    {'month': '2010-07-01', 'low': 16.5, 'high': 18.5},

    {'month': '2010-08-31', 'low': 17.8, 'high': 19},

    {'month': '2010-09-01', 'low': 15.4, 'high': 17.8},

    {'month': '2010-10-01', 'low': 12.7, 'high': 15.3},

    {'month': '2010-11-01', 'low': 9.8,  'high': 13},

    {'month': '2010-12-01', 'low': 9,    'high': 10.1},

    {'month': '2010-01-01', 'low': 5.7,  'high': 8},

    {'month': '2011-02-01', 'low': 6,    'high': 8.4},

    {'month': '2011-03-01', 'low': 6,    'high': 9.5},

    {'month': '2011-04-01', 'low': 7.7,  'high': 10},

    {'month': '2011-05-01', 'low': 8.9,  'high': 11.1},

    {'month': '2011-06-01', 'low': 10.2, 'high': 16.3},

    {'month': '2011-07-01', 'low': 14.3, 'high': 19},

    {'month': '2011-08-01', 'low': 16,   'high': 20.1},

    {'month': '2011-09-01', 'low': 15.8, 'high': 18.9},

    {'month': '2011-10-01', 'low': 11.4, 'high': 13.2},

    {'month': '2011-11-01', 'low': 8.3,  'high': 10},

    {'month': '2011-12-01', 'low': 6.5,  'high': 8.7},

    {'month': '2012-01-01', 'low': 7.2,  'high': 8.6},

    {'month': '2012-02-01', 'low': 5.3,  'high': 7.4},

    {'month': '2012-03-01', 'low': 6.1,  'high': 9.4},

    {'month': '2012-04-01', 'low': 8.7,  'high': 11.2},

    {'month': '2012-05-21', 'low': 10.4, 'high': 14.3},

    {'month': '2012-06-22', 'low': 13.5, 'high': 17.1},

    {'month': '2012-07-23', 'low': 15.8, 'high': 19.7},

    {'month': '2012-08-24', 'low': 17.8, 'high': 21},

    {'month': '2012-09-25', 'low': 15.1, 'high': 17.3},

    {'month': '2012-10-26', 'low': 12.6, 'high': 15.9},

    {'month': '2012-11-27', 'low': 10.2, 'high': 13.8},

    {'month': '2012-12-28', 'low': 8.3,  'high': 9.6}

  ]);

  // map the data

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

​

  // set the chart type

  var chart = anychart.stock();

​

  // define the series

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

  series.name("Water temperature in London in 2010-2012");

​

  chart.title('Water Temperature');

​

  chart.container('container');

  chart.draw();

});