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, name: 'Planning', actualStart: '2108-02-06', actualEnd: '2108-02-15', connectTo: 2, connectorType: 'finish-start'},
4
{id: 2, name: 'Research', actualStart: '2108-02-16', actualEnd: '2108-02-20', connectTo: 3, connectorType: 'start-start'},
5
{id: 3, name: 'Design', actualStart: '2108-02-20', actualEnd: '2108-03-05', connectTo: 4, connectorType: 'finish-finish'},
6
{id: 4, name: 'Development', actualStart: '2108-02-28', actualEnd: '2108-03-15', connectTo: 5, connectorType: 'start-finish'},
7
{id: 5, name: 'Review', actualStart: '2108-03-15', actualEnd: '2108-03-20'}
8
];
9
10
var treeData = anychart.data.tree(data, 'as-table');
11
12
var chart = anychart.ganttProject();
13
chart.data(treeData);
14
chart.title('ConnectorClick type');
15
chart.edit(true);
16
17
// Set event type.
18
// Click a connector and change the title on the event.
19
chart.listen('connectorClick', function(e){
20
chart.title('The connector from ' + e.fromItem.get('name') + ' to ' + e.toItem.get('name') + ' has been clicked on');
21
});
22
23
chart.getTimeline().connectors().stroke('#008b00', 3);
24
chart.defaultRowHeight(45);
25
chart.getTimeline().labels({enabled: false});
26
chart.getTimeline().tooltip(false);
27
28
var dataGrid = chart.dataGrid();
29
dataGrid.column(0).width(10);
30
dataGrid.column(1).width(130);
31
32
chart.splitterPosition(150);
33
chart.container('container');
34
chart.draw();
35
chart.fitAll();
36
});