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
children: [
48
{
49
id: "2_1",
50
name: "Planning",
51
actualStart: "2018-02-15",
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
chart = anychart.ganttProject();
68
69
// set the data
70
chart.data(treeData);
71
72
// access data grid buttons
73
var buttons = chart.dataGrid().buttons();
74
75
// disable the default settings of data grid buttons
76
buttons.background().fill(null);
77
buttons.background().stroke(null);
78
79
// a function for drawing custom content for buttons
80
var drawingFunction = function () {
81
var half = this.width / 2;
82
switch (this.state) {
83
case "normal":
84
var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);
85
shape.fill("#ef6c00");
86
break;
87
case "hovered":
88
var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);
89
shape.fill(anychart.color.lighten("#ef6c00"));
90
break;
91
case "selected":
92
var shape = anychart.graphics.vector.primitives.hLine(this.path.clear(), half, half, half);
93
shape.fill("#64b5f6");
94
break;
95
}
96
}
97
98
// set the content of data grid buttons in different states
99
buttons.normal().content(drawingFunction);
100
buttons.hovered().content(drawingFunction);
101
buttons.selected().content(drawingFunction);
102
103
// configure the scale
104
chart.getTimeline().scale().maximum("2018-03-27");
105
106
// set the container id
107
chart.container("container");
108
109
// initiate drawing the chart
110
chart.draw();
111
112
// fit elements to the width of the timeline
113
chart.fitAll();
114
});