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
var g = acgraph;
3
// create stage
4
var stage = g.create("container");
5
6
// set colors for sample
7
textColor = "#7C868E";
8
lineColor = "#CECECE";
9
chart_palette = anychart.palettes.distinctColors().colors(["#bC7C63", "#6594AD", "#585953"]);
10
11
// layer for the text elements
12
layer_text = stage.layer();
13
14
// legend on the chart
15
chartLegend = createLegend([
16
{index: 0, text: "Visits", iconFill: "#bC7C63"},
17
{index: 1, text: "Feeding", iconFill: "#6594AD"},
18
{index: 2, text: "Mating", iconFill: "#585953"}
19
]);
20
21
chartLegend.container(layer_text).draw();
22
23
// create main title
24
layer_text.text(20, 20, "Animals activitiy", {fontSize: 20});
25
// create subtitle
26
layer_text.text(20, 45, "Abies sibirica, 7 days observation period", {
27
fontSize: 18,
28
color: "#998552",
29
opacity: 20
30
});
31
32
// jay, woodpecker, squirrel, mouse
33
dataSet = [
34
["1", 4, 0, 0, 4, 4, 0, 3, 1, 1, 4, 10, 2],
35
["2", 2, 1, 0, 6, 5, 0, 2, 1, 0, 9, 11, 3],
36
["3", 2, 1, 0, 2, 1, 0, 4, 1, 1, 7, 8, 4],
37
["4", 2, 0, 0, 2, 2, 0, 4, 2, 0, 1, 12, 0],
38
["5", 3, 1, 1, 0, 0, 0, 1, 0, 0, 0, 10, 6],
39
["6", 1, 1, 0, 3, 2, 1, 0, 0, 0, 8, 10, 5],
40
["7", 2, 0, 1, 6, 3, 2, 2, 0, 1, 0, 7, 0]
41
];
42
43
// map all data as table into one series
44
series = anychart.data.mapAsTable(dataSet);
45
46
// settings for the block describing jay
47
jaySettings = {
48
// latin name of the animal
49
name: "Garrulus glandarius",
50
// position of the text
51
textX: 350,
52
textY: 175,
53
// the name of the picture of the animal in the folder with pictures
54
picture: "jay.jpg",
55
// the picture position
56
pictureY: 130,
57
// the path of the line connecting the picture with its part of the fur-tree
58
linePath: [[210, 190], [300, 130], [370, 130]],
59
// Y-position of the chart
60
chartY: 80,
61
// sets the data of this particular animal from the series
62
data: [series[0], series[1], series[2]],
63
// coordinates of the fur-tree piece where this animal lives
64
treePath: [[175, 120], [250, 240], [100, 240]],
65
// coordinates of the shadow of the fir-tree piece where this animal lives
66
shadowPath: [[175, 165], [250, 290], [100, 290]],
67
// the color of the fur-tree piece where this animal lives
68
treeColor: "#7CB342",
69
// makes this layer overlap others
70
zIndex: 10
71
};
72
// creates a
73
createSpecies(jaySettings);
74
75
// settings for the block describing woodpecker
76
woodpeckerSettings = {
77
name: "Dendrocopos analis",
78
textX: 350,
79
textY: 290,
80
picture: "woodpecker.jpg",
81
pictureY: 245,
82
linePath: [[250, 290], [300, 240], [370, 240]],
83
chartY: 195,
84
data: [series[3], series[4], series[5]],
85
treePath: [[175, 165], [280, 340], [70, 340]],
86
shadowPath: [[175, 240], [280, 395], [70, 395]],
87
treeColor: "#689F38",
88
zIndex: 8
89
};
90
91
createSpecies(woodpeckerSettings);
92
93
squirrelSettings = {
94
name: "Sciurus vulgaris",
95
textX: 360,
96
textY: 405,
97
picture: "sqirrel.jpg",
98
pictureY: 360,
99
linePath: [[260, 365], [370, 365]],
100
chartY: 310,
101
data: [series[6], series[7], series[8]],
102
treePath: [[175, 240], [310, 440], [40, 440]],
103
shadowPath: [[135, 400], [215, 400], [215, 520], [135, 520], [135, 400]],
104
treeColor: "#558B2F",
105
zIndex: 6
106
};
107
108
createSpecies(squirrelSettings);
109
110
mouseSettings = {
111
name: "Apodemus uralensis",
112
textX: 340,
113
textY: 520,
114
picture: "mouse.jpg",
115
pictureY: 475,
116
linePath: [[210, 465], [370, 465]],
117
chartY: 425,
118
data: [series[9], series[10], series[11]],
119
treePath: [[135, 400], [215, 400], [215, 520], [135, 520], [135, 400]],
120
shadowPath: [[135, 400], [215, 400], [215, 570], [135, 570], [135, 400]],
121
treeColor: "#6D4C41",
122
zIndex: 4
123
};
124
125
createSpecies(mouseSettings);
126
127
});
128
129
// an external function for creating legends
130
function createLegend(items) {
131
var legend = anychart.ui.legend();
132
legend.align("left");
133
legend.margin(75, 0, 20, 10);
134
legend.items(items);
135
return legend;
136
}
137
138
// creates everything connected to the animal
139
function createSpecies(e) {
140
var layer = stage.layer();
141
layer.text(e.textX, e.textY, e.name).color(textColor);
142
var pic = draw_picture(layer, 400, [e.pictureY, 40], lineColor, e.picture);
143
var pic_shadow = layer.circle(400, e.pictureY, 60);
144
pic_shadow.fill(["black 0.5", "black 0"], .5, .5, null, .5, 0.5, 0.5);
145
pic_shadow.zIndex(-2);
146
pic_shadow.stroke(null);
147
var line = draw_line(layer, e.linePath, lineColor, -1);
148
var line_shadow = draw_line(layer, e.linePath, textColor, -1);
149
line_shadow.visible(false);
150
draw_chart(layer, e.data, [460, e.chartY, 250, 100]);
151
var tree_piece = draw_tree(layer, e.treePath, e.treeColor, 1, false);
152
var tree_shadow = draw_tree(layer, e.shadowPath, "#212121", -1, true);
153
tree_shadow.visible(false);
154
tree_shadow.disablePointerEvents(true);
155
on_hover(tree_piece, tree_shadow, line, line_shadow, pic, pic_shadow);
156
layer.zIndex(e.zIndex);
157
}
158
159
// an external function for drawing a piece of tree
160
function draw_tree(layer, points, color, z_index, shadow) {
161
if (shadow) fill = [color + " 0.5", color + " 0.4", color + " 0"]
162
else fill = color;
163
var piece = layer.path().moveTo(points[0][0], points[0][1]).zIndex(z_index).fill(fill, 270).stroke(null);
164
for (var i = 0; i < points.length; i++) piece.lineTo(points[i][0], points[i][1]);
165
return piece;
166
}
167
168
// an external function switching the behaviour
169
function on_hover(piece, shadow, line, lineShadow, img, imgShadow) {
170
toggle(false);
171
piece.listen("mouseOver", function () {
172
toggle(true);
173
});
174
piece.listen("mouseOut", function () {
175
toggle(false);
176
});
177
line.listen("mouseOver", function () {
178
toggle(true);
179
});
180
line.listen("mouseOut", function () {
181
toggle(false);
182
});
183
img.listen("mouseOver", function () {
184
toggle(true);
185
});
186
img.listen("mouseOut", function () {
187
toggle(false);
188
});
189
// enables and disables all shadows when an element is hovered or unhovered
190
function toggle(e) {
191
shadow.visible(e);
192
lineShadow.visible(e);
193
imgShadow.visible(e);
194
}
195
}
196
197
// draws a chart with passed parameters of the particular animal
198
function draw_chart(container, data, bounds) {
199
var chart = anychart.line();
200
chart.palette(chart_palette);
201
202
setupSeries("Visits", data[0], chart);
203
setupSeries("Feeding", data[1], chart);
204
setupSeries("Mating", data[2], chart);
205
206
chart.bounds(bounds);
207
chart.yScale().ticks().interval(2);
208
chart.yAxis().drawFirstLabel(true);
209
chart.xAxis(false);
210
chart.tooltip().title(false);
211
chart.tooltip().separator(false);
212
chart.container(container).draw();
213
}
214
215
// creates series
216
function setupSeries(name, data, chart) {
217
var series = chart.line(data);
218
series.name(name);
219
series.clip(false);
220
}
221
222
// draws a line connecting picture of animal and the fur-tree part
223
function draw_line(layer, points, color, z_index) {
224
var line = layer.path().moveTo(points[0][0], points[0][1]).stroke(color).zIndex(z_index);
225
for (var i = 0; i < points.length; i++) {
226
line.lineTo(points[i][0], points[i][1]);
227
}
228
return line;
229
}
230
231
// draws a picture for an animal taken from the url
232
function draw_picture(layer, radius, coordinates, color, pic_name) {
233
layer.circle(radius, coordinates[0], coordinates[1])
234
.stroke(color)
235
.fill({
236
src: "https://static.anychart.com/images/graphics_stage_demo/" + pic_name,
237
mode: acgraph.vector.ImageFillMode.FILL
238
});
239
return layer;
240
}