HTMLcopy
x
1
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
2
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-stock.min.js"></script>
3
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-data-adapter.min.js"></script>
4
5
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
56
1
anychart.onDocumentReady(function () {
2
anychart.data.loadCsvFile('https://gist.githubusercontent.com/shacheeswadia/e2fd68f19e5331f87d38473a45a11dbe/raw/396b3e14f2d7e05aa188e0a420a7b622ed4111bd/amzohlcweekly.csv',
3
function (data) {
4
// create data table on loaded data
5
var dataTable = anychart.data.table();
6
dataTable.addData(data);
7
8
// map loaded data for the ohlc series
9
var mapping = dataTable.mapAs({
10
open: 1,
11
high: 2,
12
low: 3,
13
close: 4
14
});
15
16
// create stock chart
17
var chart = anychart.stock();
18
19
// create first plot on the chart
20
var plot = chart.plot(0);
21
22
// create ohlc series
23
plot
24
.ohlc()
25
.data(mapping)
26
.name('AMZ');
27
28
// set grid settings
29
plot
30
.yGrid(true)
31
.xGrid(true)
32
.yMinorGrid(true)
33
.xMinorGrid(true);
34
35
// create EMA indicators with period 50
36
plot
37
.ema(dataTable.mapAs({ value: 4 }));
38
39
// create scroller series with mapped data
40
chart.scroller().area(dataTable.mapAs({ value: 4 }));;
41
42
// set chart selected date/time range
43
chart.selectRange('2009-07-01', '2021-06-31');
44
45
// sets the title of the chart
46
chart.title('Amazon Inc. Stock Prices');
47
48
// set container id for the chart
49
chart.container('container');
50
51
// initiate chart drawing
52
chart.draw();
53
54
}
55
);
56
});