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
dataSet = anychart.data.set([
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
//
16
seriesData1 = dataSet.mapAs({"x": [0], "value": [1]});
17
seriesData2 = dataSet.mapAs({"x": [0], "value": [2]});
18
seriesData3 = dataSet.mapAs({"x": [0], "value": [3]});
19
seriesData4 = dataSet.mapAs({"x": [0], "value": [4]});
20
seriesData5 = dataSet.mapAs({"x": [0], "value": [5]});
21
seriesData6 = dataSet.mapAs({"x": [0], "value": [6]});
22
seriesData7 = dataSet.mapAs({"x": [0], "value": [7]});
23
24
series1 = chart.line(seriesData1);
25
series2 = chart.line(seriesData2);
26
series3 = chart.line(seriesData3);
27
series4 = chart.line(seriesData4);
28
series5 = chart.line(seriesData5);
29
series6 = chart.line(seriesData6);
30
series7 = chart.line(seriesData7);
31
32
// add a title standalone object on the chart
33
title = anychart.standalones.title();
34
title.text("This is the title");
35
36
// chart padding
37
chart.padding().top(50);
38
39
// create a table and fill it in
40
table = anychart.standalones.table();
41
table.rowsCount(8);
42
table.colsCount(5);
43
table.zIndex(100000000);
44
table.bounds("65%", "20%", "30%", "60%");
45
table.fontSize(9);
46
table.contents([
47
["", "Winter", "Spring", "Summer", "Fall"],
48
["Store 1", 1.1, 1.6, 1.4, 1.9],
49
["Store 2", 1, 2, 1.9, 1.3],
50
["Store 3", 2, 1.5, 0.5, 1.1],
51
["Store 4", 1.8, 1.9, 0.9, 0.3],
52
["Store 5", 0.1, 0.2, 0.3, 0.4],
53
["Store 6", 0.5, 1.1, 1.8, 1.7],
54
["Store 7", 1.4, 1.4, 1.2, 0.9]
55
]);
56
57
// text align settings
58
table.hAlign("center");
59
table.vAlign("center");
60
61
// set chart width
62
chart.width("65%");
63
64
// put the table on a stage and draw it
65
table.container(stage);
66
table.draw();
67
68
// put the chart on a stage and draw it
69
chart.container(stage);
70
chart.draw();
71
72
// put the title object on a stage
73
title.container(stage);
74
title.draw();
75
});