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
anychart.format.outputDateTimeFormat('yyyy MMM d');
4
5
var data = getData();
6
var chart = anychart.timeline();
7
data.periods.forEach(function (period) {
8
var series = chart.range([
9
[period.title, period.start, period.end]
10
]);
11
});
12
13
var actionsDataSet = anychart.data.set(data.actions);
14
var actionsMapping = actionsDataSet.mapAs({
15
"x": "date",
16
"value": "title"
17
});
18
19
var actionsSeries = chart.moment(actionsMapping);
20
actionsSeries.tooltip()
21
.titleFormat('{%title} - {%date}').format('{%description}');
22
23
var eventsDataSet = anychart.data.set(data.events);
24
var eventsMapping = eventsDataSet.mapAs({
25
"x": "date",
26
"value": "title"
27
});
28
29
var eventsSeries = chart.moment(eventsMapping);
30
eventsSeries.color('#800080')
31
eventsSeries.labels()
32
.background({fill: '#800080 0.2', stroke: '#800080 0.5'});
33
eventsSeries.tooltip()
34
.titleFormat('{%title} - {%date}').format('{%description}');
35
36
chart.scroller().enabled(true);
37
chart.container('container').draw();
38
});
39
40
function getData() {
41
return {
42
"actions": [
43
{
44
"description": "Making a plan of the future product",
45
"title": "Initial plan",
46
"date": "2019/01/02"
47
},
48
{
49
"description": "Adding the features that appeared to be important",
50
"title": "New features",
51
"date": "2019/03/02"
52
},
53
{
54
"description": "The first stage of testing",
55
"title": "Test 1",
56
"date": "2019/04/02"
57
},
58
{
59
"description": "The second stage of testing",
60
"title": "Test 2",
61
"date": "2019/04/05"
62
},
63
{
64
"description": "The third stage of testing",
65
"title": "Test 3",
66
"date": "2019/04/15"
67
}
68
],
69
"periods": [
70
{
71
"description": "",
72
"title": "Research",
73
"start": "2019/01/01",
74
"end": "2019/02/01"
75
},
76
{
77
"description": "",
78
"title": "Development",
79
"start": "2019/02/01",
80
"end": "2019/04/02"
81
},
82
{
83
"description": "",
84
"title": "Testing",
85
"start": "2019/04/02",
86
"end": "2019/05/20"
87
},
88
{
89
"description": "",
90
"title": "Implementation",
91
"start": "2019/05/20",
92
"end": "2019/06/30"
93
}
94
],
95
"events": [
96
{
97
"description": "Hiring a new dev team",
98
"title": "New employees",
99
"date": "2019/01/02"
100
},
101
{
102
"description": "Reorganizing the work process, making redundancies",
103
"title": "Сompany restructuring",
104
"date": "2019/05/22"
105
},
106
]
107
}
108
};