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 timeline = chart.getTimeline();8
9
// Set periods.10
timeline.periods({fill: '#F44336'});11
12
chart.title('Set periods settings');13
chart.container('container');14
chart.draw();15
chart.fitAll();16
17
});18
19
function getData() {20
return [21
{22
id: '1',23
name: 'Server 1',24
broken: '11%',25
maintenance: '20%',26
working: '69%',27
periods: [28
{29
id: '1_1',30
style: 'working',31
fill: '#008000 0.7',32
stroke: 'none',33
hoverFill: 'green',34
hoverStroke: 'cyan',35
start: 1201795200000,36
end: 120193469100037
},38
{39
id: '1_2',40
style: 'maintenance',41
stroke: 'none',42
hoverFill: 'yellow',43
hoverStroke: 'cyan',44
start: 1201934691000,45
end: 120199717500046
},47
{48
id: '1_3',49
style: 'working',50
fill: '#008000 0.7',51
stroke: 'none',52
hoverFill: 'green',53
hoverStroke: 'cyan',54
start: 1201997175000,55
end: 120230453900056
},57
]58
},59
{60
id: '2',61
name: 'Server 2',62
broken: '9%',63
maintenance: '25%',64
working: '66%',65
periods: [66
{67
id: '2_1',68
style: 'working',69
fill: '#008000 0.7',70
stroke: 'none',71
hoverFill: 'green',72
hoverStroke: 'cyan',73
start: 1201795200000,74
end: 120185930200075
},76
{77
id: '2_2',78
style: 'working',79
fill: '#008000 0.7',80
stroke: 'none',81
hoverFill: 'red',82
hoverStroke: 'cyan',83
start: 1201859302000,84
end: 120190841200085
},86
{87
id: '2_3',88
style: 'working',89
fill: '#008000 0.7',90
stroke: 'none',91
hoverFill: 'green',92
hoverStroke: 'cyan',93
start: 1201908412000,94
end: 120197413300095
},96
{97
id: '2_4',98
style: 'maintenance',99
stroke: 'none',100
hoverFill: 'yellow',101
hoverStroke: 'cyan',102
start: 1201974133000,103
end: 1202028840000104
},105
]106
}107
];108
}