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 markers settings.
10
timeLine.markers({type: 'triangle-up', size: 10});
11
12
chart.title('Set markers settings');
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
'baselineStart': '2000-02-27',
35
'baselineEnd': '2000-02-28T08:00'
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
}