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
74
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
// Sets connector type in data.
19
{
20
"id": "3",
21
"name": "Define business vision",
22
parent: "2",
23
"progressValue": "0%",
24
"actualStart": 951408000000,
25
"actualEnd": 951440400000,
26
"connectTo": "4",
27
"connectorType": anychart.enums.ConnectorType.START_START
28
},
29
{
30
"id": "4",
31
"name": "Identify available skills, information and support",
32
parent: "2",
33
"progressValue": "0%",
34
"actualStart": 951494400000,
35
"actualEnd": 951526800000,
36
"connectTo": "5",
37
"connectorType": "FinishStart"
38
},
39
{
40
"id": "5",
41
"name": "Decide whether to proceed",
42
parent: "2",
43
"progressValue": "0%",
44
"actualStart": 951609600000,
45
"actualEnd": 951696000000,
46
"connectTo": "6",
47
"connectorType": "FinishStart"
48
},
49
{
50
"id": "6",
51
"name": "Define the Opportunity",
52
parent: "1",
53
"progressValue": "27%",
54
"actualStart": 951696000000,
55
"actualEnd": 951782400000
56
},
57
{
58
"id": "7",
59
"name": "Research the market and competition",
60
parent: "6",
61
"progressValue": "0%",
62
"actualStart": 951523200000,
63
"actualEnd": 951609600000,
64
"connectTo": "8",
65
"connectorType": "FinishStart"
66
}
67
];
68
var treeData = anychart.data.tree(data, anychart.enums.TreeFillingMethod.AS_TABLE);
69
var chart = anychart.ganttProject();
70
chart.data(treeData);
71
chart.container("container");
72
chart.draw();
73
chart.fitAll();
74
});