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 line series

    var series1 = chart.plot(0).line(mapping);

    series1.name("Series 1")

​

    // create an area series

    var series2 = chart.plot(1).area(mapping);

    series2.name("Series 2")

​

    // an auxiliary variable for working with annotations on the first plot

    var controller1 = chart.plot(0).annotations();

​

    // an auxiliary variable for working with annotations on the second plot

    var controller2 = chart.plot(1).annotations();

​

    // create an Ellipse annotation

    controller1.ellipse({

xAnchor: "2006-11-20",

valueAnchor: 35.41,

secondXAnchor: "2007-02-24",

secondValueAnchor: 18.05,

    });

​

    // create a Rectangle annotation

    controller1.rectangle({

xAnchor: "2007-06-01",

valueAnchor: 35.41,

secondXAnchor: "2007-12-09",

secondValueAnchor: 18.05

    });

​

    // set the chart position and title

    chart.top(15);

    chart.title("Serializing and Deserializing (JSON)");

​

    // set the chart container and initiate drawing the chart

    chart.container(stage);

    chart.draw();

​

    // create a label for the Ellipse annotation

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

// start drawing the annotation on the first plot

controller1.startDrawing("ellipse");

    });

​

    // create a label for the Rectangle annotation

    createLabel("Rectangle", 208, function() {

// start drawing the annotation on the first plot

controller1.startDrawing("rectangle");

    });

​

    // create a label for removing annotations

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

// remove annotations from all plots

chart.annotations().removeAllAnnotations();

    });

​

    // create a label for serializing annotations from the first plot and deserializing them to the second one

    createLabel("Copy to the Second Plot", 423, function() {

// serialize annotations from the first plot

var json = controller1.toJson();

// deserialize the annotations to the second plot

controller2.fromJson(json);

    });

});

​

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

};