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;
}