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
chart.criticalPath({milestones: {fill: "#FF4040", selectFill: "#92000A"}});
42
43
duration = chart.getStat("pertChartProjectDuration");
44
45
// set the title of the chart
46
chart.title("The critical path duration for this project is " + duration + " units.");
47
48
// set the container id for the chart
49
chart.container("container");
50
51
// initiate drawing the chart
52
chart.draw();
53
});