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
3
// create data
4
var data = [
5
{
6
id: "1",
7
name: "Development",
8
actualStart: "2018-01-15",
9
actualEnd: "2018-03-10",
10
children: [
11
{
12
id: "1_1",
13
name: "Analysis",
14
actualStart: "2018-01-15",
15
actualEnd: "2018-01-25",
16
progressValue: "75%"
17
},
18
{
19
id: "1_2",
20
name: "Design",
21
actualStart: "2018-01-20",
22
actualEnd: "2018-02-04",
23
progressValue: "100%"
24
},
25
{
26
id: "1_3",
27
name: "Meeting",
28
actualStart: "2018-02-05",
29
actualEnd: "2018-02-05"
30
},
31
{
32
id: "1_4",
33
name: "Implementation",
34
actualStart: "2018-02-05",
35
actualEnd: "2018-02-24",
36
progressValue: "60%"
37
},
38
{
39
id: "1_5",
40
name: "Testing",
41
actualStart: "2018-02-25",
42
actualEnd: "2018-03-10"
43
}
44
]}
45
];
46
47
// create a data tree
48
var treeData = anychart.data.tree(data, "as-tree");
49
50
// create a chart
51
var chart = anychart.ganttProject();
52
53
// set the data
54
chart.data(treeData);
55
56
// configure the scale
57
chart.getTimeline().scale().maximum("2018-03-20");
58
59
// set the container id
60
chart.container("container");
61
62
// initiate drawing the chart
63
chart.draw();
64
65
// fit elements to the width of the timeline
66
chart.fitAll();
67
});