html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // set the data

    table = anychart.data.table();

    table.addData([

['2004-07-01', 23.65, 23.68, 22.92, 23.11],

['2004-07-02', 23.14, 23.21, 22.71, 22.95],

['2004-07-06', 22.68, 22.71, 22.23, 22.37],

['2004-07-07', 22.41, 22.74, 22.32, 22.42],

['2004-07-08', 22.29, 22.65, 22.10, 22.17],

['2004-07-09', 22.27, 22.58, 22.18, 22.36],

['2004-07-12', 22.16, 22.30, 21.94, 22.29],

['2004-07-13', 22.35, 22.62, 22.11, 22.14],

['2004-07-14', 22.30, 22.53, 22.00, 22.10],

['2004-07-15', 22.17, 22.39, 22.07, 22.13],

['2004-07-16', 22.39, 22.41, 21.25, 21.53],

['2004-07-19', 21.42, 21.75, 21.06, 21.36],

['2004-07-20', 21.42, 21.91, 21.32, 21.88],

['2004-07-21', 22.21, 22.27, 21.15, 21.17],

['2004-07-22', 21.20, 21.53, 20.94, 21.39],

['2004-07-23', 21.26, 21.28, 20.75, 20.93],

['2004-07-26', 20.84, 21.03, 20.30, 20.54],

['2004-07-27', 20.57, 20.79, 20.25, 20.71],

['2004-07-28', 20.55, 20.69, 20.07, 20.50],

['2004-07-29', 20.76, 20.98, 20.64, 20.80],

['2004-07-30', 20.82, 21.30, 20.75, 20.92],

['2004-08-02', 20.60, 21.24, 20.50, 21.24],

['2004-08-03', 21.13, 21.23, 20.73, 20.74],

['2004-08-04', 20.62, 21.18, 20.58, 21.12],

['2004-08-05', 21.12, 21.23, 20.57, 20.61],

['2004-08-06', 20.22, 20.60, 19.87, 19.93],

['2004-08-09', 20.02, 20.22, 19.94, 20.05],

['2004-08-10', 20.31, 20.47, 20.05, 20.46],

['2004-08-11', 18.60, 18.65, 18.24, 18.29],

['2004-08-12', 18.25, 18.35, 17.53, 17.79],

['2004-08-13', 18.23, 18.23, 17.80, 17.86]

    ]);

    // map the data

    mapping_ex1 = table.mapAs();

    mapping_ex1.addField('low', 1);

    mapping_ex1.addField('high', 2);

    mapping_ex2 = table.mapAs();

    mapping_ex2.addField('low', 3);

    mapping_ex2.addField('high', 4);

​

    // chart type

    var chart = anychart.stock();

​

    // set the series

    var series_ex1 = chart.plot(0).rangeStepArea(mapping_ex1);

    series_ex1.name("Experiment 1");

    var series_ex2 = chart.plot(1).rangeStepArea(mapping_ex2);

    series_ex2.name("Experiment 2");

​

    // coloring

    series_ex1.fill("#f00 0.6");

    series_ex2.fill("#fff");

    series_ex2.hatchFill("diagonalCross");

​

    // crosshair settings

    chart.plot(0).dateTimeHighlighter("green", 0.5, "10 4");

​

    chart.title('Temperature dispersion');

    chart.container('container');

​

    chart.draw();

});