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, valueNum: 12, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},
4
{id: 2, valueNum: 21, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29'},
5
{id: 3, valueNum: 34, name: 'Define business vision', parent: 2, progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4, connectorType: 'finish-start'},
6
{id: 4, valueNum: 55, name: 'Identify available skills, information and support', parent: 2, progressValue: 0, actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connectTo: 5, connectorType: 'finish-start'},
7
{id: 5, valueNum: 73, name: 'Decide whether to proceed', parent: 2, progressValue: 0, actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connectTo: 6, connectorType: 'finish-start'},
8
{id: 6, valueNum: 43, name: 'Define the Opportunity', parent: 1, progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},
9
{id: 7, valueNum: 64, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-02-26T08:00', actualEnd: '2000-02-27'}
10
];
11
12
var treeData = anychart.data.tree(data, 'as-table');
13
14
var mapping = treeData.mapAs({value: 'valueNum'});
15
16
// Get children of data tree.
17
var childrenList = mapping.getChildren();
18
19
var item = {};
20
for (var i = 0; i < childrenList.length; i++) {
21
item = childrenList[i];
22
item.set('name', item.get('name') + ' (has ' + item.numChildren() + ' children)');
23
}
24
25
var chart = anychart.ganttProject();
26
chart.data(mapping);
27
chart.title('Get and use children of data tree');
28
chart.container('container');
29
chart.draw();
30
chart.fitAll();
31
});