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
6
chart.data(data, 'as-table');
7
8
chart.container('container');
9
chart.draw();
10
11
chart.zoomTo(Date.UTC(2000, 1, 24), Date.UTC(2000, 1, 25));
12
13
var scale = chart.xScale();
14
15
// Get visible dates set.
16
var getRange = scale.getRange();
17
18
var rangeMin = anychart.format.dateTime(new Date(getRange.min), 'dd MMMM yyyy');
19
var rangeMax = anychart.format.dateTime(new Date(getRange.max), 'dd MMMM yyyy');
20
21
// Get total visible dates set.
22
var getTotalRange = scale.getTotalRange();
23
24
var totalMin = anychart.format.dateTime(new Date(getTotalRange.min), 'dd MMMM yyyy');
25
var totalMax = anychart.format.dateTime(new Date(getTotalRange.max), 'dd MMMM yyyy');
26
27
chart.title('Min visible dates is ' + rangeMin + '\n' + 'Max visible dates is ' + rangeMax
28
+ '\n' + 'Min total visible dates is ' + totalMin + '\n' + 'Max total visible dates is ' + totalMax);
29
});
30
31
function getData() {
32
return [
33
{id: 1, name: 'Phase 1 - Strategic Plan', progressValue: 0.14, actualStart: '2000-02-24', actualEnd: '2000-02-27'},
34
{id: 2, name: 'Self-Assessment', parent: 1, progressValue: 0.25, actualStart: '2000-02-24', actualEnd: '2000-02-29'},
35
{id: 3, name: 'Define business vision', parent: 2, progressValue: 0, actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4, connectorType: 'finish-start'},
36
{id: 4, 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'},
37
{id: 5, name: 'Decide whether to proceed',parent: 2,progressValue: 0,actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connectTo: 6,connectorType: 'finish-start'},
38
{id: 6, name: 'Define the Opportunity', parent: 1, progressValue: 0.27, actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},
39
{id: 7, name: 'Research the market and competition', parent: 6, progressValue: 0, actualStart: '2000-02-26T08:00', actualEnd: '2000-02-27', connectTo: 8, connectorType: 'finish-start'}
40
];
41
}