html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // set the data

  table = anychart.data.table();

  table.addData([

['2010-01-01T12:00:00', 5.8, 7.9],

['2010-02-01T12:00:00', 4.6, 6.1],

['2010-03-01T12:00:00', 5.9, 8.1],

['2010-04-01T12:00:00', 7.8, 10.7],

['2010-05-01T12:00:00', 10.5, 13.7],

['2010-06-01T12:00:00', 13.8, 17],

['2010-07-01T12:00:00', 16.5, 18.5],

['2010-08-31T12:00:00', 17.8, 19],

['2010-09-01T12:00:00', 15.4, 17.8],

['2010-10-01T12:00:00', 12.7, 15.3],

['2010-11-01T12:00:00', 9.8, 13],

['2010-12-01T12:00:00', 9, 10.1],

​

['2010-01-01T12:00:00', 5.7, 8],

['2011-02-01T12:00:00', 6, 8.4],

['2011-03-01T12:00:00', 6, 9.5],

['2011-04-01T12:00:00', 7.7, 10],

['2011-05-01T12:00:00', 8.9, 11.1],

['2011-06-01T12:00:00', 10.2, 16.3],

['2011-07-01T12:00:00', 14.3, 19],

['2011-08-01T12:00:00', 16, 20.1],

['2011-09-01T12:00:00', 15.8, 18.9],

['2011-10-01T12:00:00', 11.4, 13.2],

['2011-11-01T12:00:00', 8.3, 10],

['2011-12-01T12:00:00', 6.5, 8.7],

​

['2012-01-01T12:00:00', 7.2, 8.6],

['2012-02-01T12:00:00', 5.3, 7.4],

['2012-03-01T12:00:00', 6.1, 9.4],

['2012-04-01T12:00:00', 8.7, 11.2],        

['2012-05-21T12:00:00', 10.4, 14.3],

['2012-06-22T12:00:00', 13.5, 17.1],

['2012-07-23T12:00:00', 15.8, 19.7],

['2012-08-24T12:00:00', 17.8, 21],

['2012-09-25T12:00:00', 15.1, 17.3],

['2012-10-26T12:00:00', 12.6, 15.9],

['2012-11-27T12:00:00', 10.2, 13.8],

['2012-12-28T12:00:00', 8.3, 9.6]

  ]);

  // map the data

  mapping = table.mapAs();

  mapping.addField('low', 1);

  mapping.addField('high', 2);

​

  // chart type

  var chart = anychart.stock();

​

  // set 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();

});