Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
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.ganttResource();5
chart.data(data, 'as-table');6
7
var tooltip = chart.getTimeline().tooltip();8
tooltip.format(function () {9
10
// Get data.11
var result = this.getData('periods', this.periodIndex, state);12
13
return result === void 0 ? 'No state specified' : result;14
});15
16
chart.title('Get Gantt Resource data using several parameters');17
chart.container('container');18
chart.draw();19
chart.fitAll();20
21
});22
23
function getData() {24
return [25
{26
id: 1,27
name: 'Server 1',28
broken: '11%',29
maintenance: '20%',30
working: '69%',31
periods: [32
{33
id: '1_1',34
style: 'working',35
fill: '#008000 0.7',36
stroke: 'none',37
hoverFill: 'green',38
hoverStroke: 'cyan',39
start: '2008-01-31T24:00:00',40
end: '2008-02-02T14:44:51',41
state: 'Alaska'42
},43
{44
id: '1_2',45
style: 'maintenance',46
fill: '#FFFF00 0.7',47
stroke: 'none',48
hoverFill: 'yellow',49
hoverStroke: 'cyan',50
start: '2008-02-02T14:44:51',51
end: '2008-02-03T08:06:15',52
state: 'Idaho'53
},54
{55
id: '1_3',56
style: 'working',57
fill: '#008000 0.7',58
stroke: 'none',59
hoverFill: 'green',60
hoverStroke: 'cyan',61
start: '2008-02-03T08:06:15',62
end: '2008-02-06T21:28:59',63
state: 'Arizona'64
}65
]66
},67
{68
id: 2,69
name: 'Server 2',70
broken: '9%',71
maintenance: '25%',72
working: '66%',73
periods: [74
{75
id: '2_1',76
style: 'working',77
fill: '#008000 0.7',78
stroke: 'none',79
hoverFill: 'green',80
hoverStroke: 'cyan',81
start: '2008-01-31T24:00:00',82
end: '2008-02-01T17:48:22',83
state: 'Virginia'84
},85
{86
id: '2_2',87
style: 'working',88
fill: '#008000 0.7',89
stroke: 'none',90
hoverFill: 'red',91
hoverStroke: 'cyan',92
start: '2008-02-01T17:48:22',93
end: '2008-02-02T07:26:52',94
state: 'Illinois'95
},96
{97
id: '2_3',98
style: 'working',99
fill: '#008000 0.7',100
stroke: 'none',101
hoverFill: 'green',102
hoverStroke: 'cyan',103
start: '2008-02-02T07:26:52',104
end: '2008-02-03T01:42:13',105
state: 'California'106
},107
{108
id: '2_4',109
style: 'maintenance',110
fill: '#FFFF00 0.7',111
stroke: 'none',112
hoverFill: 'yellow',113
hoverStroke: 'cyan',114
start: '2008-02-03T01:42:13',115
end: '2008-02-03T16:54:00',116
state: 'Colorado'117
}118
]119
}120
];121
}