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
// Creates Gantt Resource chart.5
var chart = anychart.ganttResource();6
chart.data(data, "as-table");7
8
chart.title("Create a Gantt Resource chart");9
chart.container("container");10
chart.draw();11
chart.fitAll();12
13
});14
15
function getData() {16
return [17
{18
id: 1,19
name: "Server 1",20
broken: "11%",21
maintenance: "20%",22
working: "69%",23
periods: [24
{25
id: "1_1",26
style: "working",27
fill: "#008000 0.7",28
stroke: "none",29
hoverFill: "green",30
hoverStroke: "cyan",31
start: "2008-01-31T24:00:00",32
end: "2008-02-02T14:44:51"33
},34
{35
id: "1_2",36
style: "maintenance",37
fill: "#FFFF00 0.7",38
stroke: "none",39
hoverFill: "yellow",40
hoverStroke: "cyan",41
start: "2008-02-02T14:44:51",42
end: "2008-02-03T08:06:15"43
},44
{45
id: "1_3",46
style: "working",47
fill: "#008000 0.7",48
stroke: "none",49
hoverFill: "green",50
hoverStroke: "cyan",51
start: "2008-02-03T08:06:15",52
end: "2008-02-06T21:28:59"53
},54
]55
},56
{57
id: 2,58
name: "Server 2",59
broken: "9%",60
maintenance: "25%",61
working: "66%",62
periods: [63
{64
id: "2_1",65
style: "working",66
fill: "#008000 0.7",67
stroke: "none",68
hoverFill: "green",69
hoverStroke: "cyan",70
start: "2008-02-01T00:00:00",71
end: "2008-02-01T17:48:22"72
},73
{74
id: "2_2",75
style: "working",76
fill: "#008000 0.7",77
stroke: "none",78
hoverFill: "red",79
hoverStroke: "cyan",80
start: "2008-02-01T17:48:22",81
end: "2008-02-02T07:26:52"82
},83
{84
id: "2_3",85
style: "working",86
fill: "#008000 0.7",87
stroke: "none",88
hoverFill: "green",89
hoverStroke: "cyan",90
start: "2008-02-02T07:26:52",91
end: "2008-02-03T01:42:13"92
},93
{94
id: "2_4",95
style: "maintenance",96
fill: "#FFFF00 0.7",97
stroke: "none",98
hoverFill: "yellow",99
hoverStroke: "cyan",100
start: "2008-02-03T16:54:00",101
end: "2008-02-03T16:54:00"102
},103
]104
}105
];106
}