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
3
// create data
4
var data = [
5
{
6
id: "1",
7
name: "Development",
8
baselineStart: "2018-01-12",
9
baselineEnd: "2018-03-04",
10
actualStart: "2018-01-15",
11
actualEnd: "2018-03-10",
12
children: [
13
{
14
id: "1_1",
15
name: "Analysis",
16
baselineStart: "2018-01-12",
17
baselineEnd: "2018-01-25",
18
actualStart: "2018-01-15",
19
actualEnd: "2018-01-25",
20
progressValue: "75%"
21
},
22
{
23
id: "1_2",
24
name: "Design",
25
baselineStart: "2018-01-20",
26
baselineEnd: "2018-01-31",
27
actualStart: "2018-01-20",
28
actualEnd: "2018-02-04",
29
progressValue: "80%",
30
connectTo: "1_4",
31
connectorType: "start-start"
32
},
33
{
34
id: "1_3",
35
name: "Meeting",
36
actualStart: "2018-02-05",
37
actualEnd: "2018-02-05"
38
},
39
{
40
id: "1_4",
41
name: "Implementation",
42
baselineStart: "2018-02-01",
43
baselineEnd: "2018-02-19",
44
actualStart: "2018-02-05",
45
actualEnd: "2018-02-24",
46
progressValue: "60%"
47
},
48
{
49
id: "1_5",
50
name: "Testing",
51
baselineStart: "2018-02-20",
52
baselineEnd: "2018-03-05",
53
actualStart: "2018-02-25",
54
actualEnd: "2018-03-10",
55
progressValue: "20%"
56
}
57
]}
58
];
59
60
// create a data tree
61
var treeData = anychart.data.tree(data, "as-tree");
62
63
// create a chart
64
var chart = anychart.ganttProject();
65
66
// set the data
67
chart.data(treeData);
68
69
// configure the scale
70
chart.getTimeline().scale().maximum("2018-03-13");
71
72
// set the row height
73
chart.defaultRowHeight(35);
74
75
// set the header height
76
chart.headerHeight(105);
77
78
// disable timeline tooltips
79
chart.getTimeline().tooltip(false);
80
81
// disable labels of timeline elements
82
chart.getTimeline().elements().labels(false);
83
84
// allow editing the chart
85
chart.edit(true);
86
87
// set the container id
88
chart.container("container");
89
90
// initiate drawing the chart
91
chart.draw();
92
93
// fit elements to the width of the timeline
94
chart.fitAll();
95
});