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
// set the stage
3
stage = anychart.graphics.create("container", "100%", "100%");
4
5
// create a chart
6
var chart = anychart.line();
7
8
data = [
9
["Winter", 1.1, 1, 2, 1.8, 0.1, 0.5, 1.4],
10
["Spring", 1.6, 2, 1.5, 1.9, 0.2, 1.1, 1.4],
11
["Summer", 1.4, 1.9, 0.5, 0.9, 0.3, 1.8, 1.2],
12
["Fall", 1.9, 1.3, 1.1, 0.3, 0.4, 1.7, 0.9]
13
];
14
15
chart.data(data);
16
17
// add a title standalone object on the chart
18
title = anychart.standalones.title();
19
title.text("This is the title");
20
21
// chart padding
22
chart.padding().top(50);
23
24
// create a table and fill it in
25
table = anychart.standalones.table();
26
table.rowsCount(8);
27
table.colsCount(5);
28
table.zIndex(100000000);
29
table.bounds("65%", "35%", "30%", "60%");
30
table.fontSize(9);
31
table.contents([
32
["", "Winter", "Spring", "Summer", "Fall"],
33
["Store 1", 1.1, 1.6, 1.4, 1.9],
34
["Store 2", 1, 2, 1.9, 1.3],
35
["Store 3", 2, 1.5, 0.5, 1.1],
36
["Store 4", 1.8, 1.9, 0.9, 0.3],
37
["Store 5", 0.1, 0.2, 0.3, 0.4],
38
["Store 6", 0.5, 1.1, 1.8, 1.7],
39
["Store 7", 1.4, 1.4, 1.2, 0.9]
40
]);
41
42
// text align settings
43
table.hAlign("center");
44
table.vAlign("middle");
45
46
// set chart width
47
chart.width("65%");
48
49
// create a text block
50
label = anychart.standalones.label();
51
label.text("This is the label");
52
53
// put the table on a stage and draw it
54
label.container(stage);
55
label.draw();
56
57
// put the table on a stage and draw it
58
table.container(stage);
59
table.draw();
60
61
// put the chart on a stage and draw it
62
chart.container(stage);
63
chart.draw();
64
65
// put the title object on a stage
66
title.container(stage);
67
title.draw();
68
});