1

Estoy tratando de ver reflejados en un gráfico de barras, usando la librería Chart.js, los valores de una variable a medida va cambiando en una petición AJAX.

He visto esta respuesta Como fazer gráfico dinâmico chartjs com php en la que el usuario manda los valores a un arreglo pero no lo hace directamente desde un .json entonces tengo mis dudas sobre como hacerlo en javascript.

Si declaro directamente la variable ejemplo var prueba=50 y agrego esa variable directamente en data la librería me la reconoce sin problemas y el grafico cambia a medida yo cambio en el backend el valor de prueba.

var ctx = document.getElementById('myChart');
var prueba=50;

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['', 'Without=', 'With'],
        datasets: [{
            label: 'Lump sum',
            data: [0, 40 , prueba],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                '#322c83',
                '#ea7123'
            ]
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Sin embargo cuando asigno el valor a la variable a partir de un evento cargar, en consola me dice que la variable que le estoy mandando a data es indefinida y se desaparece mi gráfico. Ya me he asegurado que el tipo de la variable sea de tipo number.

Edit : He intentado crear un arreglo de valores dentro de mi ciclo for, para luego asignar ese arreglo a mi atributo data de mi petición, código modificado y la respuesta en consola sigue siendo que mi variable $datax es indefinida.

function cargar() {
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) {

        var obj = JSON.parse(xhttp.responseText);
        console.log(obj);

        let respuesta = document.getElementById("datos");
        respuesta.innerHTML += 'Cambio realizado | ';

        for (let i in obj) {

            if (obj[i].age == rangeval) {
                console.log(obj[i]);
                console.log("HA SELECCIONADO ESTA EDAD");

                $current_age = parseInt(obj[i].age);
                $current_male = parseInt(obj[i].liveMale);
                $current_female = parseInt(obj[i].liveFemale);

                //Arreglo de valores
                $datax = [0, 30, $current_age];

                // Values Type
                console.log(typeof $current_age);
                console.log(typeof $current_male);
                console.log(typeof $current_female);

            }

        }
    }
};

xhttp.open("GET", "livenumbers.json", true);
xhttp.send();

}

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['', 'Without', 'With'],
        datasets: [{
            label: 'Lump sum',
            data: datax,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                '#322c83',
                '#ea7123'
            ]

        }]

    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

introducir la descripción de la imagen aquí

Archivo .json

Quisiera saber si hay algo que no estoy considerando a la hora de mandarle estos valores a mi chart.

Gracias,

2
  • Parece que la gráfica consiste solo en 3 valores, dos son estáticos y el tercero... ¿debes ir acumulando edad o es promedio? De cualquier forma, arma los datos dentro de la petición AJAX y genera la gráfica ahí mismo, después del ciclo.
    – Triby
    Commented el 9 jul. 2021 a las 21:15
  • Hola Triby, gracias por tu comentario, solamente el primer valor quedara estatico en 0, los otros 2 van a variar dependiendo de ciertos parametros y uno de ellos es el Value del Range button, a ver si entiendo: puedo crear el arreglo en la variable datax dentro de mi ciclo y en la petición agregar data: datax ?
    – Ragnar
    Commented el 9 jul. 2021 a las 21:21

1 respuesta 1

1

El problema es que estás ejecutando una petición AJAX para obtener la información que vas a mostrar en la gráfica, pero la respuesta va a tardar y no esperas la respuesta, por eso es que no puedes usar la variable fuera de la petición.

La opción es, ejecutar la petición y, solo hasta que hayas obtenido la respuesta, crear la gráfica y te recomiendo que lo hagas en otra función.

Por otra parte, si solo estás usando un objeto de todo el JSON recibido, te recomiendo usar el método .find() en lugar de crear un ciclo.

// Define variables globales (fuera de funciones)
let ctx = document.getElementById('myChart');
let myChart = null;

// Si necesitas algo al cargar la página, solo ejecuta la función
// Asigna los valores deseados
crearGrafica(0, 40, 0);

function cargar() {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 & this.status == 200) {
            let obj = JSON.parse(xhttp.responseText);
            console.log(obj);

            let respuesta = document.getElementById("datos");
            respuesta.innerHTML += 'Cambio realizado | ';
            
            // Busca el primer objeto que coincida en lugar de recorrer
            let filtro = obj.find(item => item.age == rangeval);
            // Asignar valor (o cero, si no se encontró)
            let currentAge = (filtro) ? parseInt(filtro.age) : 0;

            /**
             * IMPORTANTE: Ya tienes un parámetro (currentAge)
             *
             * ¿Necesitas otro?
             * Asegúrate de obtenerlo y después crea la gráfica
             */

            // Ejecuta una función para crear la gráfica
            crearGrafica(0, 40, currentAge);
        }
    };
    xhttp.open("GET", "livenumbers.json", true);
    xhttp.send();
}

function crearGrafica(valor1, valor2, valor3) {
    // Si ya se creó la gráfica
    if(myChart !== null) {
        // Destruir para poder crear nuevamente
        myChart.destroy();
    }
    myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['', 'Without', 'With'],
            datasets: [{
                label: 'Lump sum',
                data: [valor1, valor2, valor3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    '#322c83',
                    '#ea7123'
                ]
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}
4
  • Hola Triby, muchas gracias por tu respuesta entiendo ahora cual es el problema, solo hay dos cositas que me gustaría solucionar, 1) El primer valor me lo carga bien, pero al segundo me muestra un error en consola Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. y 2) hay forma de cargar el grafico al cargar la pagina? ya que si antes de la funcion agrego crearGrafica(0, 40, 50) esto impide que ejecute la funcion cargar. Gracias nuevamente.
    – Ragnar
    Commented el 9 jul. 2021 a las 22:28
  • @Nor, revisa el código, actualicé la respuesta para poder lograrlo.
    – Triby
    Commented el 9 jul. 2021 a las 22:39
  • Hola Triby, gracias por la actualizacion estoy experimentando un error al cargar la pagina por primera vez Uncaught TypeError: Cannot read property 'destroy' of null he visto que es un error que se cerro en github pero no entiendo donde esta el pull request que soluciona el error.
    – Ragnar
    Commented el 9 jul. 2021 a las 22:52
  • @Nor, error mío en la condicional, sobraba el typeof.
    – Triby
    Commented el 9 jul. 2021 a las 23:04

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.