html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create a stage    

    stage = anychart.graphics.create("container");  

​

    // create a data table

    var dataTable = anychart.data.table();

    dataTable.addData([

['2015-12-24T12:00:00', 511.53, 514.98, 505.79, 506.40],

['2015-12-25T12:00:00', 512.53, 514.88, 505.69, 507.34],

['2015-12-26T12:00:00', 511.83, 514.98, 505.59, 506.23],

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

['2015-12-28T12:00:00', 510.35, 515.72, 505.23, 505.80],

['2015-12-29T12:00:00', 510.53, 515.86, 505.38, 508.25],

['2015-12-30T12:00:00', 511.43, 515.98, 505.66, 507.45],

['2015-12-31T12:00:00', 511.50, 515.33, 505.99, 507.98],

['2016-01-01T12:00:00', 511.32, 514.29, 505.99, 506.37],

['2016-01-02T12:00:00', 511.70, 514.87, 506.18, 506.75],

['2016-01-03T12:00:00', 512.30, 514.78, 505.87, 508.67],

['2016-01-04T12:00:00', 512.50, 514.77, 505.83, 508.35],

['2016-01-05T12:00:00', 511.53, 516.18, 505.91, 509.42],

['2016-01-06T12:00:00', 511.13, 516.01, 506.00, 509.26],

['2016-01-07T12:00:00', 510.93, 516.07, 506.00, 510.99],

['2016-01-08T12:00:00', 510.88, 515.93, 505.22, 509.95],

['2016-01-09T12:00:00', 509.12, 515.97, 505.15, 510.12],

['2016-01-10T12:00:00', 508.53, 516.13, 505.66, 510.42],

['2016-01-11T12:00:00', 508.90, 516.24, 505.73, 510.40]  

]);

     // map the data

     mapping = dataTable.mapAs();

     mapping.addField('open', 1, 'first');

     mapping.addField('high', 2, 'max');

     mapping.addField('low', 3, 'min');

     mapping.addField('close', 4, 'last');

     mapping.addField('value', 4, 'last');

​

    // create a stock chart

    chart = anychart.stock();

​

    // create an OHLC series

    var ohlcSeries = chart.plot(0).ohlc(mapping);

    ohlcSeries.name("Series 1")

​

    // create a line series

    var lineSeries = chart.plot(1).line(mapping);

    lineSeries.name("Series 2")

​

    // an auxiliary variable for working with annotations

    var controller = chart.annotations();

​

    // allow drawing on the first plot

    chart.plot(0).annotations().enabled(true);

​

    // forbid drawing on the second plot

    chart.plot(1).annotations().enabled(false);

​

    // set the chart position and title

    chart.top(15);

    chart.title("Forbidding Drawing");

​

    // set the chart container and initiate drawing the chart

    chart.container(stage);

    chart.draw();

​

    // create a label for the Andrews' Pitchfork annotation

    createLabel("Andrews' Pitchfork", 10, function() {

// start drawing the annotation

controller.startDrawing("andrewsPitchfork");

    });

​

    // create a label for the Triangle annotation

    createLabel("Triangle", 150, function() {

// start drawing the annotation

controller.startDrawing("triangle");

    });

​

    // create a label for the Ellipse annotation

    createLabel("Ellipse", 219, function() {

// start drawing the annotation

controller.startDrawing("ellipse");

    });

​

    // create a label for removing annotations

    createLabel("Remove All", 300, function() {

// remove all annotations

controller.removeAllAnnotations();

    });

});

​

// a helper function for creating buttons

function createLabel(text, offset, action){

    var label = anychart.standalones.label();

    label.background({fill: "#1976d2"});

    label.text(text);

    label.fontColor("#fff");

    label.padding(5);

    label.parentBounds(offset, 5, 130, 100);    

    label.listen("click", action);

    label.container(stage);

    label.draw();

    label.listen("mouseOver", function(){

label.background().fill("#1976d2 0.5");

document.body.style.cursor = "pointer";

label.draw();

    });

    label.listen("mouseOut", function(){

label.background().fill("#1976d2");

document.body.style.cursor = "auto";

label.draw();

    });    

    return label;

};