1

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.

Así es si escribo el texto directo en la label labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],

Así es si lo traigo por la variable javascript

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

2
  • 1
    Los datos que se traen de la petición no están disponibles hasta que el servidor responda. Pero para cuando el servidor responda, ya el código de la gráfica se habrá ejecutado y habrá explotado porque datos es undefined. Así funciona la asincronía en javascript. Para solucionarlo, mete el código de la gráfica dentro del callback de success. Alternativamente mete el código de la gráfica en una función que reciba una variable datos y llama esa función dentro de success. el 16 jun. 2022 a las 3:43
  • gracias por responder. Hice lo que me has dicho y funciona pero no me muestra bien el grafico. Tienes idea que es lo que está mal ? el 16 jun. 2022 a las 10:24

1 respuesta 1

1

Los datos que se traen de la petición no están disponibles hasta que el servidor responda. Pero para cuando el servidor responda, ya el código de la gráfica se habrá ejecutado y habrá explotado porque datos es undefined. Así funciona la asincronía en javascript.

Para solucionarlo, mete el código de la gráfica dentro del callback de success. Alternativamente mete el código de la gráfica en una función que reciba una variable datos y llama esa función dentro de success.


Actualización

La variable datos ya es un array, por tanto, cuando pones labels: [datos] estás metiendo un array dentro de un array, por eso no te sale bien la gráfica. Para solucionarlo, usa simplemente labels: datos. Te adjunto un ejemplo:

var datos = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
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,
        },
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>

 <canvas id="worldwide-sales"></canvas>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.