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