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
plot.line(mapping).name("CSCO");
20
21
// add event markers
22
plot.eventMarkers({"groups": [
23
{
24
"data": [
25
{
26
"symbol": "1",
27
"date": "2006-06-08",
28
"description": "Cisco announced the acquisition of Audium Corporation.",
29
"normal": {"type": "circle",
30
"fill": "#d1ead9", "stroke": "2 #009933",
31
"fontColor": "#009933", "fontWeight": 600,
32
"connector": {"stroke": "2 #009933"}},
33
"hovered": {"fill": "white", "stroke": "2 #009933",
34
"fontColor": "#009933",
35
"connector": {"stroke": "2 #009933"}},
36
"selected": {"fill": "white", "stroke": "2 #194d00",
37
"fontColor": "#194d00",
38
"connector": {"stroke": "2 #194d00"}}
39
},
40
{
41
"symbol": "2",
42
"date": "2008-04-27",
43
"description": "Cisco announced its intent to acquire PostPath, Inc.",
44
"normal": {"type": "rect", "width": 40,
45
"fill": "#ead9d1", "stroke": "2 #990033",
46
"fontColor": "#990033", "fontWeight": 600,
47
"connector": {"stroke": "2 #990033"}},
48
"hovered": {"fill": "white", "stroke": "2 #990033",
49
"fontColor": "#990033",
50
"connector": {"stroke": "2 #990033"}},
51
"selected": {"fill": "white", "stroke": "2 #4d1a00",
52
"fontColor": "#4d1a00",
53
"connector": {"stroke": "2 #4d1a00"}}
54
},
55
]
56
}
57
]});
58
59
// set the symbol of event markers
60
plot.eventMarkers().format(function() {
61
return this.getData("symbol");
62
});
63
64
// set the chart title
65
chart.title("Event Markers: Individual Markers");
66
67
// set the container id
68
chart.container("container");
69
70
// initiate drawing the chart
71
chart.draw();
72
});