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