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
3
// create data table on loaded data
4
var dataTable = anychart.data.table();
5
dataTable.addData([
6
["2004-01-02",92.86,93.05,91.2,91.55,5327800],
7
["2004-01-05",92,93.09,92,93.05,5276300],
8
["2004-01-06",92.2,93.19,92.14,93.06,4380000],
9
["2004-01-07",93.14,93.38,92.47,92.78,4927600],
10
["2004-01-08",93.21,93.21,92.03,93.04,6179800],
11
["2004-01-09",91.75,92.35,91,91.21,7930900],
12
["2004-01-12",91.21,92.14,91.21,91.55,5130400],
13
["2004-01-13",91.45,91.51,89.01,89.7,8842500],
14
["2004-01-14",89.9,90.46,89.75,90.31,5505100],
15
["2004-01-15",95.07,95.65,93.55,94.02,19812000],
16
["2004-01-16",95,95.35,94.71,95.32,9302000],
17
["2004-01-20",96,97.44,95.73,97.1,9285100],
18
["2004-01-21",97.23,98.04,96.64,97.7,6949000],
19
["2004-01-22",97.84,98.16,97.32,97.51,4371600],
20
["2004-01-23",97.82,98.21,97.1,97.9,5283900],
21
["2004-01-26",97.9,99.85,97.56,99.85,6189400],
22
["2004-01-27",99.4,99.67,98.7,98.8,5345300],
23
["2004-01-28",99.15,99.42,97.28,97.38,6549700],
24
["2004-01-29",98.1,98.6,96.55,98.01,6642500],
25
["2004-01-30",98.02,99.33,97.84,99.23,6137600],
26
["2004-02-02",99.15,99.94,98.5,99.39,6200000],
27
["2004-02-03",99,100,98.95,100,5604300],
28
["2004-02-04",99.38,100.43,99.3,100.19,8387500],
29
["2004-02-05",100,100.09,98.26,98.86,5975000],
30
["2004-02-06",98.85,99.24,98.25,98.94,5516900],
31
["2004-02-09",99.31,99.44,98.6,98.95,3742400],
32
["2004-02-10",98.45,99.97,98.41,99.61,4057500],
33
["2004-02-11",99.2,100.31,98.8,99.96,5505700],
34
["2004-02-12",100.06,100.3,99.3,99.3,3611500],
35
["2004-02-13",99.1,100.09,99.08,99.71,3562400],
36
["2004-02-17",99.99,100,99.32,99.37,3930400],
37
["2004-02-18",99.31,99.77,98.15,98.42,4830300],
38
["2004-02-19",98.42,99.23,97.52,97.8,5447200],
39
["2004-02-20",98.6,98.6,97.19,97.31,5690200],
40
["2004-02-23",97.4,97.51,95.46,95.96,6629100],
41
["2004-02-24",95.2,97.46,95.2,96.79,7008300],
42
["2004-02-25",96.5,97.09,96.23,96.54,3362500],
43
["2004-02-26",96.27,97.26,96.25,96.79,3965700],
44
["2004-02-27",96.8,97.38,96.1,96.5,4715000],
45
["2004-03-01",96.5,97.25,96.15,97.04,4454000],
46
["2004-03-02",97.6,97.6,96.62,96.82,4976200],
47
["2004-03-03",96.57,96.89,95.6,96.84,4806500],
48
["2004-03-04",96.58,96.92,96.13,96.39,3547900],
49
["2004-03-05",95.95,96.98,95.56,96.45,3970900],
50
["2004-03-08",96.49,96.88,94.59,94.59,5084200],
51
["2004-03-09",94.3,95.28,93.77,94.53,6390600],
52
["2004-03-10",94.38,94.74,92.68,93.06,6536300],
53
["2004-03-11",92,92.98,91.15,91.21,8560800],
54
["2004-03-12",92,93.38,91.68,93.3,6290600],
55
["2004-03-15",92.6,92.69,90.88,91.82,6523000],
56
["2004-03-16",92.4,92.7,91.42,92.45,4627600],
57
["2004-03-17",92.57,93.79,92.45,93.39,4663000],
58
["2004-03-18",93.05,93.18,91.9,92.85,4605200],
59
["2004-03-19",92.86,92.97,91.51,91.62,7058700],
60
["2004-03-22",91.27,91.48,90.28,91.02,6223500],
61
["2004-03-23",91.6,92.16,90.68,91.32,5065300],
62
["2004-03-24",91.57,92.49,91.04,91.77,6210400],
63
["2004-03-25",92.15,92.63,91.45,92.39,5585800],
64
["2004-03-26",92.39,93.25,92.16,92.77,4397700],
65
["2004-03-29",92.99,93.61,92.18,92.68,4876300],
66
["2004-03-30",92.67,92.67,91.35,92.32,5415700],
67
["2004-03-31",92.07,92.24,91.51,91.84,4613500],
68
["2004-04-01",91.67,92.68,91.62,92.37,4246900],
69
["2004-04-02",93.55,94.55,93.33,94.2,5894500],
70
["2004-04-05",93.95,94.37,93.51,94.18,3936000],
71
["2004-04-06",93.6,93.79,93.02,93.7,3860100],
72
["2004-04-07",93.37,93.58,92.51,93.08,4537300],
73
["2004-04-08",94,94.39,92.55,93.12,3868000],
74
["2004-04-12",93.5,94.36,93.4,93.74,3112600],
75
["2004-04-13",93.79,94.04,92.5,93.04,5013600],
76
["2004-04-14",92.1,93.86,92.1,93.7,5316300],
77
["2004-04-15",93.8,94.09,93.06,93.45,6844200],
78
["2004-04-16",92.3,92.35,91.04,92.28,11118000],
79
["2004-04-19",91.9,92.3,91.7,91.94,4159400],
80
["2004-04-20",92,92.48,90.65,90.65,4260200],
81
["2004-04-21",91.15,91.42,90.69,91.26,4623400],
82
["2004-04-22",90.5,91.51,89.7,90.74,7988000],
83
["2004-04-23",91,91.61,90.36,91.28,5063200],
84
["2004-04-26",90.75,91.56,90.35,90.43,4533600],
85
["2004-04-27",90.65,91.99,90.56,91.11,4768000],
86
["2004-04-28",90.3,90.98,90.21,90.41,4706000],
87
["2004-04-29",90.01,90.26,88.19,89.08,7763200],
88
["2004-04-30",89.01,89.2,88.01,88.17,5019500],
89
["2004-05-03",88.13,88.52,87.2,88.02,6070100],
90
["2004-05-04",88.02,89.74,88,89,5451800],
91
["2004-05-05",89.75,89.75,88.51,88.96,4402300],
92
["2004-05-06",88.1,89.1,87.59,88.36,4319100],
93
["2004-05-07",87.75,89.4,87.62,88.19,5407400],
94
["2004-05-10",87.6,88.1,86.37,86.88,6692400],
95
["2004-05-11",87.2,88.15,86.82,87.13,6575000],
96
["2004-05-12",87.25,87.25,85.12,86.81,8445800],
97
["2004-05-13",86.79,87.41,86.26,87.19,4708400],
98
["2004-05-14",86.65,87.35,86.07,86.41,5197800],
99
["2004-05-17",85.3,86.03,85.15,85.53,5700000],
100
["2004-05-18",86.08,86.49,86,86.06,4401100],
101
["2004-05-19",87.4,88.88,86.5,87.05,7431800],
102
["2004-05-20",87.06,87.95,87.05,87.42,4031500],
103
["2004-05-21",87.59,88.18,86.91,87.13,5130000],
104
["2004-05-24",87.75,87.84,86.55,87.1,3778100],
105
["2004-05-25",86.75,88.92,86.55,88.7,5358100],
106
["2004-05-26",88.64,88.85,88.04,88.35,4308200],
107
["2004-05-27",88.75,89.08,87.98,88.59,4094600],
108
["2004-05-28",88.48,88.85,88.25,88.59,3203800],
109
["2004-06-01",88,88.48,87.3,88.12,4884300],
110
["2004-06-02",88.64,88.64,87.89,87.98,3912600],
111
["2004-06-03",87.85,88.1,87.35,87.35,3011500],
112
["2004-06-04",87.95,88.49,87.5,87.56,3803400],
113
["2004-06-07",88.75,88.99,88.01,88.64,4264500],
114
["2004-06-08",88.64,90.5,88.4,90.04,5400300],
115
["2004-06-09",89.9,90.55,89.81,90.09,5233400],
116
["2004-06-10",90.23,90.75,89.89,90.46,3468700],
117
["2004-06-14",90.05,90.58,89.62,90.07,4121400],
118
["2004-06-15",90.49,91.21,90.23,90.54,4508300],
119
["2004-06-16",90.25,90.93,90.09,90.38,3145700],
120
["2004-06-17",90.5,90.56,90.07,90.44,4180200],
121
["2004-06-18",90.2,90.8,89.9,90.06,6470800],
122
["2004-06-21",90.4,90.43,89.31,89.49,3843400],
123
["2004-06-22",89.28,90.24,89.13,90.02,4149300],
124
["2004-06-23",90.1,90.84,89.84,90.79,4354700],
125
["2004-06-24",90.28,90.92,89.84,89.99,4069400],
126
["2004-06-25",89.95,90.23,88.94,89.55,5604700],
127
["2004-06-28",89.71,89.9,88.36,88.71,4423200],
128
["2004-06-29",88.35,88.49,87.9,88.29,4394800],
129
["2004-06-30",88.3,88.5,87.7,88.15,4724000]
130
]);
131
132
// map loaded data
133
var mapping = dataTable.mapAs({'value': 2});
134
var ohlcMapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close':4});
135
var columnMapping = dataTable.mapAs({'value': 3});
136
137
// create stock chart
138
var chart = anychart.stock();
139
140
// create first plot on the chart with column series
141
var firstPlot = chart.plot(0);
142
var firstSeries = firstPlot.column(mapping);
143
firstSeries.name("High rate");
144
145
// create second plot on the chart
146
var secondPlot = chart.plot(1);
147
148
// turn on second plot grids
149
secondPlot.grid().enabled(true);
150
secondPlot.grid(1).enabled(true).layout('vertical');
151
152
// create ohlc series on the second plot
153
var secondSeries = secondPlot.ohlc(ohlcMapping);
154
secondSeries.name("ACME Corp. Stock Prices");
155
156
var item = secondSeries.legendItem();
157
item.text('ACME Corp. Stock Prices');
158
159
// set width for columns in percent
160
secondSeries.pointWidth('50%');
161
secondSeries.name("ACME Corp. Stock Prices");
162
163
// create third plot
164
var thirdPlot = chart.plot(2);
165
166
// turn on third plot grids and minor grids
167
thirdPlot.grid().enabled(true);
168
thirdPlot.grid(1).enabled(true).layout('vertical');
169
thirdPlot.minorGrid().enabled(true);
170
thirdPlot.minorGrid(1).enabled(true).layout('vertical');
171
172
// create column series on the third plot
173
var thirdSeries = thirdPlot.column(columnMapping);
174
thirdSeries.name("Low rate");
175
176
//set gradient fill for the series
177
thirdSeries.fill("#ef6c00");
178
179
// set container id for the chart
180
chart.container('container');
181
182
// initiate chart drawing
183
chart.draw();
184
});