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', 2011.08, 2022.37, 1999.77, 2006.6801, 1666780032, 2000],
7
['2004-01-05', 2020.78, 2047.36, 2020.78, 2047.36, 2362909952, 1954],
8
['2004-01-06', 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096, 1956],
9
['2004-01-07', 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936, 1892],
10
['2004-01-08', 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080, 2013],
11
['2004-01-09', 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936, 2109],
12
['2004-01-12', 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984, 2146],
13
['2004-01-13', 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096, 2006],
14
['2004-01-14', 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048, 1793],
15
['2004-01-15', 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888, 1948],
16
['2004-01-16', 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016, 2094],
17
['2004-01-20', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080, 2176],
18
['2004-01-21', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096, 2012],
19
['2004-01-22', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112, 1954],
20
['2004-01-23', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016, 1832],
21
['2004-01-26', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048, 1623],
22
['2004-01-27', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904, 2105],
23
['2004-01-28', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952, 2195],
24
['2004-01-29', 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000, 2131],
25
['2004-01-30', 2068.3601, 2078.8799, 2058.54, 2066.1499, 1931180032, 2015]
26
]);
27
28
// map loaded data
29
var mapping = dataTable.mapAs({'value': 4});
30
var ohlcMapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close':4});
31
var lineMapping = dataTable.mapAs({'value': 5});
32
33
// create stock chart
34
var chart = anychart.stock();
35
chart.padding(0,70,10,50);
36
37
// create the plot on the chart with column series
38
var plot_line_ohlc = chart.plot(0);
39
var plot_column = chart.plot(1);
40
41
// Create and tune additional y scale
42
var extraYScale = anychart.scales.linear();
43
extraYScale.minimum(0);
44
extraYScale.maximum(3000000000);
45
var extraTicks = extraYScale.ticks();
46
extraTicks.interval(500000000);
47
48
// Create and tune additional y axis
49
var extraYAxis = plot_line_ohlc.yAxis(1);
50
extraYAxis.orientation("right");
51
extraYAxis.scale(extraYScale);
52
53
extraYAxis.labels().format(function() {
54
var value = this.value;
55
return value/1000000 + " mil";
56
});
57
58
// create the column series
59
var columnSeries = plot_column.column(mapping);
60
columnSeries.name("Highest rates");
61
62
// create ohlc series
63
var ohlcSeries = plot_line_ohlc.ohlc(ohlcMapping);
64
ohlcSeries.name("ACME Corp. Stock Prices");
65
66
// create line series
67
var lineSeries = plot_line_ohlc.line(lineMapping);
68
lineSeries.yScale(extraYScale);
69
lineSeries.name("Number of income requests worldwide");
70
71
72
// set container id for the chart
73
chart.container('container');
74
75
// initiate chart drawing
76
chart.draw();
77
});