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
"format": "A",
25
"data": [
26
{
27
"date": "2006-06-08",
28
"description": "Cisco announced the acquisition of Audium Corporation.",
29
"short_desc": "Audium Corporation Acquisition"
30
},
31
{
32
"date": "2008-04-27",
33
"description": "Cisco announced its intent to acquire PostPath, Inc.",
34
"short_desc": "PostPath Acquisition"
35
}
36
]
37
},
38
{
39
"format": "B",
40
"data": [
41
{
42
"date": "2009-02-10",
43
"description": "Cisco and Tata Consultancy Services announced strategic alliance.",
44
"short_desc": "Alliance with TCS"
45
},
46
{
47
"date": "2009-02-12",
48
"description": "Cisco unveiled 'Intelligent Urbanisation' vision for Bangalore.",
49
"short_desc": "Intelligent Urbanisation"
50
}
51
]
52
}
53
]});
54
55
// configure tooltips of event markers
56
plot.eventMarkers().tooltip().titleFormat("{%short_desc} ({%symbol})");
57
plot.eventMarkers().tooltip().format("Event: {%description}");
58
59
// set the chart title
60
chart.title("Event Markers: Tooltips (Tokens)");
61
62
// set the container id
63
chart.container("container");
64
65
// initiate drawing the chart
66
chart.draw();
67
});