xxxxxxxxxx1
<div class="container my-5">2
3
4
<!-- Section: Block Content -->5
<section>6
7
<div class="row">8
<div class="col-12">9
<div class="card card-list">10
<div class="card-header white d-flex justify-content-between align-items-center py-3">11
<p class="h5-responsive font-weight-bold mb-0">Last Orders</p>12
<ul class="list-unstyled d-flex align-items-center mb-0">13
<li><i class="far fa-window-minimize fa-sm pl-3"></i></li>14
<li><i class="fas fa-times fa-sm pl-3"></i></li>15
</ul>16
</div>17
<div class="card-body">18
<table class="table">19
<thead>20
<tr>21
<th scope="col">Order ID</th>22
<th scope="col">Item</th>23
<th scope="col">Status</th>24
<th scope="col">Popularity</th>25
</tr>26
</thead>27
<tbody>28
<tr>29
<th scope="row"><a class="text-primary">OR9842</a></th>30
<td>Call of Duty IV</td>31
<td><span class="badge badge-success">Shipped</span></td>32
<td class="pt-2 pb-0"><canvas id="bar" width="40" height="40"></canvas></td>33
</tr>34
<tr>35
<th scope="row"><a class="text-primary">OR1848</a></th>36
<td>Samsung Smart TV</td>37
<td><span class="badge badge-warning">Pending</span></td>38
<td class="pt-2 pb-0"><canvas id="bar1" width="40" height="40"></canvas></td>39
</tr>40
<tr>41
<th scope="row"><a class="text-primary">OR7429</a></th>42
<td>iPhone 6 Plus</td>43
<td><span class="badge badge-danger">Delivered</span></td>44
<td class="pt-2 pb-0"><canvas id="bar2" width="40" height="40"></canvas></td>45
</tr>46
<tr>47
<th scope="row"><a class="text-primary">OR7429</a></th>48
<td>Samsung Smart TV</td>49
<td><span class="badge badge-info">Processing</span></td>50
<td class="pt-2 pb-0"><canvas id="bar3" width="40" height="40"></canvas></td>51
</tr>52
<tr>53
<th scope="row"><a class="text-primary">OR1848</a></th>54
<td>Samsung Smart TV</td>55
<td><span class="badge badge-warning">Pending</span></td>56
<td class="pt-2 pb-0"><canvas id="bar4" width="40" height="40"></canvas></td>57
</tr>58
<tr>59
<th scope="row"><a class="text-primary">OR7429</a></th>60
<td>iPhone 6 Plus</td>61
<td><span class="badge badge-danger">Delivered</span></td>62
<td class="pt-2 pb-0"><canvas id="bar5" width="40" height="40"></canvas></td>63
</tr>64
<tr>65
<th scope="row"><a class="text-primary">OR9842</a></th>66
<td>Call of Duty IV</td>67
<td><span class="badge badge-success">Shipped</span></td>68
<td class="pt-2 pb-0"><canvas id="bar6" width="40" height="40"></canvas></td>69
</tr>70
</tbody>71
</table>72
</div>73
<div class="card-footer white py-3 d-flex justify-content-between">74
<button class="btn btn-primary btn-md px-3 my-0 mr-0">Place New Order</button>75
<button class="btn btn-light btn-md px-3 my-0 ml-0">View All Orders</button>76
</div>77
</div>78
</div>79
</div>80
81
</section>82
<!-- Section: Block Content -->83
84
85
</div>1
1
xxxxxxxxxx1
new Chart(document.getElementById("bar"), {2
"type": "bar",3
"data": {4
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],5
"datasets": [{6
"label": "My First Dataset",7
"data": [22, 33, 55, 32, 86, 23, 14],8
"fill": false,9
"backgroundColor": "#00c851",10
"borderWidth": 011
}]12
},13
"options": {14
"responsive": false,15
"legend": {16
"display": false,17
},18
"scales": {19
"xAxes": [{20
"gridLines": {21
"display": false,22
"drawBorder": false,23
},24
"ticks": {25
"display": false,26
"beginAtZero": true27
}28
}],29
"yAxes": [{30
"gridLines": {31
"display": false,32
"drawBorder": false,33
},34
"ticks": {35
"display": false,36
}37
}],38
}39
}40
});41
42
new Chart(document.getElementById("bar1"), {43
"type": "bar",44
"data": {45
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],46
"datasets": [{47
"label": "My First Dataset",48
"data": [20, 33, 45, 34, 71, 85, 54],49
"fill": false,50
"backgroundColor": "#fb3",51
"borderWidth": 052
}]53
},54
"options": {55
"responsive": false,56
"legend": {57
"display": false,58
},59
"scales": {60
"xAxes": [{61
"gridLines": {62
"display": false,63
"drawBorder": false,64
},65
"ticks": {66
"display": false,67
"beginAtZero": true68
}69
}],70
"yAxes": [{71
"gridLines": {72
"display": false,73
"drawBorder": false,74
},75
"ticks": {76
"display": false,77
}78
}],79
}80
}81
});82
83
new Chart(document.getElementById("bar2"), {84
"type": "bar",85
"data": {86
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],87
"datasets": [{88
"label": "My First Dataset",89
"data": [35, 21, 42, 59, 50, 62, 90],90
"fill": false,91
"backgroundColor": "#ff3547",92
"borderWidth": 093
}]94
},95
"options": {96
"responsive": false,97
"legend": {98
"display": false,99
},100
"scales": {101
"xAxes": [{102
"gridLines": {103
"display": false,104
"drawBorder": false,105
},106
"ticks": {107
"display": false,108
"beginAtZero": true109
}110
}],111
"yAxes": [{112
"gridLines": {113
"display": false,114
"drawBorder": false,115
},116
"ticks": {117
"display": false,118
}119
}],120
}121
}122
});123
124
new Chart(document.getElementById("bar3"), {125
"type": "bar",126
"data": {127
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],128
"datasets": [{129
"label": "My First Dataset",130
"data": [22, 33, 55, 32, 86, 23, 14],131
"fill": false,132
"backgroundColor": "#33b5e5",133
"borderWidth": 0134
}]135
},136
"options": {137
"responsive": false,138
"legend": {139
"display": false,140
},141
"scales": {142
"xAxes": [{143
"gridLines": {144
"display": false,145
"drawBorder": false,146
},147
"ticks": {148
"display": false,149
"beginAtZero": true150
}151
}],152
"yAxes": [{153
"gridLines": {154
"display": false,155
"drawBorder": false,156
},157
"ticks": {158
"display": false,159
}160
}],161
}162
}163
});164
165
new Chart(document.getElementById("bar4"), {166
"type": "bar",167
"data": {168
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],169
"datasets": [{170
"label": "My First Dataset",171
"data": [20, 33, 45, 34, 71, 54, 44],172
"fill": false,173
"backgroundColor": "#fb3",174
"borderWidth": 0175
}]176
},177
"options": {178
"responsive": false,179
"legend": {180
"display": false,181
},182
"scales": {183
"xAxes": [{184
"gridLines": {185
"display": false,186
"drawBorder": false,187
},188
"ticks": {189
"display": false,190
"beginAtZero": true191
}192
}],193
"yAxes": [{194
"gridLines": {195
"display": false,196
"drawBorder": false,197
},198
"ticks": {199
"display": false,200
}201
}],202
}203
}204
});205
206
new Chart(document.getElementById("bar5"), {207
"type": "bar",208
"data": {209
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],210
"datasets": [{211
"label": "My First Dataset",212
"data": [60, 21, 72, 65, 50, 40, 35],213
"fill": false,214
"backgroundColor": "#ff3547",215
"borderWidth": 0216
}]217
},218
"options": {219
"responsive": false,220
"legend": {221
"display": false,222
},223
"scales": {224
"xAxes": [{225
"gridLines": {226
"display": false,227
"drawBorder": false,228
},229
"ticks": {230
"display": false,231
"beginAtZero": true232
}233
}],234
"yAxes": [{235
"gridLines": {236
"display": false,237
"drawBorder": false,238
},239
"ticks": {240
"display": false,241
}242
}],243
}244
}245
});246
247
new Chart(document.getElementById("bar6"), {248
"type": "bar",249
"data": {250
"labels": ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Grey"],251
"datasets": [{252
"label": "My First Dataset",253
"data": [21, 59, 90, 35, 50, 42, 62],254
"fill": false,255
"backgroundColor": "#00c851",256
"borderWidth": 0257
}]258
},259
"options": {260
"responsive": false,261
"legend": {262
"display": false,263
},264
"scales": {265
"xAxes": [{266
"gridLines": {267
"display": false,268
"drawBorder": false,269
},270
"ticks": {271
"display": false,272
"beginAtZero": true273
}274
}],275
"yAxes": [{276
"gridLines": {277
"display": false,278
"drawBorder": false,279
},280
"ticks": {281
"display": false,282
}283
}],284
}285
}286
}); Console errors: 0