html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create container for two charts.

    var stage = anychart.graphics.create('container');

​

    // create data table

    var table = anychart.data.table();

    // add data

    table.addData([

        ['2015-12-01', 511.53, 514.98, 505.79, 506.40],

        ['2015-12-12', 512.53, 514.88, 505.69, 510.34],

        ['2015-12-26', 511.83, 514.98, 505.59, 507.23],

        ['2015-12-27', 511.22, 515.30, 505.49, 506.47],

        ['2015-12-28', 511.53, 514.98, 505.79, 506.40],

        ['2015-12-29', 512.53, 513.88, 505.69, 510.34],

        ['2015-12-30', 511.83, 512.98, 502.59, 503.23],

        ['2015-12-31', 511.22, 515.30, 505.49, 506.47]

    ]);

​

    // map loaded data

    var mapping = table.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});

​

    // create ordinal (default) stock chart

    var chart1 = anychart.stock();

    // set x scale type

    chart1.xScale('ordinal');

    // configure and display chart

    chart1.title('Ordinal Time Scale');

    chart1.plot(0).ohlc(mapping).name('ACME Corp. Stock Prices');

    chart1.bounds(0, 0, '100%', '50%');

    chart1.container(stage).draw();

​

    // create scatter stock chart

    var chart2 = anychart.stock();

    // set x scale type

    chart2.xScale('scatter');

    // configure and display chart

    chart2.title('Scatter Time Scale');

    chart2.plot(0).ohlc(mapping).name('ACME Corp. Stock Prices');

    chart2.bounds(0, '50%', '100%', '50%');

    chart2.container(stage).draw();

});