search

puikinsh / Adminator-admin-dashboard

Adminator is easy to use and well design admin dashboard template based on Bootstrap 5 for web apps, websites, services and more
https://colorlib.com/polygon/adminator/index.html
MIT License
4.38k stars 1.73k forks source link

Charts added using charts.js are not animating on page load (or at any other time). #276

Open kknd4eva opened 3 years ago

kknd4eva commented 3 years ago

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>
jepperaskdk commented 2 years ago

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.