xxxxxxxxxx1
<div class="container my-4 d-flex justify-content-center">2
3
<div id="mobile-box">4
5
<a href="#">6
<i class="fas fa-long-arrow-alt-left mr-2 mb-4"></i>Dashboard7
</a>8
9
<canvas class="chart-box wow fadeIn" id="lineChart" height="230"></canvas>10
11
<div class="d-flex justify-content-around mb-4">12
13
<div class="stats-box purple flex-fill wow fadeIn" data-wow-delay="0.3s">14
<p class="number">54,560</p>15
<p class="title"><strong>Pageviews</strong></p>16
</div>17
<div class="stats-box mx-1 indigo flex-fill wow fadeIn" data-wow-delay="0.5s">18
<p class="number">5,263</p>19
<p class="title"><strong>Downloads</strong></p>20
</div>21
<div class="stats-box teal flex-fill wow fadeIn" data-wow-delay="0.7s">22
<p class="number">3,560</p>23
<p class="title"><strong>Sales</strong></p>24
</div>25
</div>26
27
<!--Grid row-->28
<div class="row">29
30
<!--Grid column-->31
<div class="col-md-6">32
33
<span class="min-chart" id="chart-pageviews" data-percent="86"><span class="percent"></span></span>34
35
</div>36
<!--Grid column-->37
38
<!--Grid column-->39
<div class="col-md-6">40
41
<span class="min-chart" id="chart-sales" data-percent="56"><span class="percent"></span></span>42
43
</div>44
<!--Grid column-->45
46
</div>47
<!--Grid row-->48
49
<!--Grid row-->50
<div class="row d-flex justify-content-center">51
52
<!--Grid column-->53
<div class="col-md-6">54
55
<span class="min-chart" id="chart-downloads" data-percent="72"><span class="percent"></span></span>56
57
</div>58
<!--Grid column-->59
60
</div>61
<!--Grid row-->62
63
64
</div>65
66
</div>xxxxxxxxxx1
#mobile-box {2
width: 360px;3
height: 640px;4
padding: 1.2rem;5
border: 4px solid #000;6
background-color: #181C30;7
-webkit-border-radius: 10px;8
border-radius: 10px;9
color: #fff;10
text-align: center; }11
#mobile-box .wow {12
visibility: hidden; }13
#mobile-box a {14
color: #fff; }15
#mobile-box a:hover {16
color: #dfdfdf; }17
#mobile-box .stats-box,18
#mobile-box .chart-box {19
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);20
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);21
-webkit-border-radius: 5px;22
border-radius: 5px; }23
#mobile-box .stats-box {24
padding: 8px; }25
#mobile-box .stats-box p {26
margin-bottom: 0; }27
#mobile-box .stats-box p.number {28
font-size: 16px;29
font-weight: 500; }30
#mobile-box .stats-box p.title {31
font-size: 13px;32
font-weight: 200; }33
#mobile-box .chart-box {34
padding: 0.7rem;35
margin-bottom: 10px;36
background-color: rgba(255, 255, 255, 0.1); }37
#mobile-box .min-chart {38
margin-top: 0;39
margin-bottom: 0; }xxxxxxxxxx1
// Animations initialization2
new WOW().init();3
4
//Line chart5
var ctxL = document.getElementById("lineChart").getContext('2d');6
var gradientFill = ctxL.createLinearGradient(0, 0, 0, 90);7
gradientFill.addColorStop(0, "rgba(173, 53, 186, 1)");8
gradientFill.addColorStop(1, "rgba(173, 53, 186, 0.1)");9
var myLineChart = new Chart(ctxL, {10
type: 'line',11
data: {12
labels: ["4:00", "5:00", "6:00", "7:00", "8:00"],13
datasets: [14
{15
data: [0, 65, 45, 65, 75],16
backgroundColor: gradientFill,17
borderColor: [18
'#AD35BA',19
],20
borderWidth: 2,21
pointBorderColor: "#fff",22
pointBackgroundColor: "rgba(173, 53, 186, 0.1)"23
}24
],25
},26
options: {27
responsive: true,28
legend: {29
display: false30
},31
scales: {32
yAxes: [33
{34
ticks: {35
fontColor: "#d4d3da",36
fontStyle: 100,37
fontSize: 1038
}39
}40
],41
xAxes: [42
{43
ticks: {44
fontColor: "#d4d3da",45
fontSize: 1046
}47
}48
]49
}50
}51
});52
53
// Minimalist charts54
$(function () {55
$('.min-chart#chart-pageviews').easyPieChart({56
barColor: "#9E36AA",57
onStep: function (from, to, percent) {58
$(this.el).find('.percent').text(Math.round(percent));59
}60
});61
$('.min-chart#chart-downloads').easyPieChart({62
barColor: "#3059B0",63
onStep: function (from, to, percent) {64
$(this.el).find('.percent').text(Math.round(percent));65
}66
});67
$('.min-chart#chart-sales').easyPieChart({68
barColor: "#009588",69
onStep: function (from, to, percent) {70
$(this.el).find('.percent').text(Math.round(percent));71
}72
});73
}); Console errors: 0