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
var data = getData();
3
4
var chart = anychart.ganttProject();
5
chart.data(data, 'as-table');
6
chart.defaultRowHeight(50);
7
8
var timeline = chart.getTimeline();
9
10
var elements = timeline.elements();
11
12
var edit = elements.edit();
13
edit.enabled(true);
14
15
var start = edit.start();
16
17
// Get thumb.
18
var thumb = start.thumb();
19
20
thumb.fill('#00cd00');
21
22
chart.title('Get and modify left thumb. \n Hover on the timeline element to see the changed editing settings');
23
chart.container('container');
24
chart.draw();
25
chart.fitAll();
26
});
27
28
function getData() {
29
return [
30
{id: 1, name: 'Task 1', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},
31
{id: 2, name: 'Task 2', progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29'},
32
{id: 3, name: 'Task 3', progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4},
33
{id: 4, name: 'Task 4', progressValue: 0, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connectTo: 5},
34
{id: 5, name: 'Task 5', progressValue: 0, actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connectTo: 6},
35
{id: 6, name: 'Task 6', progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},
36
{id: 7, name: 'Task 7', progressValue: 0, actualStart: '2000-02-26T08:00', actualEnd: '2000-02-27', connectTo: 8}
37
];
38
}