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
children: [
9
{
10
id: "1",
11
name: "Server 1",
12
periods: [
13
{id: "1_1", start: "2018-01-05", end: "2018-01-25"},
14
{id: "1_2", start: "2018-01-28", end: "2018-02-22"},
15
{id: "1_3", start: "2018-03-03", end: "2018-03-25"}
16
],
17
custom_field: "!"
18
},
19
{
20
id: "2",
21
name: "Server 2",
22
periods: [
23
{id: "2_1", start: "2018-01-07", end: "2018-02-15"},
24
{id: "2_2", start: "2018-02-26", end: "2018-03-20"}
25
]}
26
]},
27
{
28
id: "B",
29
name: "Location B",
30
children: [
31
{
32
id: "3",
33
name: "Server 3",
34
periods: [
35
{id: "3_1", start: "2018-01-04", end: "2018-03-25"}
36
],
37
custom_field: "?"
38
}
39
]}
40
];
41
42
// create a data tree
43
var treeData = anychart.data.tree(data, "as-tree");
44
45
// create a chart
46
var chart = anychart.ganttResource();
47
48
// set the data
49
chart.data(treeData);
50
51
// set the text of the first data grid column
52
var column_1 = chart.dataGrid().column(0);
53
column_1.labels().fontColor("#64b5f6");
54
column_1.labels().fontWeight(600);
55
column_1.labels().format("{%linearIndex}.");
56
57
// set the text of the second data grid column
58
var column_2 = chart.dataGrid().column(1);
59
column_2.labels().useHtml(true);
60
column_2.labels().format(
61
"<span style='color:#dd2c00;font-weight:bold'>" +
62
"{%custom_field}</span> {%name}"
63
);
64
65
// set the container id
66
chart.container("container");
67
68
// initiate drawing the chart
69
chart.draw();
70
71
// fit elements to the width of the timeline
72
chart.fitAll();
73
});