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
}
}
}
});
Quisiera saber si hay algo que no estoy considerando a la hora de mandarle estos valores a mi chart.
Gracias,
datax
dentro de mi ciclo y en la petición agregardata: datax
?