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
// create data
4
var data = [
5
{id: "1", duration: 1, name: "Task A"},
6
{id: "2", duration: 3, name: "Task B"},
7
{id: "3", duration: 4, name: "Task C"},
8
{id: "4", duration: 1, name: "Task D"},
9
{id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
10
{id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
11
];
12
13
// create a chart
14
var chart = anychart.pert();
15
16
// milestones size
17
chart.milestones().size(50);
18
19
// set chart data
20
chart.data(data, "as-table");
21
22
// set the title of the chart
23
chart.title("PERT Chart");
24
25
// sets selection mode for single selection
26
chart.interactivity().selectionMode("single-select");
27
28
// pointsselect event
29
chart.listen("pointsselect", function(e){
30
for (var i = 0; i < e.selectedMilestones.length; i++){
31
if (e.selectedMilestones[i].isCritical === true) {
32
chart.title("This milestone belongs to the critical path");
33
}
34
else {
35
chart.title("This milestone does not belong to the critical path");
36
}
37
}
38
for (var i = 0; i < e.selectedTasks.length; i++){
39
if (e.selectedTasks[i].slack == 0) {
40
chart.title("This task belongs to the critical path");
41
}
42
else {
43
chart.title("This task does not belong to the critical path");
44
}
45
}
46
}
47
);
48
49
// set the container id for the chart
50
chart.container("container");
51
// initiate drawing the chart
52
chart.draw();
53
});