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 text marker settings by index.
10
timeLine.textMarker(0, {value: '2000-02-27T00:00'});
11
timeLine.textMarker(1, {value: '2000-02-29T00:00', fontColor: '#F44336'});
12
13
chart.title('Set text marker settings by index');
14
chart.container('container');
15
chart.draw();
16
chart.fitAll();
17
});
18
19
function getData() {
20
return [
21
{
22
id: 1,
23
name: 'Phase 1 - Strategic Plan',
24
progressValue: 0.14,
25
actualStart: '2000-02-24',
26
actualEnd: '2000-02-27'
27
},
28
{
29
id: 2,
30
name: 'Self-Assessment',
31
parent: 1,
32
progressValue: 0.25,
33
actualStart: '2000-02-24',
34
actualEnd: '2000-02-29',
35
'baselineStart': '2000-02-27',
36
'baselineEnd': '2000-02-28T08:00'
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
}