HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// the data used in this sample can be obtained from the CDN
4
// https://cdn.anychart.com/csv-data/csco-daily.js
5
// create a data table using this data
6
var dataTable = anychart.data.table();
7
dataTable.addData(get_csco_daily_short_data());
8
9
// map the data
10
var mapping = dataTable.mapAs({"value": 4});
11
12
// create a stock chart
13
var chart = anychart.stock();
14
15
// create a plot on the chart
16
var plot = chart.plot(0);
17
18
// create a line series
19
var lineSeries = plot.line(mapping);
20
lineSeries.name("CSCO");
21
22
// access the annotations() object of the plot to work with annotations
23
var controller = plot.annotations();
24
25
// create the first Ray annotation and configure its visual settings
26
var ray1 = controller.ray({
27
xAnchor: "2006-07-30",
28
valueAnchor: 17.24,
29
secondXAnchor: "2008-04-27",
30
secondValueAnchor: 26.75,
31
hovered: {stroke: "2 #ff0000"},
32
selected: {stroke: "4 #ff0000"}
33
});
34
35
// create the second Ray annotation
36
var ray2 = controller.ray();
37
38
// set the position of the second annotation
39
ray2.xAnchor("2004-06-06");
40
ray2.valueAnchor(23.82);
41
ray2.secondXAnchor("2007-09-23");
42
ray2.secondValueAnchor(33.13);
43
44
// configure the visual settings of the second annotation
45
ray2.normal().stroke("#006600", 1, "10 2");
46
ray2.hovered().stroke("#00b300", 2, "10 2");
47
ray2.selected().stroke("#00b300", 4, "10 2");
48
49
// set the chart title
50
chart.title("Ray: Appearance");
51
52
// set the container id
53
chart.container("container");
54
55
// initiate drawing the chart
56
chart.draw();
57
});