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