{% extends 'base.html' %}

{% block content %}

<div class="container-xl">

    <h1 class="app-page-title">Gráficos</h1>

    <div class="app-card app-card-notification shadow-sm mb-4">
        <div style="width: 50%; margin: 0 auto;">
            <canvas id="myChart"></canvas>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                fetch('/apuntes/apuntes/chart-data/')
                    .then(response => response.json())
                    .then(data => {
                        const ctx = document.getElementById('myChart').getContext('2d');

                        new Chart(ctx, {
                            type: data.chart_type,
                            data: {
                                labels: data.labels,
                                datasets: [{
                                    label: data.label,
                                    data: data.values,
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    });
            });
        </script>
    </div>
</div>

{% endblock %}