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