html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

    // create a data table

    var dataTable = anychart.data.table();

    dataTable.addData([

["2004-01-02", 2011.08, 2022.37, 1999.77, 2006.6801, 1666780032, 2000],

["2004-01-05", 2020.78, 2047.36, 2020.78, 2047.36, 2362909952, 1954],

["2004-01-06", 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096, 1956],

["2004-01-07", 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936, 1892],

["2004-01-08", 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080, 2013],

["2004-01-09", 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936, 2109],

["2004-01-12", 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984, 2146],

["2004-01-13", 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096, 2006],

["2004-01-14", 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048, 1793],

["2004-01-15", 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888, 1948],

["2004-01-16", 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016, 2094],

["2004-01-20", 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080, 2176],

["2004-01-21", 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096, 2012],

["2004-01-22", 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112, 1954],

["2004-01-23", 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016, 1832],

["2004-01-26", 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048, 1623],

["2004-01-27", 2148.05, 2152.75, 2116.04, 2116.04, 2151259904, 2105],

["2004-01-28", 2125.02, 2128, 2073.1499, 2077.3701, 2319549952, 2195],

["2004-01-29", 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000, 2131],

["2004-01-30", 2068.3601, 2078.8799, 2058.54, 2066.1499, 1931180032, 2015]

]);

​

    // map the data

    var mapping = dataTable.mapAs({"value": 4});

    var ohlcMapping = dataTable.mapAs({"open": 1, "high": 2, "low": 3, "close":4});

    var lineMapping = dataTable.mapAs({"value": 5});

    // create a stock chart

    var chart = anychart.stock();

    chart.padding(0,70,10,50);

​

    // create a plot on the chart

    var plot = chart.plot(0);

​

    // create and configure an additional Y-scale

    var extraYScale = anychart.scales.linear();

    extraYScale.minimum(0);

    extraYScale.maximum(3000000000);

    var extraTicks = extraYScale.ticks();

    extraTicks.interval(500000000);

​

    // create and configure an additional Y-axis

    var extraYAxis = plot.yAxis(1);

    extraYAxis.orientation("right");

    extraYAxis.scale(extraYScale);

    extraYAxis.labels().format(function(){

var value = this.value;

return value/1000000 + " mil";

    });

​

    // create an OHLC series

    var ohlcSeries = plot.ohlc(ohlcMapping);

    ohlcSeries.name("ACME Corp. Stock Prices");

​

    // create a line series

    var lineSeries = plot.line(lineMapping);

    lineSeries.yScale(extraYScale);

    lineSeries.name("Number of income requests worldwide");

​

    // an auxiliary variable for working with annotations

    var controller = plot.annotations();

​

    // create an Infinite Line annotation (automatically bound to the main Y-scale)

    controller.infiniteLine({

xAnchor: "2004-01-06",

valueAnchor: 2039.63,

secondXAnchor: "2004-01-15",

secondValueAnchor: 2088.10

    });

​

    //create an Ellipse annotation

    var ellipse = controller.ellipse({

xAnchor: "2004-01-07",

valueAnchor: 2583950080,

secondXAnchor: "2004-01-09",

secondValueAnchor: 2783950080

    });

​

    // bind the Ellipse annotation to the additional Y-scale

    ellipse.yScale(extraYScale);

​

    // set the chart title

    chart.title("Binding Annotations to Axes");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});