html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // set the data

    table = anychart.data.table();

    table.addData([

['2004-01-02', 2995, 1217],

['2004-01-05', 3889, 3885],

['2004-01-06', 4368, 992],

['2004-01-07', 4875, 1753],

['2004-01-08', 6168, 2493],

['2004-01-09', 6885, 5672],

['2004-01-12', 5287, 7284],

['2004-01-13', 5633, 2737],

['2004-01-14', 4229, 8338],

['2004-01-15', 4609, 4829],

['2004-01-16', 9129, 7532],

['2004-01-20', 6227, 1038],

['2004-01-21', 5401, 3832],

['2004-01-22', 4346, 9248],

['2004-01-23', 5964, 2487],

['2004-01-26', 4298, 2498],

['2004-01-27', 4934, 7564],

['2004-01-28', 4944, 5764],

['2004-01-29', 8686, 3549],

['2004-01-30', 7179, 7365],

['2004-02-02', 8164, 2985],

['2004-02-03', 8172, 3573],

['2004-02-04', 9054, 9834],

['2004-02-05', 1039, 3453],

['2004-02-06', 7413, 7843],

['2004-02-09', 5270, 3820],

['2004-02-10', 3974, 2374],

['2004-02-11', 8776, 9458],

['2004-02-12', 4859, 8237],

['2004-02-13', 4336, 9283],

['2004-02-17', 3735, 2234]

    ]);

    // map the data

    mapping_total = table.mapAs();

    mapping_total.addField('value', 1);

    mapping_region = table.mapAs();

    mapping_region.addField('value', 2);

​

    // chart type

    var chart = anychart.stock();

​

    // set the series

    var series_total = chart.plot(0).stepArea(mapping_total);

    series_total.name("Total Request number");

    var series_region = chart.plot(1).stepArea(mapping_region);

    series_region.name("Region Request Number");

​

    // coloring

    series_total.stroke("#ff0000");

    series_total.fill("#f00 0.6");

    series_region.stroke("#000");

    series_region.fill("#fff");

    series_region.hatchFill("diagonalCross");

​

    // crosshair settings

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

​

    chart.title('Stock Step Line Demo');

    chart.container('container');

​

    chart.draw();

});