Gráficas diferentes

pages/graph.html

@@ -29,7 +29,8 @@
                 <label for="alumno" 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="alumno"
-                        class="form-control col-form-label" @input="fetchDatos" v-model="filter.username">
+                        class="form-control col-form-label" @input="fetchDatos" v-model="filter.username"
+                        placeholder="Nombre o clave del alumno">
                     <datalist id="item.name">
                         <option v-for="alumno in alumnos_por_grupo" :value="alumno.username">
                             {{ alumno.nombre }}
@@ -50,17 +51,18 @@
                     @vue:mounted="createMultiLineGraph($el, datos.snapshots)">
             </div>
             <div class="col-md-8">
-                <canvas id="calificaciones" width="400" height="400" @vue:mounted="createGraph($el,
+                <div id="calificaciones" width="400" height="400" @vue:mounted="createGraph($el,
                     datos.calificaciones.map(calificacion => calificacion.course_name),
-                    datos.calificaciones.map(calificacion => calificacion.calificación_final),
-                    'bar', 'Calificaciones')">
+                    datos.calificaciones.map(calificacion => calificacion.calificación_final))">
+                </div>
             </div>
-
         </div>
     </section>
 </main>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+
 <script>
     const filter = PetiteVue.reactive({
         grupo: null,
@@ -97,6 +99,7 @@
             store.loading = false;
         },
         createGraph($el, labels, data) {
+
             const colors = [
                 'rgba(54, 162, 235, 0.7)', // Blue
                 'rgba(255, 99, 132, 0.7)', // Red
@@ -104,18 +107,14 @@
                 'rgba(255, 206, 86, 0.7)', // Yellow
                 'rgba(75, 192, 192, 0.7)', // Green
                 'rgba(153, 102, 255, 0.7)', // Purple
-                'rgba(201, 203, 207, 0.7)', // gray
-            ]
-            var options = {
-                
+                'rgba(201, 203, 207, 0.7)', // Gray
+            ];
+            const options = {
                 series: [{
-                    data: data.map((d, index) => {
-                        return {
-                            x: labels[index],
-                            y: d,
-                            fillColor: colors[colors.length % index]
-                        }
-                    })
+                    data: data.map((data, index, array) => ({
+                        ...data,
+                        fillColor: colors[array.length % index]
+                    })),
                 }],
                 chart: {
                     type: 'bar',
@@ -124,7 +123,7 @@
                 plotOptions: {
                     bar: {
                         borderRadius: 4,
-                        distributed: true // This will apply individual colors to each bar
+                        // horizontal: true, // Uncomment or comment based on desired orientation
                     }
                 },
                 dataLabels: {
@@ -135,8 +134,9 @@
                 },
                 yaxis: {
                     min: 0,
-                    max: 1 // Ensures y-axis scales to a max of 1
-                }
+                    max: 1, // Ensures y-axis scales to a max of 1
+                    tickAmount: 5, // Optional: Adjusts the number of ticks on the y-axis
+                },
             };
 
             var chart = new ApexCharts($el, options);