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
// The data used in this sample can be obtained from the CDN3
// https://cdn.anychart.com/samples/gantt-charts/server-status-list/data.json4
anychart.data.loadJsonFile('https://cdn.anychart.com/samples/gantt-charts/server-status-list/_data.json', function (data) {5
// create data tree on our data6
7
data = [{8
"id": "1",9
"name": "Game Server",10
"offline": "11%",11
"maintenance": "20%",12
"online": "69%",13
"rowHeight": 22,14
"collapsed": false,15
"periods": 16
[17
{18
"id": "1_1",19
"status": "online",20
"start": 1201795200000,21
"end": 120193464000022
},23
{24
"id": "1_2",25
"status": "maintenance",26
"start": 1201934640000,27
"end": 120199716000028
},29
{30
"id": "1_3",31
"status": "online",32
"start": 1201997160000,33
"end": 120230448000034
},35
{36
"id": "1_4",37
"status": "maintenance",38
"start": 1202304480000,39
"end": 120234522000040
},41
{42
"id": "1_5",43
"status": "online",44
"start": 1202345220000,45
"end": 120248028000046
},47
{48
"id": "1_6",49
"status": "maintenance",50
"start": 1202480280000,51
"end": 120256056000052
},53
{54
"id": "1_7",55
"status": "online",56
"start": 1202560560000,57
"end": 120263028000058
},59
{60
"id": "1_8",61
"status": "offline",62
"start": 1202630280000,63
"end": 120270036000064
},65
{66
"id": "1_9",67
"status": "online",68
"start": 1202700360000,69
"end": 120275760000070
},71
{72
"id": "1_10",73
"status": "maintenance",74
"start": 1202757600000,75
"end": 120302136000076
},77
{78
"id": "1_11",79
"status": "online",80
"start": 1203021360000,81
"end": 120305898000082
},83
{84
"id": "1_12",85
"status": "maintenance",86
"start": 1203058980000,87
"end": 120311364000088
},89
{90
"id": "1_13",91
"status": "online",92
"start": 1203113640000,93
"end": 120319308000094
},95
{96
"id": "1_14",97
"status": "maintenance",98
"start": 1203193080000,99
"end": 1203278100000100
},101
{102
"id": "1_15",103
"status": "offline",104
"start": 1203278100000,105
"end": 1203356700000106
},107
{108
"id": "1_16",109
"status": "online",110
"start": 1203356700000,111
"end": 1203615720000112
},113
{114
"id": "1_17",115
"status": "offline",116
"start": 1203615720000,117
"end": 1203693780000118
},119
{120
"id": "1_18",121
"status": "online",122
"start": 1203693780000,123
"end": 1203935520000124
},125
{126
"id": "1_19",127
"status": "offline",128
"start": 1203935520000,129
"end": 1204070040000130
},131
{132
"id": "1_20",133
"status": "online",134
"start": 1204070040000,135
"end": 1204842660000136
},137
{138
"id": "1_21",139
"status": "offline",140
"start": 1204842660000,141
"end": 1204920240000142
},143
{144
"id": "1_22",145
"status": "online",146
"start": 1204920240000,147
"end": 1205194320000148
},149
{150
"id": "1_23",151
"status": "maintenance",152
"start": 1205194320000,153
"end": 1205248680000154
},155
{156
"id": "1_24",157
"status": "online",158
"start": 1205248680000,159
"end": 1205814540000160
},161
{162
"id": "1_25",163
"status": "offline",164
"start": 1205814540000,165
"end": 1205934360000166
},167
{168
"id": "1_26",169
"status": "maintenance",170
"start": 1205934360000,171
"end": 1206004080000172
},173
{174
"id": "1_27",175
"status": "online",176
"start": 1206004080000,177
"end": 1206090300000178
},179
{180
"id": "1_28",181
"status": "maintenance",182
"start": 1206090300000,183
"end": 1206213060000184
},185
{186
"id": "1_29",187
"status": "online",188
"start": 1206213060000,189
"end": 1206400500000190
},191
{192
"id": "1_30",193
"status": "maintenance",194
"start": 1206400500000,195
"end": 1206545160000196
},197
{198
"id": "1_31",199
"status": "online",200
"start": 1206545160000,201
"end": 1206644880000202
},203
{204
"id": "1_32",205
"status": "maintenance",206
"start": 1206644880000,207
"end": 1206710040000208
},209
{210
"id": "1_33",211
"status": "online",212
"start": 1206710040000,213
"end": 1206975600000214
}215
]216
},217
{218
"id": "1online",219
"name": "Online",220
"online": "69%",221
"parent": "1",222
"status": "online",223
"rowHeight": 30,224
"periods": [{225
"id": "1_1online",226
"status": "online",227
"start": 1201795200000,228
"end": 1201934640000,229
"connectTo": "1_2maintenance"230
},231
{232
"id": "1_3online",233
"status": "online",234
"start": 1201997160000,235
"end": 1202304480000,236
"connectTo": "1_4maintenance"237
},238
{239
"id": "1_5online",240
"status": "online",241
"start": 1202345220000,242
"end": 1202480280000,243
"connectTo": "1_6maintenance"244
},245
{246
"id": "1_7online",247
"status": "online",248
"start": 1202560560000,249
"end": 1202630280000,250
"connectTo": "1_8offline"251
},252
{253
"id": "1_9online",254
"status": "online",255
"start": 1202700360000,256
"end": 1202757600000,257
"connectTo": "1_10maintenance"258
},259
{260
"id": "1_11online",261
"status": "online",262
"start": 1203021360000,263
"end": 1203058980000,264
"connectTo": "1_12maintenance"265
},266
{267
"id": "1_13online",268
"status": "online",269
"start": 1203113640000,270
"end": 1203193080000,271
"connectTo": "1_14maintenance"272
},273
{274
"id": "1_16online",275
"status": "online",276
"start": 1203356700000,277
"end": 1203615720000,278
"connectTo": "1_17offline"279
},280
{281
"id": "1_18online",282
"status": "online",283
"start": 1203693780000,284
"end": 1203935520000,285
"connectTo": "1_19offline"286
},287
{288
"id": "1_20online",289
"status": "online",290
"start": 1204070040000,291
"end": 1204842660000,292
"connectTo": "1_21offline"293
},294
{295
"id": "1_22online",296
"status": "online",297
"start": 1204920240000,298
"end": 1205194320000,299
"connectTo": "1_23maintenance"300
},301
{302
"id": "1_24online",303
"status": "online",304
"start": 1205248680000,305
"end": 1205814540000,306
"connectTo": "1_25offline"307
},308
{309
"id": "1_27online",310
"status": "online",311
"start": 1206004080000,312
"end": 1206090300000,313
"connectTo": "1_28maintenance"314
},315
{316
"id": "1_29online",317
"status": "online",318
"start": 1206213060000,319
"end": 1206400500000,320
"connectTo": "1_30maintenance"321
},322
{323
"id": "1_31online",324
"status": "online",325
"start": 1206545160000,326
"end": 1206644880000,327
"connectTo": "1_32maintenance"328
},329
{330
"id": "1_33online",331
"status": "online",332
"start": 1206710040000,333
"end": 1206975600000334
}335
]336
},337
{338
"id": "1maintenance",339
"name": "Maintenance",340
"maintenance": "20%",341
"parent": "1",342
"status": "maintenance",343
"rowHeight": 30,344
"periods": [{345
"id": "1_2maintenance",346
"status": "maintenance",347
"start": 1201934640000,348
"end": 1201997160000,349
"connectTo": "1_3online"350
},351
{352
"id": "1_4maintenance",353
"status": "maintenance",354
"start": 1202304480000,355
"end": 1202345220000,356
"connectTo": "1_5online"357
},358
{359
"id": "1_6maintenance",360
"status": "maintenance",361
"start": 1202480280000,362
"end": 1202560560000,363
"connectTo": "1_7online"364
},365
{366
"id": "1_10maintenance",367
"status": "maintenance",368
"start": 1202757600000,369
"end": 1203021360000,370
"connectTo": "1_11online"371
},372
{373
"id": "1_12maintenance",374
"status": "maintenance",375
"start": 1203058980000,376
"end": 1203113640000,377
"connectTo": "1_13online"378
},379
{380
"id": "1_14maintenance",381
"status": "maintenance",382
"start": 1203193080000,383
"end": 1203278100000,384
"connectTo": "1_15offline"385
},386
{387
"id": "1_23maintenance",388
"status": "maintenance",389
"start": 1205194320000,390
"end": 1205248680000,391
"connectTo": "1_24online"392
},393
{394
"id": "1_26maintenance",395
"status": "maintenance",396
"start": 1205934360000,397
"end": 1206004080000,398
"connectTo": "1_27online"399
},400
{401
"id": "1_28maintenance",402
"status": "maintenance",403
"start": 1206090300000,404
"end": 1206213060000,405
"connectTo": "1_29online"406
},407
{408
"id": "1_30maintenance",409
"status": "maintenance",410
"start": 1206400500000,411
"end": 1206545160000,412
"connectTo": "1_31online"413
},414
{415
"id": "1_32maintenance",416
"status": "maintenance",417
"start": 1206644880000,418
"end": 1206710040000,419
"connectTo": "1_33online"420
}421
]422
},423
{424
"id": "1offline",425
"name": "Offline",426
"offline": "11%",427
"parent": "1",428
"status": "offline",429
"rowHeight": 30,430
"periods": [{431
"id": "1_8offline",432
"status": "offline",433
"start": 1202630280000,434
"end": 1202700360000,435
"connectTo": "1_9online"436
},437
{438
"id": "1_15offline",439
"status": "offline",440
"start": 1203278100000,441
"end": 1203356700000,442
"connectTo": "1_16online"443
},444
{445
"id": "1_17offline",446
"status": "offline",447
"start": 1203615720000,448
"end": 1203693780000,449
"connectTo": "1_18online"450
}451
]452
}453
]454
var treeData = anychart.data.tree(data, 'as-table');455
456
// create project gantt chart457
var chart = anychart.ganttResource();458
459
// set data for the chart460
chart.data(treeData);461
462
// set start splitter position settings463
chart.splitterPosition(320);464
465
// get chart data grid link to set column settings466
var dataGrid = chart.dataGrid();467
468
// hide first column469
dataGrid.column(0).enabled(false);470
471
// get chart timeline472
var timeLine = chart.getTimeline();473
// set base fill474
timeLine.elements().fill(function () {475
// get status from data item476
var status = this.period.status;477
478
// create fill object479
var fill = {480
// if this element has children, then add opacity to it481
opacity: this.item.numChildren() ? 1 : 0.6482
};483
484
// set fill color by status485
switch (status) {486
case 'online':487
fill.color = 'green';488
break;489
case 'maintenance':490
fill.color = 'orange';491
break;492
case 'offline':493
fill.color = 'red';494
break;495
}496
497
return fill498
});499
500
// set base stroke501
timeLine.elements().stroke('none');502
// set select fill503
timeLine.elements().selected().fill('#ef6c00');504
505
// set first column settings506
var firstColumn = dataGrid.column(1);507
firstColumn.labels().hAlign('left');508
firstColumn.title('Server')509
.width(140)510
.labelsOverrider(labelTextSettingsOverrider)511
.labels()512
.format(function () {513
return this.name;514
});515
516
// set first column settings517
var secondColumn = dataGrid.column(2);518
secondColumn.labels().hAlign('right');519
secondColumn.title('Online')520
.width(60)521
.labelsOverrider(labelTextSettingsOverrider)522
.labels()523
.format(function () {524
return this.item.get('online') || '';525
});526
527
// set first column settings528
var thirdColumn = dataGrid.column(3);529
thirdColumn.labels().hAlign('right');530
thirdColumn.title('Maintenance')531
.width(60)532
.labelsOverrider(labelTextSettingsOverrider)533
.labels()534
.format(function () {535
return this.item.get('maintenance') || '';536
});537
538
// set first column settings539
var fourthColumn = dataGrid.column(4);540
fourthColumn.labels().hAlign('right');541
fourthColumn.title('Offline')542
.width(60)543
.labelsOverrider(labelTextSettingsOverrider)544
.labels()545
.format(function () {546
return this.item.get('offline') || '';547
});548
549
// set container id for the chart550
chart.container('container');551
552
// initiate chart drawing553
chart.draw();554
555
// zoom chart to specified date556
chart.zoomTo(Date.UTC(2008, 0, 31, 1, 36), Date.UTC(2008, 1, 15, 10, 3));557
558
});559
});560
561
function labelTextSettingsOverrider(label, item) {562
switch (item.get('status')) {563
case 'online':564
label.fontColor('green')565
.fontWeight('bold');566
break;567
case 'maintenance':568
label.fontColor('orange')569
.fontWeight('bold');570
break;571
case 'offline':572
label.fontColor('red')573
.fontWeight('bold');574
break;575
}576
}