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: "Parent Task",
8
actualStart: "2018-01-15",
9
actualEnd: "2018-03-10",
10
children: [
11
{
12
id: "1_1",
13
name: "Task",
14
actualStart: "2018-01-15",
15
actualEnd: "2018-01-25"
16
},
17
{
18
id: "1_2",
19
name: "Task",
20
actualStart: "2018-01-20",
21
actualEnd: "2018-02-04"
22
},
23
{
24
id: "1_3",
25
name: "Milestone",
26
actualStart: "2018-02-05",
27
actualEnd: "2018-02-05"
28
},
29
{
30
id: "1_4",
31
name: "Parent Task",
32
actualStart: "2018-02-05",
33
actualEnd: "2018-02-24",
34
children: [
35
{
36
id: "1_4_1",
37
name: "Task",
38
actualStart: "2018-02-05",
39
actualEnd: "2018-02-10"
40
},
41
{
42
id: "1_4_2",
43
name: "Task",
44
actualStart: "2018-02-11",
45
actualEnd: "2018-02-24"
46
}
47
]},
48
{
49
id: "2",
50
name: "Task",
51
actualStart: "2018-02-05",
52
actualEnd: "2018-03-10",
53
}
54
]}
55
];
56
57
// create a data tree
58
var treeData = anychart.data.tree(data, "as-tree");
59
60
// create a chart
61
var chart = anychart.ganttProject();
62
63
// set the data
64
chart.data(treeData);
65
66
// set the indent for nested labels in the second column
67
chart.dataGrid().column(1).depthPaddingMultiplier(60);
68
69
// configure the scale
70
chart.getTimeline().scale().maximum("2018-03-15");
71
72
// set the container id
73
chart.container("container");
74
75
// initiate drawing the chart
76
chart.draw();
77
78
// fit elements to the width of the timeline
79
chart.fitAll();
80
});