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