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
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/csv-data/csco-daily.js
4
// create data table on loaded data
5
var dataTable = anychart.data.table();
6
dataTable.addData(get_csco_daily_data());
7
// map loaded data
8
var mapping = dataTable.mapAs();
9
mapping.addField("open", 1, "first");
10
mapping.addField("high", 2, "max");
11
mapping.addField("low", 3, "min");
12
mapping.addField("close", 4, "last");
13
// create stock chart
14
var chart = anychart.stock();
15
// create plots on the chart
16
var plot_0 = chart.plot(0);
17
var plot_1 = chart.plot(1);
18
19
// create line series on both of them
20
var ohlcSeries_0 = plot_0.ohlc(mapping);
21
ohlcSeries_0.name("CSCO");
22
ohlcSeries_0.stroke("2px #64b5f6");
23
24
var ohlcSeries_1 = plot_1.ohlc(mapping);
25
ohlcSeries_1.name("CSCO");
26
ohlcSeries_1.stroke("2px #64b5f6");
27
28
// create first KDJ indicator of default series type
29
var kdj_1 = plot_0.kdj(mapping, 10, "EMA", 10, "SMA", 20);
30
kdj_1.kSeries().stroke("#bf360c");
31
kdj_1.dSeries().stroke("#02660c");
32
kdj_1.jSeries().stroke("#0228b2");
33
34
// create second KDJ indicator of column series
35
var kdj_2 = plot_1.kdj(mapping, 14, "EMA", 5, "EMA", 5, -2, 3, "spline", "spline", "spline");
36
kdj_2.kSeries().stroke("#bf360c");
37
kdj_2.dSeries().stroke("#02660c");
38
kdj_2.jSeries().stroke("#0228b2");
39
40
// set container id for the chart
41
chart.container("container");
42
// initiate chart drawing
43
chart.draw();
44
});