adcfi/pages/graph.html

<form action="/" method="post">
    <input type="hidden" name="page" value="menu">
    <button class="btn btn-primary mb-4">
        <i class="fas fa-arrow-left"></i> Regresar
    </button>
</form>
<main class="container">
    <form class="mb-4">
        <div class="row mb-3 form-box">
            <label for="item.value" class="col-sm-1 col-form-label form-group barra">Alumno</label>
            <div class="col-sm-10">
                <input type="item.type" name="item.name" list="item.name" id="item.value" class="form-control col-form-label">
                <datalist id="item.name">
                    <option value="option.id">Alumno_nombre</option>
                </datalist>
            </div>
            <button type="reset" class="btn btn-danger btn-sm col-sm-1">
                <i class="fas fa-eraser"></i>
            </button>
        </div>
    </form>

    <section>
        <h2>Gráficos</h2>
        <div class="row">
            <div class="col-md-6">
                <canvas id="chart1" width="400" height="400"></canvas>
            </div>
            <div class="col-md-6">
                <canvas id="chart2" width="400" height="400"></canvas>
            </div>
        </div>
    </section>
</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const ctx1 = document.getElementById('chart1').getContext('2d');
        const chart1 = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    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: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        const ctx2 = document.getElementById('chart2').getContext('2d');
        const chart2 = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>