Tengo el siguiente problema Estoy haciendo una estadística donde trago los datos por medio ajax desde un php Hasta aca todo funciona bien. El problema es cuando quiero colocar los datos guardados en una variable de javascript en el script de la estadistica Dejo el código para que se entienda mejor
Este el el ajax que trae el resultado
var datos;
$(document).ready(function () {
$.ajax({
url: "consultas.php",
success: function (response) {
datos = response;
console.log(datos);
},
});
});
Y este el es código que genera la estadística
var ctx1 = $("#worldwide-sales").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
type: "bar",
data: {
labels: [datos], // aca está el problema
datasets: [
{
label: "USA",
data: [15, 30, 55, 65, 60, 80, 95],
backgroundColor: "rgba(0, 156, 255, .7)",
},
{
label: "UK",
data: [8, 35, 40, 60, 70, 55, 75],
backgroundColor: "rgba(0, 156, 255, .5)",
},
{
label: "UK",
data: [8, 35, 40, 60, 70, 55, 75],
backgroundColor: "rgba(0, 156, 255, .5)",
},
{
label: "AU",
data: [12, 25, 45, 55, 65, 70, 60],
backgroundColor: "rgba(0, 156, 255, .3)",
},
],
},
options: {
responsive: true,
},
});
En la linea que marco que está el problema es donde no me esta mostrando el contenido de la variable "datos"
El contenido que tiene datos es esta cadena: "2016", "2017", "2018", "2019", "2020", "2021", "2022"
Si yo copio y pedo esa cadena reemplazando la variable, anda perfecto. Es como que no lee el contenido de la variable o definitivamente la estoy llamando mal en ese lugar
Espero puedan ayudarme Gracias
Actualziació: Agrego el código modificado con error al llamar a la function
var datos;
$(document).ready(function() {
$.ajax({
url: "consultas.php",
success: function(response) {
datos = response;
estadistica(datos);
},
});
});
function estadistica(datos) {
var ctx1 = $("#worldwide-sales").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
type: "bar",
data: {
labels: [datos],
datasets: [
{
label: "USA",
data: [15, 30, 55, 65, 60, 80, 95],
backgroundColor: "rgba(0, 156, 255, .7)",
},
{
label: "UK",
data: [8, 35, 40, 60, 70, 55, 75],
backgroundColor: "rgba(0, 156, 255, .5)",
},
{
label: "UK",
data: [8, 35, 40, 60, 70, 55, 75],
backgroundColor: "rgba(0, 156, 255, .5)",
},
{
label: "AU",
data: [12, 25, 45, 55, 65, 70, 60],
backgroundColor: "rgba(0, 156, 255, .3)",
},
],
},
options: {
responsive: true,
},
});
}
El problema ahora es como que lo coloca al texto pero como literal al parecer, no es que lo toma como array. Dejo dos imágenes.
En la primer imagen es si escribo el texto directo en la label labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
En la segunda imagen es si lo traigo por la variable javascript
No se que puede ser realmente
datos
esundefined
. Así funciona la asincronía en javascript. Para solucionarlo, mete el código de la gráfica dentro del callback desuccess
. Alternativamente mete el código de la gráfica en una función que reciba una variabledatos
y llama esa función dentro de success.