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
44
// create a data tree
45
var treeData = anychart.data.tree(data, "as-tree");
46
47
// create a chart
48
var chart = anychart.ganttProject();
49
50
// set the data
51
chart.data(treeData);
52
53
// configure the scale
54
chart.getTimeline().scale().maximum("2018-03-15");
55
56
// allow editing the chart
57
chart.edit(true);
58
59
// set the chart title
60
chart.title().useHtml(true);
61
chart.title("Events: Tree Data<br><br>");
62
chart.title().padding(10);
63
64
/* listen to the treeItemUpdate event
65
and update the chart title */
66
treeData.listen("treeItemUpdate", function (e) {
67
var itemName = e.item.get("name");
68
chart.title("Events: Tree Data<br><br>< " +
69
"<span style = 'color:#990000'>" +
70
itemName + ": </span> treeItemUpdate >");
71
});
72
73
/* listen to the treeItemMove event
74
and update the chart title */
75
treeData.listen("treeItemMove", function (e) {
76
var itemName = e.item.get("name");
77
chart.title("Events: Tree Data<br><br>< " +
78
"<span style = 'color:#990000'>" +
79
itemName + "</span>: treeItemMove >");
80
});
81
82
// set the container id
83
chart.container("container");
84
85
// initiate drawing the chart
86
chart.draw();
87
88
// fit elements to the width of the timeline
89
chart.fitAll();
90
});