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
// set stage
4
var stage = anychart.graphics.create("container");
5
6
// create variable for custom theme
7
var customTheme = {
8
"defaultFontSettings": {
9
"fontSize": 9
10
},
11
"chart": {
12
"title": false,
13
"legend": false
14
}
15
};
16
17
// apply custom theme
18
anychart.theme(customTheme);
19
20
// set data
21
var data_1 = anychart.data.set([
22
["Green" , 10000, 30],
23
["Red" , 15000, 80],
24
["Herbal" , 16000, 50],
25
["Black" , 19000, 35],
26
["Berry" , 9000, 49]
27
]);
28
29
// set data
30
var seriesData_1 = data_1.mapAs({x: 0, value: 1});
31
var seriesData_2 = data_1.mapAs({x: 0, value: 2});
32
33
// set chart_1
34
var chart_1 = anychart.column();
35
36
chart_1.column(seriesData_1);
37
38
//create scale for line series and extraYAxis
39
//it force line series to not stuck values with over series
40
var scale = anychart.scales.linear();
41
scale.minimum(0);
42
scale.maximum(100);
43
44
//create line series and set scale for it
45
var lineSeries = chart_1.spline(seriesData_2);
46
lineSeries.yScale(scale);
47
48
//create extra axis on the right side of chart
49
var extraYAxis = chart_1.yAxis(1);
50
extraYAxis.title("Customers under 20 years old");
51
extraYAxis.orientation("right");
52
extraYAxis.scale(scale);
53
extraYAxis.labels().format("{%value}%");
54
55
// axis name
56
var yAxis_1 = chart_1.yAxis();
57
yAxis_1.title("Sales (.oz)");
58
59
// set chart title
60
chart_1.title("Popular Tea Types in the Tea House");
61
62
// chart size and position
63
chart_1.bounds(0, 0, 420, 600);
64
65
// draw
66
chart_1.container(stage);
67
chart_1.draw();
68
69
//chart 2
70
71
// set data
72
var data_2 = [
73
["Chocolate" , 3120],
74
["Cookies" , 5054],
75
["Marshmallows" , 10220],
76
["Sweets" , 2340],
77
["Macaroons" , 3421]
78
];
79
80
// set chart_2
81
var chart_2 = anychart.pie(data_2);
82
chart_2.innerRadius("30%");
83
84
var labels_2 = chart_2.labels();
85
labels_2.fontColor("White");
86
chart_2.title("Confectionery sold in Tea House");
87
88
// chart size and position
89
chart_2.bounds(420, 0, 245, 300);
90
91
// draw
92
chart_2.container(stage);
93
chart_2.draw();
94
95
//chart 3
96
97
// set data
98
var data_3 = [
99
["9.00 - 12.00", 9000],
100
["12.00 - 14.00", 12000],
101
["14.00 - 16.00", 13000],
102
["16.00 - 18.00", 15400],
103
["18.00 - 21.00", 9500]
104
];
105
106
// set chart_2
107
var chart_3 = anychart.bar(data_3);
108
chart_3.title("Popular hours");
109
110
// chart size and position
111
chart_3.bounds(420, 300, 245, 300);
112
113
// draw
114
chart_3.container(stage);
115
chart_3.draw();
116
});