HTMLcopy
1
<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
x
1
anychart.onDocumentReady(function () {
2
3
// load stock data:
4
// for apple
5
anychart.data.loadCsvFile(
6
"https://cdn.anychart.com/csv-data/AAPL.csv",
7
function (appleData) {
8
// for microsoft
9
anychart.data.loadCsvFile(
10
"https://cdn.anychart.com/csv-data/MSFT.csv",
11
function (msData) {
12
// for alphabet (google)
13
anychart.data.loadCsvFile(
14
"https://cdn.anychart.com/csv-data/GOOG.csv",
15
function (googleData) {
16
17
// create data tables:
18
// for apple
19
let appleDataTable = anychart.data.table();
20
appleDataTable.addData(appleData);
21
// for microsoft
22
let msftDataTable = anychart.data.table();
23
msftDataTable.addData(msData);
24
// for alphabet (google)
25
let googleDataTable = anychart.data.table();
26
googleDataTable.addData(googleData);
27
28
// create a stock chart
29
let chart = anychart.stock();
30
31
// create three stock plots with area series:
32
// for apple
33
let firstPlot = chart.plot(0);
34
let appleSeries = firstPlot.area(
35
appleDataTable.mapAs({ value: 4 })
36
);
37
appleSeries.name("AAPL");
38
// for microsoft
39
let secondPlot = chart.plot(1);
40
let msftSeries = secondPlot.area(
41
msftDataTable.mapAs({ value: 4 })
42
);
43
msftSeries.name("MSFT");
44
// for alphabet (google)
45
let thirdPlot = chart.plot(2);
46
let googleSeries = thirdPlot.area(
47
googleDataTable.mapAs({ value: 4 })
48
);
49
googleSeries.name("GOOG");
50
51
// set the stock chart title
52
chart.title("Decade of Tech Titan Stocks");
53
54
// set the stock chart container id
55
chart.container("container");
56
57
// initiate the stock chart drawing
58
chart.draw();
59
60
}
61
);
62
}
63
);
64
}
65
);
66
});