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, 6.2, 7.4],

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

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

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

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

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

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

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

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

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

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

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

​

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

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

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

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

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

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

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

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

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

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

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

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

​

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

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

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

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

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

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

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

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

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

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

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

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

  ]);

  // map the data

  mapping_lon = table.mapAs();

  mapping_lon.addField('low', 1);

  mapping_lon.addField('high', 2);

  mapping_edb = table.mapAs();

  mapping_edb.addField('low', 3);

  mapping_edb.addField('high', 4);

​

  // chart type

  var chart = anychart.stock();

​

  // set the series for London

  var series_lon = chart.plot(0).rangeColumn(mapping_lon);

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

​

  // set the series for Edinburgh

  var series_edb = chart.plot(1).rangeColumn(mapping_edb);

  series_edb.name("Water temperature in Edinburgh in 2010-2012");

​

  // australia series coloring

  series_lon.fill("#CC9933");

  series_lon.stroke("#663300");

​

  // sydney series coloring

  series_edb.fill("#fff");

  series_edb.hatchFill("cross");

  series_edb.stroke("#000");

​

  // crosshair settings

  chart.plot(0).dateTimeHighlighter("#663300", 1.5, "6 2", "round");

  chart.plot(1).dateTimeHighlighter("#999", 1.5);

​

  chart.title('Water Temperature');

  chart.container('container');

​

  chart.draw();

});