Skip to main content
Error en comparación
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
// 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(typeof 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
                }
            }
        }
    });
}
// 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(typeof 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
                }
            }
        }
    });
}
// 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
                }
            }
        }
    });
}
Definir variables globales y destruir gráfica si ya se había creado previamente
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
// 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) {
    let// ctxSi =ya documentse creó la gráfica
    if(typeof myChart !== null) {
        // Destruir para poder crear nuevamente
        myChart.getElementByIddestroy('myChart');
    let}
    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
                }
            }
        }
    });
}
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) {
    let ctx = document.getElementById('myChart');
    let 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
                }
            }
        }
    });
}
// 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(typeof 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
                }
            }
        }
    });
}
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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.

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) {
    let ctx = document.getElementById('myChart');
    let 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
                }
            }
        }
    });
}