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
['2014-01-02', 2011.08, 2022.37, 1999.77, 2006.6801, 1666780032],
7
['2014-01-05', 2020.78, 2047.36, 2020.78, 2047.36, 2362909952],
8
['2014-01-06', 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096],
9
['2014-01-07', 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936],
10
['2014-01-08', 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080],
11
['2014-01-09', 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936],
12
['2014-01-12', 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984],
13
['2014-01-13', 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096],
14
['2014-01-14', 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048],
15
['2014-01-15', 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888],
16
['2014-01-16', 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016],
17
['2014-01-20', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],
18
['2014-01-21', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],
19
['2014-01-22', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],
20
['2014-01-23', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],
21
['2014-01-26', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],
22
['2014-01-27', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],
23
['2014-01-28', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952],
24
['2014-01-29', 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000],
25
['2014-01-30', 2068.3601, 2078.8799, 2058.54, 2066.1499, 1931180032],
26
['2014-01-31', 2020.78, 2047.36, 2020.78, 2047.36, 2362909952],
27
['2014-02-01', 2044.55, 2061.54, 2039.63, 2057.3701, 2273220096],
28
['2014-02-02', 2056.75, 2078.0901, 2047.02, 2077.6799, 2294279936],
29
['2014-02-03', 2089.6001, 2100.25, 2078.05, 2100.25, 2683950080],
30
['2014-02-04', 2083.6399, 2113.3301, 2077.0901, 2086.9199, 2482759936],
31
['2014-02-05', 2093.54, 2112.52, 2085.1499, 2111.78, 2284009984],
32
['2014-02-06', 2113.1101, 2114.9099, 2080.29, 2096.4399, 2385700096],
33
['2014-02-07', 2104.29, 2111.73, 2094.3201, 2111.1299, 2099970048],
34
['2014-02-08', 2101.8601, 2121.6101, 2088.1001, 2109.0801, 2235589888],
35
['2014-02-09', 2126.1201, 2140.47, 2119.3501, 2140.46, 2614390016],
36
['2014-02-10', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],
37
['2014-02-11', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],
38
['2014-02-12', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],
39
['2014-02-13', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],
40
['2014-02-16', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],
41
['2014-02-17', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],
42
['2014-02-18', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952],
43
['2014-02-19', 2085.54, 2087.3301, 2041.0699, 2068.23, 2637760000],
44
['2014-02-20', 2149.03, 2149.8501, 2130.2, 2147.98, 2574190080],
45
['2014-02-21', 2139.3301, 2150.1101, 2120.2, 2142.45, 2421860096],
46
['2014-02-22', 2146.3201, 2152.1201, 2119.01, 2119.01, 2353370112],
47
['2014-02-23', 2124.76, 2138.4099, 2108.45, 2123.8701, 2253910016],
48
['2014-02-26', 2120.5601, 2153.8301, 2115.3401, 2153.8301, 1946050048],
49
['2014-02-27', 2148.05, 2152.75, 2116.04, 2116.04, 2151259904],
50
['2014-02-28', 2125.02, 2128, 2073.1499, 2077.3701, 2319549952]
51
]);
52
53
// map loaded data
54
var line_1_mapping = dataTable.mapAs({'value': 2});
55
var line_2_mapping = dataTable.mapAs({'value': 3});
56
var line_3_mapping = dataTable.mapAs({'value': 4});
57
58
// create stock chart
59
var chart = anychart.stock();
60
61
// create first plot on the chart with column series
62
var firstPlot = chart.plot(0);
63
var series_1 = firstPlot.line(line_1_mapping);
64
var series_2 = firstPlot.line(line_2_mapping);
65
var series_3 = firstPlot.line(line_3_mapping);
66
67
series_1.stroke("#558B2F");
68
series_2.stroke("#D84315");
69
series_3.stroke("#FF8F00");
70
71
series_1.name("High");
72
series_2.name("Low");
73
series_3.name("Close");
74
75
var legend = firstPlot.legend();
76
// enables legend
77
legend.enabled(true);
78
79
// turn the title on and set the position
80
legend.title(true);
81
legend.title().orientation('top').align('left');
82
//legend.align('center');
83
84
// format the title
85
legend.titleFormat(function(){
86
return "ACME Corp. Stock Prices"
87
});
88
89
//enable the titleSeparator
90
legend.titleSeparator(true);
91
// set legend position and items layout
92
firstPlot.legend().itemsLayout('horizontal');
93
firstPlot.legend().position('top');
94
95
// setting the space between the items
96
legend.itemsSpacing(10);
97
98
// enable the scroller
99
chart.scroller().enabled(true);
100
101
// adjust the scroller
102
chart.selectRange('2014-01-02','2014-02-03');
103
104
// set container id for the chart
105
chart.container('container');
106
107
// adjust the scroller axis
108
var labels = chart.scroller().xAxis().labels();
109
var minorLabels = chart.scroller().xAxis().minorLabels();
110
// create scroller series with mapped data
111
chart.scroller().column(line_3_mapping);
112
113
// initiate chart drawing
114
chart.draw();
115
});