0

Tengo un problema con una gráfica y necesito ayuda. Quiero graficar unos datos que son enviados con un arduino y un modulo de wifi a un servidor, primero los datos son enviados como un solo string de números separados por un espacio, así: "58 34 23 12". Luego con el método split los convierto a un array de string, así: ["58","34","23","12"]. Después con un for convierto cada string a int, así: [58,34,23,12] y al final creo un array con las coordenadas, así: [[1,58],[2,34],[3,23],[4,12]]. Estos datos llegan al servidor y los puedo mostrar por consola pero que aparezcan como un punto con coordenadas en el gráfico no me funciona. Estoy usando la librería Highcharts.

Código en Javascript

    function loadData(){
      var arr = []
      var xmlhttp = new XMLHttpRequest()
      xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200){
            var arr_str = this.responseText.split(' ')
            //Eliminar último elemento del array que esta vacío
            arr_str.pop()
            for(var i = 0; i < arr_str.length; i++){
              arr.push([i+1,parseInt(arr_str[i])])
            }
          }
          return arr
      }
      xmlhttp.open("GET", "/data", true)
      xmlhttp.send()
    }


    var data = loadData()


    Highcharts.chart('container', {
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'Tension medida con ESP32'
      },
      subtitle: {
        text: 'Puntos random'
      },
      tooltip: {
        valueDecimals: 2
      },
      xAxis: {
        title: {text: "Tension [V]"}
      },
      yAxis: {
        title: {text: "Tiempo [ms]"}
      },
      series: [{
        data: data,
        name: 'Grafica 1'
      }]
    });

Código HTML

    <!DOCTYPE html>
    <html lang="es">
       <head>
          <meta charset="utf-8">
          <title>Datos ESP32</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="icon" href="./img/favicon.ico">
          <script src="https://code.highcharts.com/highcharts.js"></script>
          <script src="https://code.highcharts.com/modules/boost.js"></script>
          <script src="https://code.highcharts.com/modules/exporting.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.0.4/modules/export-data.min.js"></script>
       </head>
       <body>
          <div id="container"></div>
       </body>
       <script src="./js/main.js"></script>
    </html>

Parte del código de Arduino

    String loadData(){
        String dataString = "";
          for (int i=0; i<5000; i++){
                  dataString += String(random(1,100));
                  dataString += " ";
          }
        return dataString;
    }
1
  • Quiza se deba a que estas enviando datos aleatorios entre 1 y 100 y quien sabe... la curva es muy abrupta, intentaste graficar los datos creando datos manualmente primero?, depronto es algo que no estamos viendo en Highcharts.
    – Layer
    Commented el 27 abr. 2020 a las 3:42

1 respuesta 1

1

Creo que se debe a que como estas usando ajax, se te ha olvidado que ajax es asincrono y javascript es sincrono... es decir, haciendo una explicación bastante cortada y resumida. ajax se esta ejecutando y la ejecución de tu código no se entretiene a esperar a ajax.

Simplemente deja que ajax se ejecute y pasa de largo hasta donde esta Highcharts.chart y pues casi siempre por no decir el 100% de las veces tu data aún no estará cargada, puesto que ajax aún no ha cargado esos datos.

Lo otro, es que se te esta olvidando obtener la respuesta por parte de ajax, si, se que la recoges como un responseText, pero enrealidad no estas retornandolo ya te explico mas adelante el porque.

Hay dos opciones entonces, la primera y mas sencilla es simplemente primero obtener la data traida por ajax cuando este cargada y dentro de la función load es decir, cuando ya este cargada la data, usar tu data con Highcharts.

En vez de usar el evento onreadystatechanged usar el onload:

function loadData(){
    var arr = []
    var xmlhttp = new XMLHttpRequest()

    xmlhttp.onerror = e =>{
        console.error(e);
    }

    //Usar onload para cuando la respuesta por parte de ajax ya este lista.
    xmlhttp.onload = function() {
        var arr_str = this.responseText.split(' ')
        //Eliminar último elemento del array que esta vacío
        arr_str.pop()
        for(var i = 0; i < arr_str.length; i++){
            arr.push([i+1,parseInt(arr_str[i])])
        }

        //Aquí mismo deberás usar tus datos con highcharts:
        Highcharts.chart('container', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Tension medida con ESP32'
            },
            subtitle: {
                text: 'Puntos random'
            },
            tooltip: {
                valueDecimals: 2
            },
            xAxis: {
                title: {text: "Tension [V]"}
            },
            yAxis: {
                title: {text: "Tiempo [ms]"}
            },
            series: [{
                data: data,
                name: 'Grafica 1'
            }]
        });

        /*
            Usar return aquí no significa que estes retornando esta
            data para la funcion loadData, la estas retornando para la
            función onload, en tu caso en tu código original
            la estabas retornando para la función readystatechanged pero no
            para la funcion loadData.
        */
        return arr;
    }

    xmlhttp.open("GET", "/data", true)
    xmlhttp.send()
}

Aviso de antemano: si quieres usar esta opción así (lo cual funcionaria), entonces nisiquiera intentes sacar tus datos de higchart de ahí adentro del onload para simplemente 'corregir' lo que explico del return, porque de todas maneras no te funcionaria, recuerda, ajax es asincrono.

La otra opción un poco mas elegante y que nos ayuda a controlar de mejor forma aquello que sea asincrono o una operacion que vaya a tardar un tiempo en completarse, es usando algo llamado promise, no te explicare que es una promise, pero te invito a que la vayas viendo para que te familiarices con ella, ya que las vas a usar muchísimo de ahora en adelante.

si deseas mas información al respecto sobre que es una promise, dejare en los comentarios una pregunta que respondí sobre estas que tambien tienen que ver con otro tema.

Entonces hagamos la operacion de promisificar tu ajax, para ello vamos a crear una promise dentro de tu función y la vamos a retornar directamente:

function loadData(){

    return new Promise((res, rej) =>{

        var arr = []
        var xmlhttp = new XMLHttpRequest()

        xmlhttp.onerror = e =>{
            //Usamos el 'return' de la promise si todo ha ido mal.
            rej(e);
        }

        //Usar onload para cuando la respuesta por parte de ajax ya este lista.
        xmlhttp.onload = function() {
            var arr_str = this.responseText.split(' ')
            //Eliminar último elemento del array que esta vacío
            arr_str.pop()
            for(var i = 0; i < arr_str.length; i++){
                arr.push([i+1,parseInt(arr_str[i])])
            }

            /*
                Aquí usamos el 'return' de la promise si todo ha ido bien.
            */
            res(arr);
        }

        xmlhttp.open("GET", "/data", true)
        xmlhttp.send()

    });

}

/*
    Como se devuelve una promise, hacer esto no es valido para lo que deseas,
    ya que estas almacenando dentro de data una promise y no la respuesta de ajax
    en sí, esta variable no la puedes usar directamente, tendrás que usar
    then y catch de parte de la promise que retorna nuestra función loadData
*/
//var data = loadData();

//De esta manera:
loadData().then(data =>{

    //Y aqui usar highcharts.
    Highcharts.chart('container', {
        chart: {
          zoomType: 'x'
        },
        title: {
          text: 'Tension medida con ESP32'
        },
        subtitle: {
          text: 'Puntos random'
        },
        tooltip: {
          valueDecimals: 2
        },
        xAxis: {
          title: {text: "Tension [V]"}
        },
        yAxis: {
          title: {text: "Tiempo [ms]"}
        },
        series: [{
          data: data,
          name: 'Grafica 1'
        }]
    });

}).catch(e =>{
    //En caso de error mostramos el error
    console.error(e);
});

Ahora bien, recuerda, una promise no se comporta como una función normal, es decir, no te va a devolver datos directamente, para poder acceder a estos datos deberas usar los metodos que provee la promise y dentro de estos siempre tendrás disponibles ya sea un error o tus datos ya correctamente cargados y listos para usar.

1

Tu Respuesta

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

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