html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create a stage    

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

    // the data used in this sample can be obtained from the CDN

    // https://cdn.anychart.com/csv-data/csco-daily.js

    // create a data table using this data

    var dataTable = anychart.data.table();

    dataTable.addData(get_csco_daily_short_data());

​

    // map the data

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

​

    // create a stock chart

    chart = anychart.stock();

​

    // create a plot on the chart

    var plot = chart.plot(0);

​

    // create a line series

    var lineSeries = plot.line(mapping);

    lineSeries.name("CSCO");

​

    // an auxiliary variable for working with annotations

    var controller = plot.annotations();

​

    // set the chart position and title

    chart.top(15);

    chart.title("Handling Events");

​

    // 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();

// change the chart title

chart.title("Handling Events");

    });

​

    // create an event listener for selection

    chart.listen("annotationSelect", function(e){

var selectedAnnotation = e.annotation;

// change the annotation stroke on selection

selectedAnnotation.selectStroke("#FF0000", 3, "5 2", "round");

// change the chart title on selection

chart.title("The " + selectedAnnotation.getType() + " annotation is selected.");

    });

});

​

// 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;

};