I am trying to see reflected in a bar graph, using the library Chart.js
, the values of a variable as it changes in an AJAX request.
I have seen this answer How to make a dynamic chart chartjs com php in which the user sends the values to an array but does not do it directly from a .json so I have my doubts about how to do it in javascript.
If I directly declare the example variable var prueba=50
and add that variable directly to data
the library, it recognizes it without problems and the graph changes as I change the value of 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
}
}
}
});
However, when I assign the value to the variable from an event cargar
, the console tells me that the variable I am sending to data
is undefined and my graph disappears. I have already made sure that the type of the variable is of type number
.
Edit : I have tried to create an array of values within my for loop, then assign that array to my attribute data
of my request, modified code and the console response is still that my variable $datax
is undefined.
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
}
}
}
});
I would like to know if there is something that I am not considering when sending these values to my chart.
Thank you,
The problem is that you are executing an AJAX request to obtain the information that you are going to show in the graph, but the response will take time and you do not wait for the response, that is why you cannot use the variable outside the request.
The option is to execute the request and, only until you have obtained the response, create the graph and I recommend that you do it in another function.
On the other hand, if you're just using one object from all the received JSON, I recommend using the .find() method instead of creating a loop.