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 = [
3
{id: 1, nameField: 'Parent', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},
4
{id: 2, nameField: 'Child 1', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29'},
5
{id: 3, nameField: 'Child 2', parent: 2, progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4, connectorType: 'finish-start'},
6
{id: 4, nameField: 'Child 3', parent: 2, progressValue: 0, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connectTo: 5, connectorType: 'finish-start'},
7
{id: 5, nameField: 'Child 4', parent: 2, progressValue: 0, actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connectTo: 6, connectorType: 'finish-start'},
8
{id: 6, nameField: 'Child 5', parent: 1, progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'}
9
];
10
11
var treeData = anychart.data.tree(data, 'as-table');
12
13
var mapping = treeData.mapAs({name: 'nameField'});
14
15
var parent = mapping.search('id', 1);
16
var child = {
17
id: 7,
18
nameField: 'Added Child',
19
progressValue: 0,
20
actualStart: '2000-02-26T08:00',
21
actualEnd: '2000-02-27',
22
isNew: true
23
};
24
25
// Add child by index.
26
parent.addChildAt(child, 0);
27
28
var chart = anychart.ganttProject();
29
30
var dataGrid = chart.dataGrid();
31
dataGrid.column(1).labelsOverrider(function (label, item) {
32
if (item.get('isNew'))
33
label.fontColor('#F44336');
34
});
35
36
chart.data(mapping);
37
chart.title('Add child by index');
38
chart.container('container');
39
chart.draw();
40
chart.fitAll();
41
});