1

Hola tengo un problema con ChartJS, es el siguiente estoy tratando de hacer un gráfica dinámica muy sencilla, que trae datos desde la base de datos, ya traigo correctamente los datos de la base de datos y se visualizan de la siguiente manera.

introducir la descripción de la imagen aquí

El primer dato en consola es la data sin procesar traida de la base de datos lo que hice fue hacer una variabla array y hacer un push de los valores a ella para que me quedara como ChartJS lo pide, una vez tuve la variable la puse en data: y no carga los datos, adjunto mi codigo js y del servidor.

$(document).ready(function() {
        var inspection_id = $('#inspection_id').val();
        var data = [];
        var buenas = null;
        var malas = null;
        var piezas = [];

        axios.get(`http://localhost/sorteo/public/revisions/getpieces/${inspection_id}`).then(response => {
            data = response.data;

            console.log(data);
            buenas = data.piezas_buenas;
            malas = data.piezas_malas;
            piezas.push(buenas, malas);
            console.log(piezas);
        }).catch(response => {
            console.log(response);
        })

        var ctx = document.getElementById('badAndGoodpieces');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Piezas mal', 'Piezas bien'],
                datasets: [{
                    label: 'Numero de piezas',
                    data: piezas
                }]
            }
        });
    });

Este es el resultado en la vista. Como ven no se imprimen los datos. introducir la descripción de la imagen aquí

Aqui esta mi controlador de la base de datos por si lo requieren.

public function getPieces($id){
    $revisions = Revision::where('inspection_id', $id)->get();

    $piezas_buenas = 0;
    $piezas_malas = 0;

    foreach ($revisions as $revision) {
        $piezas_buenas += $revision->good_pieces;
        $piezas_malas += $revision->bad_pieces;
    }

    $data = [
        'piezas_malas' => $piezas_malas,
        'piezas_buenas' => $piezas_buenas
    ];

    return response()->json($data, 200);
}
2
  • Necesitas poner la declaracion del Chart dentro de la funcion get
    – alanfcm
    Commented el 3 oct. 2019 a las 17:24
  • 1
    Muchas gracias!! funciono perfecto, podrías explicarme a que se debe? y podrias ponerlo como respuesta para darla como correcta? Commented el 3 oct. 2019 a las 17:27

1 respuesta 1

0

Necesitas poner al declaracion del Chart dentro de la funcion get asi:

$(document).ready(function() {
        var inspection_id = $('#inspection_id').val();
        var data = [];
        var buenas = null;
        var malas = null;
        var piezas = [];

        axios.get(`http://localhost/sorteo/public/revisions/getpieces/${inspection_id}`).then(response => {
            data = response.data;

            console.log(data);
            buenas = data.piezas_buenas;
            malas = data.piezas_malas;
            piezas.push(buenas, malas);
            console.log(piezas);
            var ctx = document.getElementById('badAndGoodpieces');
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: ['Piezas mal', 'Piezas bien'],
                datasets: [{
                    label: 'Numero de piezas',
                    data: piezas
                }]
              }
          });
        }).catch(response => {
            console.log(response);
        })

    });

La razon es porque get es una funcion asincronica, lo que significa que se ejecuta al mismo tiempo que el resto del codigo. Al llegar a la declaracion del Chart la variable piezas no ha recibido su valor.

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.