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: "Root",
8
actualStart: "2018-01-15",
9
actualEnd: "2018-03-10",
10
actual: {},
11
employee: {firstName: null, lastName: null},
12
children: [
13
{
14
id: "1_1",
15
name: "Child 1",
16
actualStart: "2018-01-15",
17
actualEnd: "2018-01-25",
18
employee: {firstName: "John", lastName: "Doe"}
19
},
20
{
21
id: "1_2",
22
name: "Child 2",
23
actualStart: "2018-01-20",
24
actualEnd: "2018-02-04",
25
employee: {firstName: "Frank", lastName: "Foe"}
26
},
27
{
28
id: "1_3",
29
name: "Child 3",
30
actualStart: "2018-02-05",
31
actualEnd: "2018-02-05",
32
employee: {firstName: "Marta", lastName: "Moe"}
33
},
34
{
35
id: "1_4",
36
name: "Child 4",
37
actualStart: "2018-02-05",
38
actualEnd: "2018-02-24",
39
employee: {firstName: "John", lastName: "Doe"}
40
},
41
{
42
id: "1_5",
43
name: "Child 5",
44
actualStart: "2018-02-25",
45
actualEnd: "2018-03-10",
46
employee: {firstName: "Jane", lastName: "Poe"}
47
}
48
]}
49
];
50
51
// create a data tree
52
treeData = anychart.data.tree(data, "as-tree");
53
54
// create a gantt chart
55
chart = anychart.ganttProject();
56
57
// set the data
58
chart.data(treeData);
59
60
// configure the scale
61
chart.getTimeline().scale().maximum("2018-03-15");
62
63
// configure the data grid
64
65
var dataGrid = chart.dataGrid();
66
67
dataGrid.column(2).labels().format(function(e) {
68
return e.item.get("employee").firstName ? e.item.get("employee").firstName : '';
69
});
70
71
dataGrid.column(3).labels().format(function(e) {
72
return e.item.get("employee").lastName ? e.item.get("employee").lastName : '';
73
});
74
75
dataGrid.column(0).width(10);
76
dataGrid.column(1).width(80);
77
dataGrid.column(1).title("Task");
78
dataGrid.column(2).width(60);
79
dataGrid.column(2).title("First Name");
80
dataGrid.column(3).width(60);
81
dataGrid.column(3).title("Last Name");
82
83
// a comparison function
84
function comparisonFunction(fieldValue, comparisonValue) {
85
if (comparisonValue == fieldValue.firstName + fieldValue.lastName) {
86
return 0;
87
} else {
88
return 1;
89
}
90
}
91
92
// search for data items
93
var items = treeData.searchItems("employee", "JohnDoe", comparisonFunction);
94
95
/* get the names of the found items, add them to a string variable,
96
and set the fill colors of their nodes */
97
var text = "";
98
if (items.length == 0) {
99
text = "(none)";
100
} else {
101
for (var i = 0; i < items.length; i++) {
102
text += items[i].get("name") + ", ";
103
items[i].set("actual", {fill: "#dd2c00"});
104
}
105
text = text.substr(0, text.length - 2);
106
}
107
108
// set the chart title
109
chart.title().useHtml(true);
110
chart.title("Tree Data Model: searchItems()<br><br>" +
111
"firstName + lastName = John Doe: <span style = 'color:#990000'>" +
112
text + "</span>");
113
chart.title().padding(10);
114
115
// set the container id
116
chart.container("container");
117
118
// initiate drawing the chart
119
chart.draw();
120
121
// fit elements to the width of the timeline
122
chart.fitAll();
123
});