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: "A",
7
name: "Location A",
8
markers: [
9
{value: "2018-01-10", type: "diagonal-cross"},
10
{value: "2018-01-17", type: "cross"},
11
{value: "2018-03-15", type: "diamond", fill: "#ffa000"}
12
],
13
children: [
14
{
15
id: "1",
16
name: "Server 1",
17
periods: [
18
{id: "1_1", start: "2018-01-05", end: "2018-01-25"},
19
{id: "1_2", start: "2018-01-28", end: "2018-02-22"},
20
{id: "1_3", start: "2018-03-03", end: "2018-03-25"}
21
]},
22
{
23
id: "2",
24
name: "Server 2",
25
periods: [
26
{id: "2_1", start: "2018-01-07", end: "2018-02-15"},
27
{id: "2_2", start: "2018-02-26", end: "2018-03-20"},
28
],
29
markers: [
30
{value: "2018-01-10", type: "diagonal-cross"},
31
{value: "2018-01-17", type: "cross"},
32
{value: "2018-03-15", type: "diamond", fill: "#ffa000"}
33
]}
34
]},
35
{
36
id: "B",
37
name: "Location B",
38
children: [
39
{
40
id: "3",
41
name: "Server 3",
42
periods: [
43
{id: "3_1", start: "2018-01-04", end: "2018-03-25"}
44
]}
45
]}
46
];
47
48
// create a data tree
49
var treeData = anychart.data.tree(data, "as-tree");
50
51
// create a chart
52
var chart = anychart.ganttResource();
53
54
// set the data
55
chart.data(treeData);
56
57
// configure markers
58
chart.getTimeline().markers().fill("#dd2c00");
59
chart.getTimeline().markers().stroke("black");
60
61
// set the container id
62
chart.container("container");
63
64
// initiate drawing the chart
65
chart.draw();
66
67
// fit elements to the width of the timeline
68
chart.fitAll();
69
});