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, 'as-table');
6
7
var timeLine = chart.getTimeline();
8
9
// Get header.
10
var header = timeLine.header();
11
12
header.level({fill: '#C8E6C9'});
13
14
chart.title('Get and modify header');
15
chart.container('container');
16
chart.draw();
17
chart.fitAll();
18
});
19
20
function getData() {
21
return [
22
{
23
id: 1,
24
name: 'Phase 1 - Strategic Plan',
25
progressValue: 0.14,
26
actualStart: '2000-02-24',
27
actualEnd: '2000-02-27'
28
},
29
{
30
id: 2,
31
name: 'Self-Assessment',
32
parent: 1,
33
progressValue: 0.25,
34
actualStart: '2000-02-24',
35
actualEnd: '2000-02-29'
36
},
37
{
38
id: 3,
39
name: 'Define business vision',
40
parent: 2,
41
progressValue: 0,
42
actualStart: '2000-02-24T24:00',
43
actualEnd: '2000-02-25T09:00',
44
connectTo: 4,
45
connectorType: 'finish-start'
46
},
47
{
48
id: 4,
49
name: 'Identify available skills, information and support',
50
parent: 2,
51
progressValue: 0,
52
actualStart: '2000-02-26T00:00',
53
actualEnd: '2000-02-26T09:00',
54
connectTo: 5,
55
connectorType: 'finish-start'
56
},
57
{
58
id: 5,
59
name: 'Decide whether to proceed',
60
parent: 2,
61
progressValue: 0,
62
actualStart: '2000-02-27',
63
actualEnd: '2000-02-28T08:00',
64
connectTo: 6,
65
connectorType: 'finish-start'
66
},
67
{
68
id: 6,
69
name: 'Define the Opportunity',
70
parent: 1,
71
progressValue: 0.27,
72
actualStart: '2000-02-28T08:00',
73
actualEnd: '2000-02-29'
74
},
75
{
76
id: 7,
77
name: 'Research the market and competition',
78
parent: 6,
79
progressValue: 0,
80
actualStart: '2000-02-26T08:00',
81
actualEnd: '2000-02-27'
82
}
83
];
84
}