0

Estoy tratando de obtener gráfico de ApexChart donut, desde una tabla de MySQL como se muestra continuación

introducir la descripción de la imagen aquí

Esta es la consulta que uso:

SELECT COUNT(*) as total, COUNT(IF(status = 0, 1, NULL)) as resueltas, COUNT(*) - COUNT(IF(status = 0, 1, NULL)) as pendientes, COUNT(IF(status = 2, 1, NULL)) as reabietas FROM incidences

Y me muestra este resultado:

introducir la descripción de la imagen aquí

Quisiera mostrar el resultado de la tabla en un grafico apexchart donut, este es el ejemplo base: https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/

Este es el código que tengo hasta el momento, pero aun no se como usarlo con exactitud

Esta consulta es la que tengo en mi controlador

$incidences_circule = DB::select('SELECT COUNT(*) as total, COUNT(IF(status = 0, 1, NULL)) as resueltas, COUNT(*) - COUNT(IF(status = 0, 1, NULL)) as pendientes, COUNT(IF(status = 2, 1, NULL)) as reabietas FROM incidences WHERE MONTH(start) = MONTH(CURRENT_DATE()) AND YEAR(start) = YEAR(CURRENT_DATE())');
    

<script>
  var options = {
          series: [<?php foreach($incidences_circule as $reg){echo ''.$reg->total',';} ?>],
          chart: {
          type: 'donut',
        },
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
        };

        var chart = new ApexCharts(document.querySelector("#circle-chart"), options);
        chart.render();
</script>

1 respuesta 1

1

tienes un problema al generar tu array, si lo haces con la función actual, te generara comas de mas y podría darte errores de sintaxis. puedes usar la siguiente forma, utilizando solo la función json_encode() pasándole como parámetro tu array, utilizando array_values() para obtener un array de los valores de los atributos de tu array y array_keys() para obtener un array solo con el nombre de los atributos y asi poder alimentar al script como te lo solicita

var options = {

series: [10,20,20,25,25], //eliminar esto
//series: <?php echo json_encode(array_values($incidences_circule)); ?>,


labels: ["aa","bb","cc","dd","ee"], //eliminar esto
//labels: <?php echo json_encode(array_keys($incidences_circule)); ?>,

chart: {
    type: 'donut',
},
responsive: [{
    reakpoint: 480,
    options: {
       chart: {
           width: 200
       },
       legend: {
           position: 'bottom'
      }
    }
   }]
};

var chart = new ApexCharts(document.querySelector("#circle-chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="circle-chart" >
 
</div>

10
  • Aun sigo teniendo problemas, no me muestra la gráfica.
    – Will Az
    el 18 sep. 2020 a las 2:09
  • ¿que te imprime $incidences_circule ? y ¿tienes el elemento con la id circle-chart?, ¿que error te arroja la consola? el 18 sep. 2020 a las 2:11
  • mejore el ejemplo de la respuesta que puse el 18 sep. 2020 a las 2:17
  • usando el ejemplo de la web oficial si logro cargar los datos de prueba, pero cuando uso mi consulta $incidences_circule hace conflicto con apexchart
    – Will Az
    el 18 sep. 2020 a las 3:08
  • Puedes imprimir tu arreglo para ver qué arroja? el 18 sep. 2020 a las 3:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.