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
// creating the data
3
table = anychart.data.table();
4
table.addData([
5
['2015-12-24', 511.53, 514.98, 505.79, 506.40],
6
['2015-12-25', 512.53, 514.88, 505.69, 507.34],
7
['2015-12-26', 511.83, 514.98, 505.59, 506.23],
8
['2015-12-27', 511.22, 515.30, 505.49, 506.47],
9
['2015-12-28', 510.35, 515.72, 505.23, 505.80],
10
['2015-12-29', 510.53, 515.86, 505.38, 508.25],
11
['2015-12-30', 511.43, 515.98, 505.66, 507.45],
12
['2015-12-31', 511.50, 515.33, 505.99, 507.98],
13
['2016-01-01', 511.32, 514.29, 505.99, 506.37],
14
['2016-01-02', 511.70, 514.87, 506.18, 506.75],
15
['2016-01-03', 512.30, 514.78, 505.87, 508.67],
16
['2016-01-04', 512.50, 514.77, 505.83, 508.35],
17
['2016-01-05', 511.53, 516.18, 505.91, 509.42],
18
['2016-01-06', 511.13, 516.01, 506.00, 509.26],
19
['2016-01-07', 510.93, 516.07, 506.00, 510.99],
20
['2016-01-08', 510.88, 515.93, 505.22, 509.95],
21
['2016-01-09', 509.12, 515.97, 505.15, 510.12],
22
['2016-01-10', 508.53, 516.13, 505.66, 510.42],
23
['2016-01-11', 508.90, 516.24, 505.73, 510.40]
24
]);
25
26
// mapping the data
27
mapping = table.mapAs({open: 1, high: 2, low: 3, close: 4, value: 4});
28
29
// create stock type
30
var chart = anychart.stock();
31
32
// setting the series
33
chart.plot(0).ohlc(mapping).name("ACME Corp.");
34
chart.plot(1).line(mapping).name("ACME Corp.");
35
36
// dashed horizontal grid
37
chart.plot(0).yGrid().enabled(true);
38
chart.plot(0).yGrid().stroke({dash: "3 5"});
39
40
// vertical minor grid bound to x scale
41
chart.plot(0).xMinorGrid().enabled(true);
42
chart.plot(0).xMinorGrid().stroke({dash: "3 5"});
43
44
// minor grid with interlace set
45
chart.plot(1).yMinorGrid().palette(["LightGrey", null]);
46
47
// remove unnecessary elements
48
chart.plot(0).legend(false);
49
chart.plot(0).xAxis().labels(false);
50
chart.plot(0).xAxis().minorLabels(false);
51
chart.plot(1).legend(false);
52
53
// setting the chart title
54
chart.title('Stock Demo\nChanging the grids');
55
56
chart.container('container');
57
chart.draw();
58
});