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
"name": "Phase 1 - Strategic Plan",
6
"progressValue": "14%",
7
"actualStart": 951350400000,
8
"actualEnd": 951609600000
9
},
10
{
11
"id": "2",
12
"name": "Self-Assessment",
13
parent: "1",
14
"progressValue": "25%",
15
"actualStart": 951350400000,
16
"actualEnd": 951782400000
17
},
18
{
19
"id": "3",
20
"name": "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
"name": "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
"name": "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
"name": "Define the Opportunity",
51
parent: "1",
52
"progressValue": "27%",
53
"actualStart": 951696000000,
54
"actualEnd": 951782400000
55
}
56
];
57
var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.AS_TABLE);
58
var traverser = treeData.getTraverser();
59
traverser.advance();
60
61
// Get current data item
62
var dataItem = traverser.current();
63
dataItem.set("name", "Current: " + dataItem.get("name"));
64
65
var chart = anychart.ganttProject();
66
67
chart.data(treeData);
68
chart.container("container");
69
chart.draw();
70
chart.fitAll();
71
});