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
"id": "8",
68
"nameField": "Interview owners of similar businesses",
69
"progressValue": "60%",
70
"actualStart": 951868800000,
71
"actualEnd": 952473600000,
72
"connectTo": "9",
73
"connectorType": "FinishStart"
74
},
75
{
76
"id": "9",
77
"nameField": "Identify needed resources",
78
parent: "8",
79
"progressValue": "0%",
80
"actualStart": 952531200000,
81
"actualEnd": 952650000000,
82
"connectTo": "10",
83
"connectorType": "FinishStart"
84
}
85
];
86
87
var treeData = anychart.data.tree(data, "asTable");
88
89
var mapping = treeData.mapAs({"name": "nameField"});
90
91
// Remove child by index.
92
mapping.removeChildAt(1);
93
94
var chart = anychart.ganttProject();
95
chart.data(mapping);
96
chart.container("container");
97
chart.draw();
98
chart.fitAll();
99
});