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
// chart type
4
var chart = anychart.cartesian();
5
6
// chart title
7
chart.title("Multiple Series");
8
9
// adjust x scale type
10
var xScale = anychart.scales.dateTime();
11
chart.xScale(xScale);
12
13
xScale.minimum(Date.UTC(2007, 7, 27));
14
xScale.maximum(Date.UTC(2007, 8, 2));
15
var xTicks = xScale.ticks();
16
xTicks.interval(0,0,1);
17
18
// set first series data
19
var series_1 = chart.ohlc([
20
{x: Date.UTC(2007, 7, 28), open:511.53, high:514.98, low:505.79, close:506.40},
21
{x: Date.UTC(2007, 7, 30), open:517.36, high:518.40, low:516.58, close:516.80},
22
{x: Date.UTC(2007, 8, 1), open:513.10, high:516.50, low:511.47, close:515.25}
23
]);
24
series_1.xPointPosition(0.5);
25
series_1.meta("company", "ACME Corp.");
26
27
// set second series data
28
var series_2 = chart.ohlc([
29
{x: Date.UTC(2007, 7, 28), open: 522.95, high: 523.10, low: 522.50, close: 522.52},
30
{x: Date.UTC(2007, 7, 30), open: 524.49, high: 524.91, low: 524.38, close: 524.61},
31
{x: Date.UTC(2007, 8, 1), open: 518.81, high: 520.03, low: 517.51, close: 519.73}
32
]);
33
series_2.xPointPosition(0.5);
34
series_2.meta("company", "Duff B. Corp.");
35
36
// enable the labels
37
var labels_1 = series_1.labels();
38
var labels_2 = series_2.labels();
39
40
// text formatter
41
labels_1.format(function() {
42
return("C: "+this.series.meta("company")+"\nL: "+this.low+"\nH: "+this.high);
43
});
44
labels_2.format(function() {
45
return("C: "+this.series.meta("company")+"\nL: "+this.low+"\nH: "+this.high);
46
});
47
48
// labels positioning
49
labels_1.position("center-bottom");
50
labels_1.anchor("center-top");
51
labels_1.offsetY("5");
52
labels_1.enabled(true);
53
labels_2.position("center-top");
54
labels_2.anchor("center-bottom");
55
labels_2.offsetY("5");
56
labels_2.enabled(true);
57
58
// set axes title
59
var xAxis = chart.xAxis();
60
xAxis.title("Day");
61
var xLabels = chart.xAxis().labels();
62
xLabels.format(function(value){
63
var date = new Date(value["tickValue"]);
64
var options = {
65
month: "short",
66
day: "numeric"
67
};
68
return date.toLocaleDateString("en-US", options);
69
});
70
var yAxis = chart.yAxis();
71
yAxis.title("Price");
72
73
// draw
74
chart.container("container");
75
chart.draw();
76
});