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, "asTable");
7
8
chart.title("Set zoom to range");
9
chart.container("container");
10
chart.draw();
11
12
chart.xScale().minimum(Date.UTC(2000, 1, 2));
13
chart.xScale().maximum(Date.UTC(2000, 3, 6));
14
15
16
// Set zoom to range.
17
chart.zoomTo("week", 2, "firstDate");
18
});
19
function getData() {
20
return [
21
{
22
"id": "1",
23
"name": "Phase 1 - Strategic Plan",
24
"progressValue": "14%",
25
"actualStart": 951350400000,
26
"actualEnd": 951609600000
27
},
28
{
29
"id": "2",
30
"name": "Self-Assessment",
31
parent: "1",
32
"progressValue": "25%",
33
"actualStart": 951350400000,
34
"actualEnd": 952099200000
35
},
36
{
37
"id": "3",
38
"name": "Define business vision",
39
parent: "2",
40
"progressValue": "0%",
41
"actualStart": 951408000000,
42
"actualEnd": 951440400000,
43
"connectTo": "4",
44
"connectorType": "FinishStart"
45
},
46
{
47
"id": "4",
48
"name": "Identify available skills, information and support",
49
parent: "2",
50
"progressValue": "0%",
51
"actualStart": 951494400000,
52
"actualEnd": 951526800000,
53
"connectTo": "5",
54
"connectorType": "FinishStart"
55
},
56
{
57
"id": "5",
58
"name": "Decide whether to proceed",
59
parent: "2",
60
"progressValue": "0%",
61
"actualStart": 951609600000,
62
"actualEnd": 951696000000,
63
"connectTo": "6",
64
"connectorType": "FinishStart"
65
},
66
{
67
"id": "6",
68
"name": "Define the Opportunity",
69
parent: "1",
70
"progressValue": "27%",
71
"actualStart": 951696000000,
72
"actualEnd": 951782400000
73
},
74
{
75
"id": "7",
76
"name": "Research the market and competition",
77
parent: "6",
78
"progressValue": "0%",
79
"actualStart": 951523200000,
80
"actualEnd": 951609600000,
81
"connectTo": "8",
82
"connectorType": "FinishStart"
83
}
84
];
85
}