html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

select {

    margin: 10px 0 0 10px;

}

button {

    margin: 10px 0 0 5px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

    // 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")

​

    // create an Ellipse annotation

    chart.plot(0).annotations().ellipse({

        xAnchor: "2006-11-20",

        valueAnchor: 35.41,

        secondXAnchor: "2007-02-24",

        secondValueAnchor: 18.05,

    });

​

    // create a Rectangle annotation

    chart.plot(0).annotations().rectangle({

        xAnchor: "2007-06-01",

        valueAnchor: 35.41,

        secondXAnchor: "2007-12-09",

        secondValueAnchor: 18.05

    });

​

    // set the chart title

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // reset the select list to the first option

    chart.listen("annotationDrawingFinish", function(){

      document.getElementById("typeSelect").value = "default";

    });

});

​

// create annotations

function create() {

  var select = document.getElementById("typeSelect");

  chart.plot(0).annotations().startDrawing(select.value);

}

​

// remove all annotations

function removeAll() {

  chart.plot(0).annotations().removeAllAnnotations();

}

​

// copy annotations to the second plot

function copy() {

  // serialize annotations from the first plot

  var xml = chart.plot(0).annotations().toXml();

  // deserialize the annotations to the second plot

  chart.plot(1).annotations().fromXml(xml);

}