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
var data = [
3
{
4
"id": "1",
5
"valueNum": 12,
6
"name": "Phase 1 - Strategic Plan",
7
"progressValue": "14%",
8
"actualStart": 951350400000,
9
"actualEnd": 951609600000
10
},
11
{
12
"id": "2",
13
"valueNum": 21,
14
"name": "Self-Assessment",
15
parent: "1",
16
"progressValue": "25%",
17
"actualStart": 951350400000,
18
"actualEnd": 951782400000
19
},
20
{
21
"id": "3",
22
"valueNum": 34,
23
"name": "Define business vision",
24
parent: "2",
25
"progressValue": "0%",
26
"actualStart": 951408000000,
27
"actualEnd": 951440400000,
28
"connectTo": "4",
29
"connectorType": "FinishStart"
30
},
31
{
32
"id": "4",
33
"valueNum": 55,
34
"name": "Identify available skills, information and support",
35
parent: "2",
36
"progressValue": "0%",
37
"actualStart": 951494400000,
38
"actualEnd": 951526800000,
39
"connectTo": "5",
40
"connectorType": "FinishStart"
41
},
42
{
43
"id": "5",
44
"valueNum": 73,
45
"name": "Decide whether to proceed",
46
parent: "2",
47
"progressValue": "0%",
48
"actualStart": 951609600000,
49
"actualEnd": 951696000000,
50
"connectTo": "6",
51
"connectorType": "FinishStart"
52
},
53
{
54
"id": "6",
55
"valueNum": 43,
56
"name": "Define the Opportunity",
57
parent: "1",
58
"progressValue": "27%",
59
"actualStart": 951696000000,
60
"actualEnd": 951782400000
61
},
62
{
63
"id": "7",
64
"valueNum": 64,
65
"name": "Research the market and competition",
66
parent: "6",
67
"progressValue": "0%",
68
"actualStart": 951523200000,
69
"actualEnd": 951609600000,
70
"connectTo": "8",
71
"connectorType": "FinishStart"
72
}
73
];
74
var treeData = anychart.data.tree(data, "asTable");
75
76
var mapping = treeData.mapAs({"value": "valueNum"});
77
78
// Get children of data tree.
79
var childrenList = mapping.getChildren();
80
var item = {};
81
for (var i = 0; i < childrenList.length; i++) {
82
item = childrenList[i];
83
item.set("name", item.get("name") + " (has " + item.numChildren() + " children)");
84
}
85
86
var chart = anychart.ganttProject();
87
chart.data(mapping);
88
chart.container("container");
89
chart.draw();
90
chart.fitAll();
91
});