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 table
4
var dataTable = anychart.data.table();
5
6
// add data
7
dataTable.addData([
8
["2004-01-02", 2011.08, 2022.37, 1999.77, 2006.6801, 1666780032],
9
["2004-01-05", 2020.78, 2047.36, 2020.78, 2047.36, 2362909952],
10
["2004-01-06", 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096],
11
["2004-01-07", 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936],
12
["2004-01-08", 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080],
13
["2004-01-09", 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936],
14
["2004-01-12", 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984],
15
["2004-01-13", 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096],
16
["2004-01-14", 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048],
17
["2004-01-15", 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888],
18
["2004-01-16", 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016],
19
["2004-01-20", 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],
20
["2004-01-21", 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],
21
["2004-01-22", 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],
22
["2004-01-23", 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],
23
["2004-01-26", 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],
24
["2004-01-27", 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],
25
["2004-01-28", 2125.02, 2128, 2073.1499, 2077.3701, 2319549952],
26
["2004-01-29", 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000],
27
["2004-01-30", 2068.3601, 2078.8799, 2058.54, 2066.1499, 1931180032]
28
]);
29
30
// map the data
31
var mapping = dataTable.mapAs({"value": 2});
32
var ohlcMapping = dataTable.mapAs({"open": 1, "high": 2, "low": 3, "close": 4});
33
var columnMapping = dataTable.mapAs({"value": 3});
34
35
// create a stock chart
36
var chart = anychart.stock();
37
38
// create the first plot
39
var plot_1 = chart.plot(0);
40
41
// set the title of the first plot
42
plot_1.title("Rates");
43
44
// create the second plot
45
var plot_2 = chart.plot(1);
46
47
// enable the title of the second plot
48
plot_2.title().enabled(true);
49
// set the text of the title
50
plot_2.title().text("Prices");
51
// configure the font
52
plot_2.title().fontWeight(900);
53
54
// create the third plot with default settings
55
var plot_3 = chart.plot(2);
56
57
// create series on plots
58
plot_1.column(mapping).name("Highest rates");
59
plot_2.ohlc(ohlcMapping).name("ACME Corp. Stock Prices");
60
plot_3.column(columnMapping).name("Lowest rates");
61
62
// set the container id
63
chart.container("container");
64
65
// initiate drawing the chart
66
chart.draw();
67
});