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: "A", optimistic: 1, pessimistic: 10, mostLikely: 6, name: "A"},
6
{id: "AB", optimistic: 2, pessimistic: 4, mostLikely: 3, name: "AB", dependsOn: ["A"]},
7
{id: "AC", optimistic: 3, pessimistic: 8, mostLikely: 6, name: "AC", dependsOn: ["A"]},
8
{id: "BD", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "BD", dependsOn: ["AB"]},
9
{id: "CE", optimistic: 2, pessimistic: 12, mostLikely: 6, name: "CE", dependsOn: ["AC"]},
10
{id: "CF", optimistic: 4, pessimistic: 18, mostLikely: 12, name: "CF", dependsOn: ["AC"]},
11
{id: "CG", optimistic: 3, pessimistic: 10, mostLikely: 5, name: "CG", dependsOn: ["AC"]},
12
{id: "DH", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "DH", dependsOn: ["BD"]},
13
{id: "EI", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "EI", dependsOn: ["CE"]},
14
{id: "FJ", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "FJ", dependsOn: ["CF"]},
15
{id: "GK", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "GK", dependsOn: ["CG"]},
16
{id: "HL", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "HL", dependsOn: ["DH"]},
17
{id: "HM", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "HM", dependsOn: ["DH"]},
18
{id: "JN", optimistic: 2, pessimistic: 12, mostLikely: 8, name: "JN", dependsOn: ["FJ"]},
19
{id: "KO", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "KO", dependsOn: ["GK"]},
20
{id: "LP", optimistic: 4, pessimistic: 16, mostLikely: 10, name: "LP", dependsOn: ["HL"]},
21
{id: "MP", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "MP", dependsOn: ["HM"]},
22
{id: "NQ", optimistic: 2, pessimistic: 12, mostLikely: 6, name: "NQ", dependsOn: ["JN"]},
23
{id: "OQ", optimistic: 2, pessimistic: 12, mostLikely: 7, name: "OQ", dependsOn: ["KO"]},
24
{id: "PR", optimistic: 2, pessimistic: 12, mostLikely: 4, name: "PR", dependsOn: ["LP", "MP"]},
25
{id: "QS", optimistic: 2, pessimistic: 12, mostLikely: 5, name: "QS", dependsOn: ["NQ", "OQ"]}
26
];
27
28
// create a chart
29
var chart = anychart.pert();
30
31
// set chart data
32
chart.data(data, "as-table");
33
34
chart.milestones().labels().fontSize(10);
35
chart.verticalSpacing(80);
36
chart.horizontalSpacing("13%");
37
chart.milestones().size(30);
38
39
chart.milestones().labels(false);
40
41
labels = chart.tasks().lowerLabels();
42
labels.format(function(e){
43
return "Slack: " + e.slack;
44
});
45
labels.fontColor("red").fontWeight("bold");
46
47
chart.criticalPath().tasks().lowerLabels().fontColor("#eee");
48
chart.criticalPath().tasks().stroke("#000", 2);
49
chart.criticalPath().tasks().fill("#000");
50
chart.criticalPath().milestones().stroke("#000", 2);
51
52
// set the container id for the chart
53
chart.container("container");
54
55
// initiate drawing the chart
56
chart.draw();
57
});