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