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, anychart.enums.TreeFillingMethod.AS_TABLE);7
8
chart.title("Create a Gantt Resource chart");9
chart.container("container");10
chart.draw();11
chart.fitAll();12
13
function getData() {14
return [15
{16
"id": "1",17
"name": "Server 1",18
"broken": "11%",19
"maintance": "20%",20
"working": "69%",21
"periods": [22
{23
"id": "1_1",24
"style": "working",25
"fill": "#008000 0.7",26
"stroke": "none",27
"hoverFill": "green",28
"hoverStroke": "cyan",29
"start": 1201795200000,30
"end": 120193469100031
},32
{33
"id": "1_2",34
"style": "maintance",35
"fill": "#FFFF00 0.7",36
"stroke": "none",37
"hoverFill": "yellow",38
"hoverStroke": "cyan",39
"start": 1201934691000,40
"end": 120199717500041
},42
{43
"id": "1_3",44
"style": "working",45
"fill": "#008000 0.7",46
"stroke": "none",47
"hoverFill": "green",48
"hoverStroke": "cyan",49
"start": 1201997175000,50
"end": 120230453900051
},52
]53
},54
{55
"id": "2",56
"name": "Server 2",57
"broken": "9%",58
"maintance": "25%",59
"working": "66%",60
"periods": [61
{62
"id": "2_1",63
"style": "working",64
"fill": "#008000 0.7",65
"stroke": "none",66
"hoverFill": "green",67
"hoverStroke": "cyan",68
"start": 1201795200000,69
"end": 120185930200070
},71
{72
"id": "2_2",73
"style": "working",74
"fill": "#008000 0.7",75
"stroke": "none",76
"hoverFill": "red",77
"hoverStroke": "cyan",78
"start": 1201859302000,79
"end": 120190841200080
},81
{82
"id": "2_3",83
"style": "working",84
"fill": "#008000 0.7",85
"stroke": "none",86
"hoverFill": "green",87
"hoverStroke": "cyan",88
"start": 1201908412000,89
"end": 120197413300090
},91
{92
"id": "2_4",93
"style": "maintance",94
"fill": "#FFFF00 0.7",95
"stroke": "none",96
"hoverFill": "yellow",97
"hoverStroke": "cyan",98
"start": 1201974133000,99
"end": 1202028840000100
},101
]102
}103
];104
}105
});