Adminator-admin-dashboard
Adminator-admin-dashboard copied to clipboard
Published
20 hours ago •
puikinsh
puikinsh
Charts added using charts.js are not animating on page load (or at any other time).
I love this template by the way, but for some reason I can't get any of my added charts to animated as they should when the page loads. An example of one of my pages is below. I would expect line-chart-orders to animate on page load using the javascript provided. But the chart is static. It doesn't matter what animation options I try to use, this happens for any chart and chart type (I've experimented with a few). Is there something disabled globally in this dashboard package for some reason?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>
Sales Order Monitor - {% block title %}{% endblock %}
</title>
<style type="text/css">
chartdiv {
/*width:calc(100vw - 40px);*/
width: 293px;
/*height: calc(100vh - 40px);*/
height: 186px;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
margin: 20px;
}
</style>
<style type="text/css">
chartdivlong {
/*width:calc(100vw - 40px);*/
/*width: 1172px;*/
/*height: calc(100vh - 40px);*/
/*height: 744px;*/
background-color: #fff;
padding: 10px;
box-sizing: border-box;
margin: 20px;
}
</style>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0)
}
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
<link href="/static/assets/style.css" rel="stylesheet">
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}
</head>
<body class="app">
<!-- @TOC -->
<!-- =================================================== -->
<!--
+ @Page Loader
+ @App Content
- #Left Sidebar
> $Sidebar Header
> $Sidebar Menu
- #Main
> $Topbar
> $App Screen Content
-->
<!-- @Page Loader -->
<!-- =================================================== -->
<div id="loader">
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', function load() {
const loader = document.getElementById('loader');
setTimeout(function () {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<!-- @App Content -->
<!-- =================================================== -->
<div>
{% include 'includes/sidebar.html' %}
<!-- #Main ============================ -->
<div class="page-container">
{% include 'includes/navigation.html' %}
<!-- ### $App Screen Content ### -->
<main class="main-content bgc-grey-100">
<div id="mainContent">
{% block content %}
<div class="row gap-20">
<!-- #Toatl Visits ==================== -->
<div class="col-md-6">
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Today's Orders By Type</h6>
<div class="chartdiv">
<canvas id="ordersByTypeChart" width="273" height="229"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="layers bd bgc-white p-20">
<div class="bgc-white-500 c-grey p-20">
<div class="peers ai-c jc-sb gap-10">
<div class="peer peer-greed">
<h5>Avg Basket Size</h5>
<p class="mB-0">Quantity</p>
</div>
<div class="peer">
<h1 class="text-end">{{qty}} items</h1>
</div>
<div class="peer">
<i class="c-indigo-500 ti-briefcase" style="font-size: 5.73em;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="layers bd bgc-white p-20">
<div class="bgc-white-500 c-grey p-20">
<div class="peers ai-c jc-sb gap-10">
<div class="peer peer-greed">
<h5>Avg Basket Variety</h5>
<p class="mB-0">Distinct Products</p>
</div>
<div class="peer">
<h1 class="text-end">{{sku}} SKUs</h1>
</div>
<div class="peer">
<i class="c-indigo-500 ti-briefcase" style="font-size: 5.73em;"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="layers bd bgc-white p-20">
<div class="layer w-100 mB-10">
<h6 class="lh-1">Orders Per Day (Past 30 Days)</h6>
<div class="layer w-100 p-20">
<div class="chartdivlong">
<canvas id="line-chart-orders" width="1172" height="500"></canvas>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
</div>
</main>
{% include 'includes/footer.html' %}
</div>
<script type="text/javascript" src="/static/assets/vendor.js"></script>
<script type="text/javascript" src="/static/assets/bundle.js"></script>
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
const labels = [
'ClickAndCollect',
'ClickAndDeliver',
'Redirect'
];
const data = {
labels: labels,
datasets: [{
label: 'Orders by type',
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
data: {{ ordersByType | tojson }},
}]
};
const config = {
type: 'pie',
data: data,
animationEnabled: true,
animation: {easing: 'easeInCirc'},
options: {
maintainAspectRatio: false,
layout: { padding: { right: 10 } },
}
};
var myChart = new Chart(
document.getElementById('ordersByTypeChart'),
config
);
</script>
<script>
const labels2 = {{ by_day_label | tojson }};
const data2 = {
labels: labels2,
datasets: [{
label: 'Orders',
borderColor: "rgb(255, 205, 86)",
fill: false,
data: {{ by_day | tojson }},
}]
};
const config2 = {
type: 'line',
data: data2,
animationEnabled: true,
options: {
animations: {
tension: {
duration: 1000,
easing: 'linear',
from: 1,
to: 0,
loop: true
}
},
maintainAspectRatio: false,
layout: { padding: { right: 10 } },
scales: {
x: {
grid: {
drawOnChartArea:false
}
},
y: {
grid: {
drawOnChartArea:false
}
}
}
}
};
var myChart2 = new Chart(
document.getElementById('line-chart-orders'),
config2
);
</script>
{% endblock javascripts %}
</body>
</html>
From this issue: https://github.com/chartjs/Chart.js/issues/5560
It explains that the animation may not work when fired immediately, and content not yet having a size. In this case, probably because of the loader-icon of this theme. You should be able to get an animation if you delay creating the chart, until you know it has been given a size. You can try adding a timeout like this:
setTimeout(() => {
var myChart2 = new Chart(
document.getElementById('line-chart-orders'),
config2
);
], 1000);
Maybe there's a clever way to do it without an explicit timeout.
