HTMLcopy
1
<button id="fitAll" onclick="fitAll()">Fit All</button>
2
<button id="fitTask" onclick="fitTask()">Fit Task</button>
3
<label for="idSelect">id: </label>
4
<select id="idSelect" onchange="updateNameLabel()">
5
<option value="1">1</option>
6
<option value="1_1">1_1</option>
7
<option value="1_2" selected>1_2</option>
8
<option value="1_3">1_3</option>
9
<option value="1_4">1_4</option>
10
<option value="1_5">1_5</option>
11
</select>
12
<label id="nameLabel">(Design)</label>
13
<div id="container"></div>
CSScopy
19
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
button {
8
margin: 10px 0 0 10px;
9
}
10
label {
11
display: inline-block;
12
margin: 10px 0 0 10px;
13
}
14
#container {
15
position: absolute;
16
width: 100%;
17
top: 40px;
18
bottom: 0;
19
}
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
treeData = anychart.data.tree(data, "as-tree");
46
47
// create a chart
48
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
// set the container id
57
chart.container("container");
58
59
// initiate drawing the chart
60
chart.draw();
61
});
62
63
// fit all elements to the width of the timeline
64
function fitAll() {
65
chart.fitAll();
66
}
67
68
// fit the given element to the width of the timeline
69
function fitTask() {
70
var id = document.getElementById("idSelect").value;
71
chart.fitToTask(id);
72
}
73
74
// update the text of the label
75
function updateNameLabel() {
76
var label = document.getElementById("nameLabel");
77
var id = document.getElementById("idSelect").value;
78
var item = treeData.search("id", id);
79
var itemName = item.get("name");
80
label.innerHTML = "(" + itemName + ")";
81
}