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-01T12:00:00', "low": 5.8, "high": 7.9},

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

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

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

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

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

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

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

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

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

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

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

​

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

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

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

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

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

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

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

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

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

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

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

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

​

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

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

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

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

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

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

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

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

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

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

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

    {"month": '2012-12-28T12:00:00', "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();

});