HTMLcopy
1
<select id="typeSelect" onclick="create()">
2
<option value="default" selected disabled>Annotation Type</option>
3
<option value="andrews-pitchfork">Andrews' Pitchfork</option>
4
<option value="ellipse">Ellipse</option>
5
<option value="fibonacci-arc">Fibonacci Arc</option>
6
<option value="fibonacci-fan">Fibonacci Fan</option>
7
<option value="fibonacci-retracement">Fibonacci Retracement</option>
8
<option value="fibonacci-timezones">Fibonacci Time Zones</option>
9
<option value="horizontal-line">Horizontal Line</option>
10
<option value="infinite-line">Infinite Line</option>
11
<option value="line">Line Segment</option>
12
<option value="marker">Marker</option>
13
<option value="ray">Ray</option>
14
<option value="rectangle">Rectangle</option>
15
<option value="trend-channel">Trend Channel</option>
16
<option value="triangle">Triangle</option>
17
<option value="vertical-line">Vertical Line</option>
18
</select>
19
<button onclick="removeAll()">Remove All</button>
20
<div id="container"></div>
CSScopy
18
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
select {
8
margin: 10px 0 0 10px;
9
}
10
button {
11
margin: 10px 0 0 5px;
12
}
13
#container {
14
position: absolute;
15
width: 100%;
16
top: 35px;
17
bottom: 0;
18
}
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
plot = chart.plot(0);
17
18
// create a line series
19
var lineSeries = plot.line(mapping);
20
lineSeries.name("CSCO");
21
22
// set the chart title
23
chart.title("Initiating Drawing");
24
25
// set the container id
26
chart.container("container");
27
28
// initiate drawing the chart
29
chart.draw();
30
31
// reset the select list to the first option
32
chart.listen("annotationDrawingFinish", function(){
33
document.getElementById("typeSelect").value = "default";
34
});
35
});
36
37
// create annotations
38
function create() {
39
var select = document.getElementById("typeSelect");
40
plot.annotations().startDrawing(select.value);
41
}
42
43
// remove all annotations
44
function removeAll() {
45
plot.annotations().removeAllAnnotations();
46
}