0

**Cómo llenar de forma dinámica los campos de un Pie Chart en chartJS utilizando php y mysql ** ¡saludos a todos desarrolladores!espero que alguien pueda orientarme ya busqué documentacion y videotutoriales pero nada. tengo un ejemplo de la librería ChartJS pero en ella los datos son estáticos mi pregunta es como hacerlo de forma dinámica p. ejemplo: que se creen las particiones necesarias de acuerdo al número de registros encontrados. ya lo logré con grafico de barras y grafico lineal pero no entiendo como hacerlo con "grafico de pastel" comparto el ejemplo de la librería.

<html>
<head>
    <title>Pie Chart</title>
    <script src="../Chart.js"></script>
</head>
<body>
    <div id="canvas-holder">
        <canvas id="chart-area" width="300" height="300"/>
    </div>


<script>

    var pieData = [ //pienso que aqui va la consulta y despues convertirla en array
            // despues borrar todo lo de abajo donde estan las características de las piezas y 
              //hacerlo con un ciclo for o algo asi
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            },
            {
                value: 40,
                color: "#949FB1",
                highlight: "#A8B3C5",
                label: "Grey"
            },
            {
                value: 120,
                color: "#4D5360",
                highlight: "#616774",
                label: "Dark Grey"
            }

        ];

        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myPie = new Chart(ctx).Pie(pieData);
        };



</script>
</body>

llene algunos datos para probar, mi consulta quedó de la siguiente manera:

select count(Asistencia),pasalista.Asistencia, alumnos.A_grado, alumnos.A_grupo from pasalista inner join alumnos on pasalista.A_Ncontrol=alumnos.A_Ncontrol where asistencia="f" group by asistencia,A_grado,A_grupo;

y este fue el resultado:

resultado de la consulta

entonces la grafica deberia dividirse automaticamente en solo dos partes una con el porcentaje respectivo de cada valor

2
  • ¿De dónde vas a obtener los datos y qué es lo que vas a poner en cada elemento te la gráfica? Edita la pregunta para agregar la consulta y qué has intentado para crear la lista de datos.
    – Triby
    Commented el 11 sept. 2020 a las 21:14
  • De una base de datos mysql, el campo pasaLista registra Asistencia, Falta, Retardo y Permiso, según sea el caso para la Id de cada alumno. Lo que quiero obtener y que se muestre es la cantidad de faltas por grado y grupo. Mi problema no está en hacer la consulta sino en el manejo de los datos recibidos producto de la consulta.
    – RodCas
    Commented el 12 sept. 2020 a las 19:45

1 respuesta 1

0

Trabajando en el proyecto he llegado a una respuesta parcial, despues de obtener el resultado de la consulta mediante un foreach, hago que "una rebanada" del pastel se repita las veces necesarias segun el numero de registros obtenidos de la consulta. y el valor será un parseInt del json_encode de cada registro($item), eso me crea la gráfica aunque me falta cambiar los colores de cada pieza del pastel y la etiqueta. sin embargo el objetivo fundamental se logró.

     $result = mysqli_query($cone,$sql);
   while ($registros = mysqli_fetch_array($result)){
    $barra["barras"]=$registros["count(Asistencia)"]; 
    foreach ($barra as $item) { ?> 
            {
            
                    value:parseInt(<?php echo json_encode($item)?>,10),
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },


    <?php } 
}?>

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.