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
plot.eventMarkers().tooltip().titleFormat(function() {
56
return this.getData("short_desc") + " (" + this.symbol + ")";
57
});
58
59
plot.eventMarkers().tooltip().format(function() {
60
return "On " + anychart.format.dateTime(this.date, "MMMM dd") +
61
", " + this.description;
62
});
63
64
// set the chart title
65
chart.title("Event Markers: Tooltips (Formatting Functions)");
66
67
// set the container id
68
chart.container("container");
69
70
// initiate drawing the chart
71
chart.draw();
72
});