HTMLcopy
1
<label id="titleLabel">Enable Live Edit For:</label>
2
<label for="dataGridCheckbox">Data Grid</label>
3
<input type="checkbox" id="dataGridCheckbox" onchange="editDataGrid()">
4
<label for="timelineCheckbox">Timeline</label>
5
<input type="checkbox" id="timelineCheckbox" onchange="editTimeline()">
6
<label for="milestonesCheckbox">Milestones</label>
7
<input type="checkbox" id="milestonesCheckbox" onchange="editMilestones()">
8
<div id="container"></div>
CSScopy
19
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#titleLabel {
12
font-weight: 600;
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
var 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().minimum("2018-01-12");
55
chart.getTimeline().scale().maximum("2018-03-13");
56
57
// disable timeline tooltips
58
chart.getTimeline().tooltip(false);
59
60
// disable labels of timeline elements
61
chart.getTimeline().elements().labels(false);
62
63
// set the container id
64
chart.container("container");
65
66
// initiate drawing the chart
67
chart.draw();
68
69
// fit elements to the width of the timeline
70
chart.fitAll();
71
});
72
73
// allow / forbid editing the data grid
74
function editDataGrid() {
75
if (document.getElementById("dataGridCheckbox").checked) {
76
chart.dataGrid().edit(true);
77
} else {
78
chart.dataGrid().edit(false);
79
}
80
}
81
82
// allow / forbid editing the timeline
83
function editTimeline() {
84
if (document.getElementById("timelineCheckbox").checked) {
85
chart.getTimeline().edit(true);
86
chart.getTimeline().milestones().edit(true);
87
document.getElementById("milestonesCheckbox").checked = true;
88
} else {
89
chart.getTimeline().edit(false);
90
chart.getTimeline().milestones().edit(false);
91
document.getElementById("milestonesCheckbox").checked = false;
92
93
}
94
}
95
96
// allow / forbid editing milestones
97
function editMilestones() {
98
if (document.getElementById("milestonesCheckbox").checked) {
99
chart.getTimeline().milestones().edit(true);
100
} else {
101
chart.getTimeline().milestones().edit(false);
102
}
103
}