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
// create data tree on raw data
4
var treeData = anychart.data.tree(data, 'as-table');
5
6
// create resource gantt chart
7
chart = anychart.ganttResource();
8
9
chart.title('External events');
10
11
// set data for the chart
12
chart.data(treeData);
13
14
// set pixel position of the main splitter
15
chart.splitterPosition(120);
16
17
// getting chart's data grid
18
var dataGrid = chart.dataGrid();
19
20
// disabling default 0-column
21
dataGrid.column(0, false);
22
23
// set container id for the chart
24
chart.container('container');
25
26
27
// enable elements labels
28
chart.getTimeline().elements().labels(true);
29
30
// enable labels crop
31
chart.getTimeline().cropLabels(true);
32
33
// widen scale a bit
34
chart.xScale().minimum(Date.UTC(2014, 3, 1))
35
chart.xScale().maximum(Date.UTC(2014, 4, 1))
36
37
// initiate chart drawing
38
chart.draw();
39
40
// zoom chart all dates range
41
chart.fitAll();
42
});
43
44
function getData() {
45
return [{
46
"id": 0,
47
"name": "Dev Team"
48
}, {
49
"id": 1,
50
"name": "Mya Leilah",
51
"periods": [{
52
"id": 100,
53
"start": 1397088000000,
54
"end": 1397260800000,
55
"name": "Development task 1"
56
}, {
57
"id": 101,
58
"start": 1397347200000,
59
"name": "Meeting 2"
60
}, {
61
"id": 102,
62
"start": 1397692800000,
63
"end": 1397952000000,
64
"name": "Development task 2"
65
}, {
66
"id": 103,
67
"start": 1398038400000,
68
"name": "Meeting 3"
69
}],
70
"parent": 0
71
}, {
72
"id": 2,
73
"name": "Henry Lavina",
74
"periods": [{
75
"id": 104,
76
"start": 1397088000000,
77
"end": 1397174400000,
78
"name": "Development task 3"
79
}, {
80
"id": 108,
81
"start": 1397304000000,
82
"name": "Meeting 1"
83
}, {
84
"id": 105,
85
"start": 1397433600000,
86
"end": 1397692800000,
87
"name": "Development task 4"
88
}, {
89
"id": 106,
90
"start": 1397779200000,
91
"end": 1398211200000,
92
"name": "Development task 5"
93
}, {
94
"id": 107,
95
"start": 1398297600000,
96
"end": 1398384000000,
97
"name": "Development task 6"
98
}],
99
"parent": 0
100
}];
101
}