HTMLcopy
1
<label><input onclick="setDirection('auto')" type="radio" name="type" checked>Auto</label>
2
<label><input onclick="setDirection('down')" type="radio" name="type">Down</label>
3
<label><input onclick="setDirection('up')" type="radio" name="type">Up</label>
4
<div id="container"></div>
CSScopy
16
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#container {
12
position: absolute;
13
width: 100%;
14
top: 35px;
15
bottom: 0;
16
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
dataTable = anychart.data.table();
5
dataTable.addData([
6
["2015-12-24", 5.3],
7
["2015-12-25", 9.9],
8
["2015-12-26", 1.1],
9
["2015-12-27", 7.1],
10
["2015-12-28", 4.4],
11
["2015-12-29", 6.5],
12
["2015-12-30", 2.0],
13
["2015-12-31", 5.3],
14
["2016-01-01", 8.7],
15
["2016-01-02", 3.1],
16
["2016-01-03", 0.0],
17
["2016-01-04", -8.8],
18
["2016-01-05", -2.0],
19
["2016-01-06", -4.4],
20
["2016-01-07", -9.4],
21
["2016-01-08", -6.6],
22
["2016-01-09", -6.8],
23
["2016-01-10", -5.0],
24
["2016-01-11", -4.2],
25
["2016-01-12", -7.9],
26
["2016-01-13", -10.1]
27
]);
28
29
// map the data
30
var mapping = dataTable.mapAs({value: 1});
31
32
// create a stock chart
33
chart = anychart.stock();
34
35
// create a plot on the chart
36
plot = chart.plot(0);
37
38
// create a line series
39
var series = plot.line(mapping);
40
41
// add event markers
42
plot.eventMarkers({"groups": [
43
{
44
"data": [
45
{
46
"date": "2015-12-24",
47
"description": "Event 1"
48
},
49
{
50
"date": "2016-01-03",
51
"description": "Event 2"
52
},
53
{
54
"date": "2016-01-07",
55
"description": "Event 3"
56
},
57
]
58
}
59
]});
60
61
// bind event markers to the series
62
plot.eventMarkers().position("series");
63
64
// set the chart title
65
chart.title("Event Markers: Direction");
66
67
// set the container id
68
chart.container("container");
69
70
// initiate drawing the chart
71
chart.draw();
72
});
73
74
// set the position of event markers
75
function setDirection(direction) {
76
plot.eventMarkers().direction(direction);
77
// update the chart title
78
chart.title("Event Markers: Direction = " +
79
plot.eventMarkers().direction());
80
}