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
var url= 'https://cdn.anychart.com/samples/gantt-charts/server-status-list/data.json';5
var x = [6
{7
"id": "lv1",8
"line_id": "lv1",9
"name": "Line1",10
"performance": 80.65,11
"availability": 86.25,12
"quality": 30.65,13
"oee": 87.65,14
"collapsed": false,15
"periods": [16
{17
"lv_id": "lv1",18
"job_id": "031213fb-69d8-4769-9233-795cc86b6fff",19
"job_instance_id": "ba292e1e-d786-4603-964d-6fc0d13b5670",20
"parent": "lv1",21
"id": "lv1_0",22
"dependency": "lv1_-1",23
"y": "lv1_0",24
"display_sdt": "2019-08-23T14:05:00Z",25
"display_edt": "2019-08-24T02:15:00Z",26
"display_st": "14:05",27
"display_et": "02:15",28
"name": "J-3554",29
"sku": "CLEAR REPAIR SLEEVE 50",30
"item_number": "BPIO6627",31
"current_status": "scheduled",32
"scheduled_pc": 4,33
"actual_pc": 0,34
"reject_count": 0,35
"scheduled_duration": 43800,36
"start": 1566569100000,37
"end": 1566612900000,38
"style": [39
{40
"name": "bgcolor",41
"value": "#BEEB9F"42
},43
{44
"name": "color",45
"value": "#233933"46
},47
{48
"name": "priority",49
"value": ""50
}51
]52
},53
{54
"lv_id": "lv1",55
"job_id": "b1eaf0af-ca8e-4cdd-ac3c-a3bff43761ba",56
"job_instance_id": "1d3073a7-2040-458f-a33f-e4bea2275190",57
"parent": "lv1",58
"id": "lv1_3",59
"dependency": "lv1_2",60
"y": "lv1_3",61
"display_sdt": "2019-08-24T02:15:00Z",62
"display_edt": "2019-08-24T05:55:00Z",63
"display_st": "02:15",64
"display_et": "05:55",65
"name": "J-3555",66
"sku": "MICOSN6100PROMOPACKsolid",67
"item_number": "FZVL3582",68
"current_status": "scheduled",69
"scheduled_pc": 194,70
"actual_pc": 0,71
"reject_count": 0,72
"scheduled_duration": 13200,73
"start": 1566612900000,74
"end": 1566626100000,75
"style": [76
{77
"name": "bgcolor",78
"value": "#0D5A78"79
},80
{81
"name": "color",82
"value": "#19BEE3"83
},84
{85
"name": "priority",86
"value": ""87
}88
]89
},90
{91
"lv_id": "lv1",92
"job_id": "69ccf9e0-2814-436a-8f03-d7a6e7b90724",93
"job_instance_id": "f5afeeb9-fdef-41d5-b33a-0002dad807a7",94
"parent": "lv1",95
"id": "lv1_5",96
"dependency": "lv1_4",97
"y": "lv1_5",98
"display_sdt": "2019-08-24T05:55:00Z",99
"display_edt": "2019-08-24T10:15:00Z",100
"display_st": "05:55",101
"display_et": "10:15",102
"name": "J-3556",103
"sku": "P4000",104
"item_number": "LVUS8284",105
"current_status": "scheduled",106
"scheduled_pc": 970,107
"actual_pc": 0,108
"reject_count": 0,109
"scheduled_duration": 15600,110
"start": 1566626100000,111
"end": 1566641700000,112
"style": [113
{114
"name": "bgcolor",115
"value": "#F16C21"116
},117
{118
"name": "color",119
"value": "#3F1C09"120
},121
{122
"name": "priority",123
"value": ""124
}125
]126
}127
]128
},129
{130
"id": "lv2",131
"line_id": "lv2",132
"name": "Line1",133
"performance": 80.65,134
"availability": 86.25,135
"quality": 30.65,136
"oee": 87.65,137
"collapsed": false,138
"periods": [139
{140
"lv_id": "lv2",141
"job_id": "b79c177a-ee78-4e15-a998-7bebc5c6f462",142
"job_instance_id": "5f82a61c-34ce-432a-83f8-99e93f17721d",143
"parent": "lv2",144
"id": "lv2_1",145
"dependency": "lv2_0",146
"y": "lv2_1",147
"display_sdt": "2019-08-23T17:28:00Z",148
"display_edt": "2019-08-24T01:33:00Z",149
"display_st": "17:28",150
"display_et": "01:33",151
"name": "J-3520",152
"sku": "MICOSN6100PROMOPACKsolid",153
"item_number": "NCJR4096",154
"current_status": "scheduled",155
"scheduled_pc": 960,156
"actual_pc": 0,157
"reject_count": 0,158
"scheduled_duration": 29100,159
"start": 1566581280000,160
"end": 1566610380000,161
"style": [162
{163
"name": "bgcolor",164
"value": "#8E44AD"165
},166
{167
"name": "color",168
"value": "#DCAAEC"169
},170
{171
"name": "priority",172
"value": ""173
}174
]175
},176
{177
"lv_id": "lv2",178
"job_id": "c63d2c58-a056-4b71-8483-06f05153f6cd",179
"job_instance_id": "999db598-a781-464d-9a88-3295795d2064",180
"parent": "lv2",181
"id": "lv2_2",182
"dependency": "lv2_1",183
"y": "lv2_2",184
"display_sdt": "2019-08-24T01:33:00Z",185
"display_edt": "2019-08-24T04:28:00Z",186
"display_st": "01:33",187
"display_et": "04:28",188
"name": "J-3521",189
"sku": "P4000",190
"item_number": "BBQD8588",191
"current_status": "scheduled",192
"scheduled_pc": 301,193
"actual_pc": 0,194
"reject_count": 0,195
"scheduled_duration": 10500,196
"start": 1566610380000,197
"end": 1566620880000,198
"style": [199
{200
"name": "bgcolor",201
"value": "#D9C5A0"202
},203
{204
"name": "color",205
"value": "#4C4538"206
},207
{208
"name": "priority",209
"value": ""210
}211
]212
},213
{214
"lv_id": "lv2",215
"job_id": "7127fef9-7371-44dd-8681-66aac1abb30e",216
"job_instance_id": "d1d931b4-c96f-4810-affa-3027353358e8",217
"parent": "lv2",218
"id": "lv2_4",219
"dependency": "lv2_3",220
"y": "lv2_4",221
"display_sdt": "2019-08-24T04:28:00Z",222
"display_edt": "2019-08-24T10:03:00Z",223
"display_st": "04:28",224
"display_et": "10:03",225
"name": "J-3522",226
"sku": "P4001",227
"item_number": "VSRT0610",228
"current_status": "scheduled",229
"scheduled_pc": 759,230
"actual_pc": 0,231
"reject_count": 0,232
"scheduled_duration": 20100,233
"start": 1566620880000,234
"end": 1566640980000,235
"style": [236
{237
"name": "bgcolor",238
"value": "#F2B705"239
},240
{241
"name": "color",242
"value": "#403101"243
},244
{245
"name": "priority",246
"value": ""247
}248
]249
}250
]251
}252
];253
254
255
anychart.data.loadJsonFile(url, function (data) {256
// create data tree on our data257
var treeData = anychart.data.tree(x, 'as-table');258
259
// create project gantt chart260
var chart = anychart.ganttResource();261
262
// set data for the chart263
chart.data(treeData);264
265
// set start splitter position settings266
chart.splitterPosition(320);267
268
// get chart data grid link to set column settings269
var dataGrid = chart.dataGrid();270
271
// hide first column272
dataGrid.column(0).enabled(false);273
274
// get chart timeline275
var timeLine = chart.getTimeline();276
277
// set base fill278
timeLine.elements().fill(function () {279
// get status from data item280
var status = this.period.current_status;281
282
// create fill object283
var fill = {284
// if this element has children, then add opacity to it285
opacity: this.item.numChildren() ? 1 : 0.6286
};287
288
// set fill color by status289
//switch (status) {290
// case 'completed':291
// fill.color = 'green';292
// break;293
// case 'running':294
// fill.color = 'orange';295
// break;296
// case 'scheduled':297
// fill.color = 'red';298
// break;299
//}300
301
return fill.color=this.period.style[0].value;302
303
return fill304
});305
306
307
308
// set base stroke309
timeLine.elements().stroke('none');310
// set select fill311
timeLine.elements().selected().fill('#ef6c00');312
313
// set first column settings314
var firstColumn = dataGrid.column(1);315
firstColumn.labels().hAlign('left');316
firstColumn.title('Line')317
.width(140)318
319
.labels()320
.format(function () {321
return this.name;322
});323
324
// set second column settings325
var secondColumn = dataGrid.column(2);326
secondColumn.labels().hAlign('right');327
secondColumn.title('P')328
.width(60)329
330
.labels()331
.format(function () {332
return this.item.get('performance') || '';333
});334
335
// set third column settings336
var thirdColumn = dataGrid.column(3);337
thirdColumn.labels().hAlign('right');338
thirdColumn.title('A')339
.width(60)340
341
.labels()342
.format(function () {343
return this.item.get('availability') || '';344
});345
346
// set fourth column settings347
var fourthColumn = dataGrid.column(4);348
fourthColumn.labels().hAlign('right');349
fourthColumn.title('Q')350
.width(60)351
352
.labels()353
.format(function () {354
return this.item.get('quality') || '';355
});356
357
// set container id for the chart358
chart.container('container');359
360
// initiate chart drawing361
chart.draw();362
363
// zoom chart to specified date364
chart.zoomTo(Date.UTC(2009, 8, 23, 19, 00), Date.UTC(2019, 8, 24, 7, 0));365
366
});367
});368
369
function labelTextSettingsOverrider(label, item) {370
switch (item.get('status')) {371
case 'online':372
label.fontColor('green')373
.fontWeight('bold');374
break;375
case 'maintenance':376
label.fontColor('orange')377
.fontWeight('bold');378
break;379
case 'offline':380
label.fontColor('red')381
.fontWeight('bold');382
break;383
}384
}