index.html

{% extends 'partials/base.html' %}
{% block title %}Home Page{% endblock %}

{% block content %}
{% if user.is_authenticated and user.is_staff and user.is_superuser %}
{% include 'partials/topside.html' %}
<div class="row ">
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart1" width="400" height="300"></canvas>
                <script>
                    var ctx = document.getElementById('myChart1').getContext('2d');
                    var myChart1 = new Chart(ctx, {
                        type: 'pie',
                        data: {
                            labels: [{% for product in product %} '{{product.name}}', {% endfor %}],
                    datasets: [{
                        label: 'Number of Products',
                        data: [{% for product in product %} {{ product.quantity }}, {% endfor %}],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                                borderWidth: 1
                    }]
                        },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                    });
                </script>
            </div>
        </div>
    </div>
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart" width="400" height="300"></canvas>
                <script>
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [{% for order in order %} '{{order.name}}',{% endfor %}],
                    datasets: [{
                        label: 'Orders',
                        data: [{% for order in order %} {{ order.order_quantity }}, {% endfor %}],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                                borderWidth: 1
                    }]
                        },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                    });
                </script>
            </div>
        </div>
    </div>
</div>
{% else %}
{% include 'dashboard/customer_index.html' %}
{% endif%}

{% endblock %}