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 a data set
4
var data = anychart.data.set([
5
[Date.UTC(2007, 07, 23), 23.55, 23.88, 23.38, 23.62],
6
[Date.UTC(2007, 07, 24), 22.65, 23.7, 22.65, 23.36],
7
[Date.UTC(2007, 07, 25), 22.75, 23.7, 22.69, 23.44],
8
[Date.UTC(2007, 07, 26), 23.2, 23.39, 22.87, 22.92],
9
[Date.UTC(2007, 07, 27), 23.98, 24.49, 23.47, 23.49],
10
[Date.UTC(2007, 07, 30), 23.55, 23.88, 23.38, 23.62],
11
[Date.UTC(2007, 07, 31), 23.88, 23.93, 23.24, 23.25],
12
[Date.UTC(2007, 08, 01), 23.17, 23.4, 22.85, 23.25],
13
[Date.UTC(2007, 08, 02), 22.65, 23.7, 22.65, 23.36],
14
[Date.UTC(2007, 08, 03), 23.2, 23.39, 22.87, 22.92],
15
[Date.UTC(2007, 08, 06), 23.03, 23.15, 22.44, 22.97],
16
[Date.UTC(2007, 08, 07), 22.75, 23.7, 22.69, 23.44]
17
]);
18
19
// create a chart
20
var chart = anychart.financial();
21
22
// set the interactivity mode
23
chart.interactivity("byX");
24
25
// map the data
26
var seriesData = data.mapAs({x: [0], open: [1], high: [2], low: [3], close: [4]});
27
28
// create an OHLC series and set the data
29
var series = chart.ohlc(seriesData);
30
31
// set the chart title
32
chart.title("OHLC Chart: Basic Sample");
33
34
// set the titles of the axes
35
var xAxis = chart.xAxis();
36
xAxis.title("Date");
37
var yAxis = chart.yAxis();
38
yAxis.title("Price, $");
39
40
// set the container id
41
chart.container("container");
42
43
// initiate drawing the chart
44
chart.draw();
45
});