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