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