HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/samples/pert-charts/garage-construction-pert-chart/data.json
4
anychart.data.loadJsonFile(
5
'https://cdn.anychart.com/samples/pert-charts/garage-construction-pert-chart/data.json',
6
function (data) {
7
// set filling method for tree
8
var treeData = anychart.data.tree(data, 'as-table');
9
10
// create PERT chart
11
var chart = anychart.pert();
12
// set data
13
chart
14
.data(treeData)
15
// set spacing between milestones
16
.horizontalSpacing('13.37%')
17
// set padding for chart
18
.padding([25, 50, 0, 50]);
19
20
// get duration project
21
var duration = Math.round(
22
chart.getStat('pertChartProjectDuration')
23
);
24
// get deviation project
25
var deviation = Math.round(
26
chart.getStat('pertChartCriticalPathStandardDeviation')
27
);
28
29
// set title text
30
chart
31
.title()
32
.enabled(true)
33
.useHtml(true)
34
.padding([0, 0, 35, 0])
35
.text(
36
'Garage Construction PERT Chart' +
37
'<br>Project duration: ' +
38
duration +
39
'±' +
40
deviation +
41
' days'
42
);
43
44
// set settings for tasks
45
var tasks = chart.tasks();
46
tasks
47
.stroke('1.5 #93CBF9')
48
.dummyFill('#A0B1BA')
49
// set dummy settings for tasks
50
.dummyStroke('#60727B', 1.5, '10');
51
// format upper label tasks
52
tasks.upperLabels().format(function () {
53
return this.item.get('fullName');
54
});
55
56
// create tasks tooltip
57
var tasksTooltip = tasks.tooltip();
58
// tooltip settings
59
tasksTooltip.separator(true).titleFormat(function () {
60
// return fullName from data
61
return this.item.get('fullName');
62
});
63
64
// set settings for critical tasks
65
chart.criticalPath().tasks().stroke('1.5 #FF835C');
66
67
// english alphabet array
68
var alphabet = genCharArray('A', 'Z');
69
70
// set settings for milestones
71
var milestones = chart.milestones();
72
// set milestones item size
73
milestones.size('6.5%');
74
milestones.labels().format(function () {
75
if (this.creator) {
76
return alphabet[--this.index];
77
}
78
return this.isStart ? 'Start' : 'Finish';
79
});
80
milestones
81
.tooltip()
82
.titleFormat(function () {
83
return 'Milestone - ' + alphabet[--this.index];
84
})
85
.format(defaultMilestoneTooltipTextFormatter);
86
87
// set settings for critical milestones
88
var critMilestones = chart.criticalPath().milestones();
89
critMilestones.color('#F18126');
90
critMilestones.tooltip().titleFormat(function () {
91
if (this.creator) {
92
return 'Milestone - ' + alphabet[--this.index];
93
}
94
return this.isStart ? 'Milestone - Start' : 'Milestone - Finish';
95
});
96
97
// set container id for the chart
98
chart.container('container');
99
// initiate chart drawing
100
chart.draw();
101
}
102
);
103
});
104
105
function genCharArray(charA, charZ) {
106
var alphabetArr = [];
107
var i = charA.charCodeAt(0);
108
var j = charZ.charCodeAt(0);
109
for (; i <= j; ++i) {
110
alphabetArr.push(String.fromCharCode(i));
111
}
112
return alphabetArr;
113
}
114
115
function defaultMilestoneTooltipTextFormatter() {
116
var result = '';
117
var i = 0;
118
if (this.successors && this.successors.length) {
119
result += 'Successors:';
120
for (i = 0; i < this.successors.length; i++) {
121
result += '\n - ' + this.successors[i].get('fullName');
122
}
123
if (this.predecessors && this.predecessors.length) result += '\n\n';
124
}
125
if (this.predecessors && this.predecessors.length) {
126
result += 'Predecessors:';
127
for (i = 0; i < this.predecessors.length; i++) {
128
result += '\n - ' + this.predecessors[i].get('fullName');
129
}
130
}
131
return result;
132
}