xxxxxxxxxx1
<body class="fixed-sn dark-skin dark-theme">2
3
<!-- Double navigation -->4
<header>5
6
<!-- Sidebar navigation -->7
<div id="slide-out" class="side-nav fixed wide sn-bg-4">8
<ul class="custom-scrollbar">9
<!-- Logo -->10
<li>11
<div class="logo-wrapper sn-ad-avatar-wrapper">12
<a href="#"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"13
class="rounded-circle"><span>Anna Deynah</span></a>14
</div>15
</li>16
<!-- Logo -->17
<!-- Side navigation links -->18
<li>19
<ul class="collapsible collapsible-accordion">20
<li><a class="collapsible-header waves-effect arrow-r active"><i21
class="sv-slim-icon fas fa-chevron-right"></i> Submit blog<i22
class="fas fa-angle-down rotate-icon"></i></a>23
<div class="collapsible-body">24
<ul>25
<li><a href="#" class="waves-effect active">26
<span class="sv-slim"> SL </span>27
<span class="sv-normal">Submit listing</span></a>28
</li>29
<li><a href="#" class="waves-effect">30
<span class="sv-slim"> RF </span>31
<span class="sv-normal">Registration form</span></a>32
</li>33
</ul>34
</div>35
</li>36
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-hand-point-right"></i>37
Instruction<i class="fas fa-angle-down rotate-icon"></i></a>38
<div class="collapsible-body">39
<ul>40
<li><a href="#" class="waves-effect">41
<span class="sv-slim"> FB </span>42
<span class="sv-normal">For bloggers</span></a>43
</li>44
<li><a href="#" class="waves-effect">45
<span class="sv-slim"> FA </span>46
<span class="sv-normal">For authors</span></a>47
</li>48
</ul>49
</div>50
</li>51
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon fas fa-eye"></i> About<i52
class="fas fa-angle-down rotate-icon"></i></a>53
<div class="collapsible-body">54
<ul>55
<li><a href="#" class="waves-effect">56
<span class="sv-slim"> I </span>57
<span class="sv-normal">Introduction</span></a>58
</li>59
<li><a href="#" class="waves-effect">60
<span class="sv-slim"> MM </span>61
<span class="sv-normal">Monthly meetings</span></a>62
</li>63
</ul>64
</div>65
</li>66
<li><a class="collapsible-header waves-effect arrow-r"><i class="sv-slim-icon far fa-envelope"></i> Contact67
me<i class="fas fa-angle-down rotate-icon"></i></a>68
<div class="collapsible-body">69
<ul>70
<li><a href="#" class="waves-effect">71
<span class="sv-slim"> F </span>72
<span class="sv-normal">FAQ</span></a>73
</li>74
<li><a href="#" class="waves-effect">75
<span class="sv-slim"> W </span>76
<span class="sv-normal">Write a message</span></a>77
</li>78
</ul>79
</div>80
</li>81
<li><a id="toggle" class="waves-effect"><i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize82
menu</a>83
</li>84
</ul>85
</li>86
<!-- Side navigation links -->87
</ul>88
<div class="sidenav-bg rgba-blue-strong"></div>89
</div>90
<!-- Sidebar navigation -->91
92
<!-- Navbar -->93
<nav class="navbar navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">94
<!-- SideNav slide-out button -->95
<div class="float-left">96
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>97
</div>98
<!-- Breadcrumb -->99
<div class="breadcrumb-dn mr-auto text-white">100
<p>Material Design for Bootstrap</p>101
</div>102
<ul class="nav navbar-nav nav-flex-icons ml-auto text-white">103
<li class="nav-item">104
<a class="nav-link"><i class="fas fa-envelope"></i> <span105
class="clearfix d-none d-sm-inline-block">Contact</span></a>106
</li>107
<li class="nav-item">108
<a class="nav-link"><i class="fas fa-comments"></i> <span109
class="clearfix d-none d-sm-inline-block">Support</span></a>110
</li>111
<li class="nav-item">112
<a class="nav-link"><i class="fas fa-user"></i> <span113
class="clearfix d-none d-sm-inline-block">Account</span></a>114
</li>115
<li class="nav-item dropdown">116
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"117
aria-haspopup="true" aria-expanded="false">118
Dropdown119
</a>120
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">121
<a class="dropdown-item" href="#">Action</a>122
<a class="dropdown-item" href="#">Another action</a>123
<a class="dropdown-item" href="#">Something else here</a>124
</div>125
</li>126
</ul>127
</nav>128
<!-- Navbar -->129
130
</header>131
<!-- Double navigation -->132
133
<!-- Main layout -->134
<main class="pt-3">135
136
<div class="container-fluid">137
138
<!-- Grid row -->139
<div class="row">140
141
<!-- Grid column -->142
<div class="col-md-12 mb-4">143
144
<div class="card">145
<div class="card-body pl-0 pr-2 pb-0">146
<div class="float-left white-text pl-4">147
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Total Shipments</p>148
<h2 class="font-weight-light">Performance</h2>149
</div>150
<div class="btn-group float-right pr-3" role="group" aria-label="Basic example">151
<button type="button" class="btn btn-sm btn-primary" id="accountsData">Accounts</button>152
<button type="button" class="btn btn-sm btn-primary" id="purchasesData">Purchases</button>153
<button type="button" class="btn btn-sm btn-primary" id="sessionsData">Sessions</button>154
</div>155
<canvas id="lineChart" height="90"></canvas>156
</div>157
</div>158
159
</div>160
<!-- Grid column -->161
162
</div>163
<!-- Grid row -->164
165
<!-- Grid row -->166
<div class="row">167
168
<!-- Grid column -->169
<div class="col-lg-4 col-md-12 mb-4">170
171
<div class="card">172
<div class="card-body px-2">173
<div class="float-left white-text pl-4">174
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Total Shipments</p>175
<p><i class="far fa-bell pr-2 align-text-top mt-n1 icon icon-blue"></i><span176
class="font-weight-light h3">354 780</span></p>177
</div>178
<canvas id="horizontalBar" height="280"></canvas>179
</div>180
</div>181
182
</div>183
<!-- Grid column -->184
185
<!-- Grid column -->186
<div class="col-lg-4 col-md-6 mb-4">187
188
<div class="card">189
<div class="card-body px-2">190
<div class="float-left white-text pl-4">191
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Completed Tasks</p>192
<p><i class="far fa-paper-plane pr-2 align-text-top mt-n1 icon icon-blue"></i><span193
class="font-weight-light h3">14,500K</span></p>194
</div>195
<canvas id="lineChartSecond" height="280"></canvas>196
</div>197
</div>198
199
</div>200
<!-- Grid column -->201
202
<!-- Grid column -->203
<div class="col-lg-4 col-md-6 mb-4">204
205
<div class="card">206
<div class="card-body px-2">207
<div class="float-left white-text pl-4">208
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Daily Sales</p>209
<p><i class="fas fa-truck pr-2 align-text-top mt-n1 icon icon-blue"></i><span210
class="font-weight-light h3">7,000€</span></p>211
</div>212
<canvas id="barChart" height="280"></canvas>213
</div>214
</div>215
216
</div>217
<!-- Grid column -->218
219
</div>220
<!-- Grid row -->221
222
<!-- Grid row -->223
<div class="row">224
225
<!-- Grid column -->226
<div class="col-md-6 mb-4">227
228
<!-- Card -->229
<div class="card card-table">230
231
<div class="card-header d-flex justify-content-between">232
233
<div class="d-flex justify-content-start">234
<p class="my-2 text-white pr-3">Tasks(5)</p>235
<p class="my-2 text-white">Today</p>236
</div>237
<!--Dropdown primary-->238
<div class="dropdown mt-2">239
240
<!--Trigger-->241
<a class="dropdown-toggle text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i></a>242
243
<!--Menu-->244
<div class="dropdown-menu dropdown-primary">245
<a class="dropdown-item" href="#">Action</a>246
<a class="dropdown-item" href="#">Another action</a>247
<a class="dropdown-item" href="#">Something else here</a>248
<a class="dropdown-item" href="#">Something else here</a>249
</div>250
</div>251
252
</div>253
254
<!-- Card content -->255
<div class="card-body pt-0">256
257
<div class="table-responsive">258
<!-- Table -->259
<table class="table text-white mb-0">260
261
<!-- Table body -->262
<tbody>263
<tr>264
<th class="cell-small py-0 pr-0 pl-2 align-middle">265
<!-- Material unchecked -->266
<div class="form-check pb-0 pt-2 px-0 m-0">267
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">268
<label class="form-check-label" for="tableMaterialCheck2"></label>269
</div>270
</th>271
<td class="py-2">272
<p class="mb-1 font-weight-bold">Update the Documentation</p>273
<p class="mb-0">Dwuamish Head, Seattle, WA 8:47 AM</p>274
</td>275
<td class="cell-small align-middle">276
<i class="fas fa-pencil-alt"></i>277
</td>278
</tr>279
<tr>280
<th class="cell-small py-0 pr-0 pl-2 align-middle">281
<!-- Material unchecked -->282
<div class="form-check pb-0 pt-2 px-0 m-0">283
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">284
<label class="form-check-label" for="tableMaterialCheck2"></label>285
</div>286
</th>287
<td class="py-2">288
<p class="mb-1 font-weight-bold">GDPR Compliance</p>289
<p class="mb-0">The GDPR is a regulation that requires businesses to protect the personal data290
and privacy of Europe citizens for transactions that occur within EU member states.</p>291
</td>292
<td class="cell-small align-middle">293
<i class="fas fa-pencil-alt"></i>294
</td>295
</tr>296
<tr>297
<th class="cell-small py-0 pr-0 pl-2 align-middle">298
<!-- Material unchecked -->299
<div class="form-check pb-0 pt-2 px-0 m-0">300
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">301
<label class="form-check-label" for="tableMaterialCheck2"></label>302
</div>303
</th>304
<td class="py-2">305
<p class="mb-1 font-weight-bold">Solve the issues</p>306
<p class="mb-0">Fifty percent of all respondents said they would be more likely to shop at a307
company</p>308
</td>309
<td class="cell-small align-middle">310
<i class="fas fa-pencil-alt"></i>311
</td>312
</tr>313
<tr>314
<th class="cell-small py-0 pr-0 pl-2 align-middle">315
<!-- Material unchecked -->316
<div class="form-check pb-0 pt-2 px-0 m-0">317
<input type="checkbox" class="form-check-input" id="tableMaterialCheck5">318
<label class="form-check-label" for="tableMaterialCheck5"></label>319
</div>320
</th>321
<td class="py-2">322
<p class="mb-1 font-weight-bold">Release v2.0.0</p>323
<p class="mb-0">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>324
</td>325
<td class="cell-small align-middle">326
<i class="fas fa-pencil-alt"></i>327
</td>328
</tr>329
<tr>330
<th class="cell-small py-0 pr-0 pl-2 align-middle">331
<!-- Material unchecked -->332
<div class="form-check pb-0 pt-2 px-0 m-0">333
<input type="checkbox" class="form-check-input" id="tableMaterialCheck6">334
<label class="form-check-label" for="tableMaterialCheck6"></label>335
</div>336
</th>337
<td class="py-2">338
<p class="mb-1 font-weight-bold">Export the processed files</p>339
<p class="mb-0">The report also shows that consumers will not easily forgive a company once a340
breach exposing their personal data occurs.</p>341
</td>342
<td class="cell-small align-middle">343
<i class="fas fa-pencil-alt"></i>344
</td>345
</tr>346
<tr>347
<th class="cell-small py-0 pr-0 pl-2 align-middle">348
<!-- Material unchecked -->349
<div class="form-check pb-0 pt-2 px-0 m-0">350
<input type="checkbox" class="form-check-input" id="tableMaterialCheck7">351
<label class="form-check-label" for="tableMaterialCheck7"></label>352
</div>353
</th>354
<td class="py-2">355
<p class="mb-1 font-weight-bold">Arival at export process</p>356
<p class="mb-0">Capitol Hill, Seattle, WA 12:34 AM</p>357
</td>358
<td class="cell-small align-middle">359
<i class="fas fa-pencil-alt"></i>360
</td>361
</tr>362
</tbody>363
<!-- Table body -->364
</table>365
<!-- Table -->366
</div>367
368
</div>369
370
</div>371
<!-- Card -->372
373
</div>374
<!-- Grid column -->375
376
<!-- Grid column -->377
<div class="col-md-6 mb-4">378
379
<!-- Card -->380
<div class="card card-table">381
382
<div class="card-header">383
<h5 class="my-2 text-white">Simple Table</h5>384
</div>385
386
<!-- Card content -->387
<div class="card-body pt-1">388
389
<div class="table-responsive">390
<table class="table text-white mb-0">391
<thead class="">392
<tr>393
<th>Name</th>394
<th>Country</th>395
<th>City</th>396
<th class="text-center">Salary</th>397
</tr>398
</thead>399
<tbody>400
<tr>401
<td>Dakota Rice</td>402
<td>Niger</td>403
<td>Oud-Turnhout</td>404
<td class="text-center">$36,738</td>405
</tr>406
<tr>407
<td>Minerva Hooper</td>408
<td>Curaçao</td>409
<td>Sinaai-Waas</td>410
<td class="text-center">$23,789</td>411
</tr>412
<tr>413
<td>Sage Rodriguez</td>414
<td>Netherlands</td>415
<td>Baileux</td>416
<td class="text-center">$56,142</td>417
</tr>418
<tr>419
<td>Philip Chaney</td>420
<td>Korea, South</td>421
<td>Overland Park</td>422
<td class="text-center">$38,735</td>423
</tr>424
<tr>425
<td>Doris Greene</td>426
<td>Malawi</td>427
<td>Feldkirchen in Kärnten</td>428
<td class="text-center">$63,542</td>429
</tr>430
<tr>431
<td>Mason Porter</td>432
<td>Chile</td>433
<td>Gloucester</td>434
<td class="text-center">$78,615</td>435
</tr>436
<tr>437
<td>Jon Porter</td>438
<td>Portugal</td>439
<td>Gloucester</td>440
<td class="text-center">$98,615</td>441
</tr>442
</tbody>443
</table>444
</div>445
446
</div>447
448
</div>449
<!-- Card -->450
451
</div>452
<!-- Grid column -->453
454
</div>455
<!-- Grid row -->456
457
</div>458
459
</main>460
<!-- Main layout -->461
462
</body>463
xxxxxxxxxx1
.dark-theme {2
background-color: #181C30; }3
.dark-theme.fixed-sn .double-nav,4
.dark-theme.fixed-sn main,5
.dark-theme.fixed-sn footer {6
padding-left: 15rem; }7
.dark-theme.fixed-sn main {8
margin-left: 1rem;9
margin-right: 1rem; }10
@media (max-width: 1289px) {11
.dark-theme.fixed-sn .double-nav,12
.dark-theme.fixed-sn main,13
.dark-theme.fixed-sn footer {14
padding-left: 0; } }15
@media (min-width: 1289px) {16
.dark-theme.fixed-sn .double-nav .button-collapse {17
display: none; } }18
@media (max-width: 1289px) {19
.dark-theme.fixed-sn .double-nav .button-collapse {20
display: block;21
position: relative;22
font-size: 1.4rem;23
margin-right: 10px;24
margin-left: 10px; } }25
.dark-theme header {26
border-top: 2px solid #1d8cf8; }27
.dark-theme header .navbar {28
box-shadow: none;29
background-color: #181C30; }30
.dark-theme .card {31
background-color: #27293d; }32
.dark-theme .card .card-header {33
background-color: #27293d; }34
.dark-theme .card.card-table .card-header {35
border-bottom: none; }36
.dark-theme .btn.btn-sm {37
padding: .4rem 1.5rem .25rem;38
font-size: .75rem;39
font-weight: 500; }40
.dark-theme i.icon {41
font-size: 1.1rem; }42
.dark-theme i.icon.icon-blue {43
color: #36A2EB; }44
.cell-small {45
width: 1rem;46
}47
.dark-skin .side-nav .sidenav-bg:after, .dark-skin .side-nav .sidenav-bg.mask-strong:after {48
background: rgba(29, 140, 248, 0.8); }49
.dark-skin .side-nav .collapsible li .collapsible-header.active {50
background-color: rgba(24, 28, 48, 0.8); }51
.dark-skin .side-nav .collapsible li .collapsible-header:hover {52
background-color: rgba(24, 28, 48, 0.8); }53
.dark-skin .side-nav .collapsible li a:not(.collapsible-header):hover, .dark-skin .side-nav .collapsible li a:not(.collapsible-header).active, .dark-skin .side-nav .collapsible li a:not(.collapsible-header):active {54
color: #67d5ff !important; }55
xxxxxxxxxx1
// SideNav Button Initialization2
$(".button-collapse").sideNav({3
breakpoint: 12904
});5
// SideNav Scrollbar Initialization6
var sideNavScrollbar = document.querySelector('.custom-scrollbar');7
var ps = new PerfectScrollbar(sideNavScrollbar);8
9
// Chart customizer10
(function (global) {11
12
var Samples = global.Samples || (global.Samples = {});13
var Color = global.Color;14
15
Samples.utils = {16
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/17
srand: function (seed) {18
this._seed = seed;19
},20
21
rand: function (min, max) {22
var seed = this._seed;23
min = min === undefined ? 0 : min;24
max = max === undefined ? 1 : max;25
this._seed = (seed * 9301 + 49297) % 233280;26
return min + (this._seed / 233280) * (max - min);27
},28
29
numbers: function (config) {30
var cfg = config || {};31
var min = cfg.min || 0;32
var max = cfg.max || 1;33
var from = cfg.from || [];34
var count = cfg.count || 8;35
var decimals = cfg.decimals || 8;36
var continuity = cfg.continuity || 1;37
var dfactor = Math.pow(10, decimals) || 0;38
var data = [];39
var i, value;40
41
for (i = 0; i < count; ++i) {42
value = (from[i] || 0) + this.rand(min, max);43
if (this.rand() <= continuity) {44
data.push(Math.round(dfactor * value) / dfactor);45
} else {46
data.push(null);47
}48
}49
50
return data;51
},52
53
labels: function (config) {54
var cfg = config || {};55
var min = cfg.min || 0;56
var max = cfg.max || 100;57
var count = cfg.count || 8;58
var step = (max - min) / count;59
var decimals = cfg.decimals || 8;60
var dfactor = Math.pow(10, decimals) || 0;61
var prefix = cfg.prefix || '';62
var values = [];63
var i;64
65
for (i = min; i < max; i += step) {66
values.push(prefix + Math.round(dfactor * i) / dfactor);67
}68
69
return values;70
},71
72
months: function (config) {73
var cfg = config || {};74
var count = cfg.count || 12;75
var section = cfg.section;76
var values = [];77
var i, value;78
79
for (i = 0; i < count; ++i) {80
value = MONTHS[Math.ceil(i) % 12];81
values.push(value.substring(0, section));82
}83
84
return values;85
},86
87
color: function (index) {88
return COLORS[index % COLORS.length];89
},90
91
transparentize: function (color, opacity) {92
var alpha = opacity === undefined ? 0.5 : 1 - opacity;93
return Color(color).alpha(alpha).rgbString();94
}95
};96
97
// DEPRECATED98
window.randomScalingFactor = function () {99
return Math.round(Samples.utils.rand(40, 120));100
};101
102
// INITIALIZATION103
104
Samples.utils.srand(Date.now());105
106
// Google Analytics107
/* eslint-disable */108
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {109
(function (i, s, o, g, r, a, m) {110
i['GoogleAnalyticsObject'] = r;111
i[r] = i[r] || function () {112
(i[r].q = i[r].q || []).push(arguments)113
}, i[r].l = 1 * new Date();114
a = s.createElement(o),115
m = s.getElementsByTagName(o)[0];116
a.async = 1;117
a.src = g;118
m.parentNode.insertBefore(a, m)119
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');120
ga('create', 'UA-28909194-3', 'auto');121
ga('send', 'pageview');122
}123
/* eslint-enable */124
125
}(this));126
127
// Line chart128
var ctxL = document.getElementById("lineChart").getContext('2d');129
var gradientFill = ctxL.createLinearGradient(0, 0, 0, 250);130
gradientFill.addColorStop(0, "rgba(29, 140, 248, 1)");131
gradientFill.addColorStop(1, "rgba(29, 140, 248, 0.1)");132
133
var config = {134
type: 'line',135
data: {136
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],137
datasets: [{138
data: [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],139
backgroundColor: gradientFill,140
borderColor: [141
'#1d8cf8',142
],143
borderWidth: 2,144
pointBackgroundColor: "#1d8cf8",145
}]146
},147
options: {148
responsive: true,149
legend: {150
display: false,151
},152
title: {153
display: true,154
},155
tooltips: {156
mode: 'index',157
intersect: false,158
},159
hover: {160
mode: 'nearest',161
intersect: true162
},163
scales: {164
xAxes: [{165
display: true,166
scaleLabel: {167
display: true,168
},169
ticks: {170
fontColor: 'rgba(255, 255, 255, .5)'171
}172
}],173
yAxes: [{174
display: true,175
scaleLabel: {176
display: true,177
},178
ticks: {179
min: 40,180
max: 120,181
padding: 0,182
fontColor: 'rgba(255, 255, 255, .5)'183
},184
gridLines: {185
display: false,186
}187
}]188
}189
}190
};191
192
window.onload = function () {193
var ctxL = document.getElementById("lineChart").getContext('2d');194
window.myLine = new Chart(ctxL, config);195
};196
197
document.getElementById('accountsData').addEventListener('click', function () {198
config.data.datasets.forEach(function (dataset) {199
dataset.data = dataset.data.map(function () {200
return randomScalingFactor();201
});202
203
});204
205
window.myLine.update();206
});207
208
document.getElementById('purchasesData').addEventListener('click', function () {209
config.data.datasets.forEach(function (dataset) {210
dataset.data = dataset.data.map(function () {211
return randomScalingFactor();212
});213
214
});215
216
window.myLine.update();217
});218
219
document.getElementById('sessionsData').addEventListener('click', function () {220
config.data.datasets.forEach(function (dataset) {221
dataset.data = dataset.data.map(function () {222
return randomScalingFactor();223
});224
225
});226
227
window.myLine.update();228
});229
230
var ctxY = document.getElementById("horizontalBar").getContext('2d');231
var myLineChart = new Chart(ctxY, {232
type: "horizontalBar",233
data: {234
labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],235
datasets: [{236
data: [105, 95, 85, 100, 115, 125],237
fill: false,238
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",239
"rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"240
],241
borderWidth: 2242
}]243
},244
options: {245
legend: {246
display: false,247
},248
scales: {249
xAxes: [{250
ticks: {251
beginAtZero: false,252
min: 50,253
max: 130,254
padding: 0,255
fontColor: 'rgba(255, 255, 255, .5)'256
}257
}],258
yAxes: [{259
display: true,260
ticks: {261
fontColor: 'rgba(255, 255, 255, .5)'262
},263
}]264
}265
}266
});267
268
// Line269
var ctxY = document.getElementById("lineChartSecond").getContext('2d');270
var gradientFill = ctxY.createLinearGradient(0, 0, 0, 250);271
gradientFill.addColorStop(0, "rgba(29, 140, 248, 1)");272
gradientFill.addColorStop(1, "rgba(29, 140, 248, 0.1)");273
var myLineChart = new Chart(ctxY, {274
type: 'line',275
data: {276
labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],277
datasets: [{278
label: "My Second dataset",279
data: [80, 100, 70, 80, 120, 80],280
backgroundColor: gradientFill,281
borderColor: [282
'#1d8cf8',283
],284
borderWidth: 2,285
pointBackgroundColor: "#1d8cf8",286
}]287
},288
options: {289
legend: {290
display: false,291
},292
scales: {293
xAxes: [{294
ticks: {295
fontColor: 'rgba(255, 255, 255, .5)'296
}297
}],298
yAxes: [{299
display: true,300
ticks: {301
min: 60,302
max: 130,303
padding: 0,304
fontColor: 'rgba(255, 255, 255, .5)'305
},306
gridLines: {307
display: false,308
}309
}]310
}311
}312
});313
314
// Bar315
var ctxB = document.getElementById("barChart").getContext('2d');316
var myBarChart = new Chart(ctxB, {317
type: 'bar',318
data: {319
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],320
datasets: [{321
data: [12, 19, 3, 5, 2, 3],322
borderColor: [323
'rgba(255,99,132,1)',324
'rgba(54, 162, 235, 1)',325
'rgba(255, 206, 86, 1)',326
'rgba(75, 192, 192, 1)',327
'rgba(153, 102, 255, 1)',328
'rgba(255, 159, 64, 1)'329
],330
borderWidth: 2331
}]332
},333
options: {334
legend: {335
display: false,336
},337
scales: {338
xAxes: [{339
ticks: {340
fontColor: 'rgba(255, 255, 255, .5)'341
}342
}],343
yAxes: [{344
ticks: {345
beginAtZero: true,346
fontColor: 'rgba(255, 255, 255, .5)'347
}348
}]349
}350
}351
});352
Console errors: 0