I have been trying web server using Arduino İDE and ESP32. I want my web server graph to plot my list data (double vRealCustom[samples]). I draw a graph but the graph didn’t change. It always plots to the first variable in the list(-12.51). I see temAxis is change from the serial monitor. Where do you think I went wrong?
It is my .ino code:
#include <Wire.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
const uint16_t samples = 20;
double vRealCustom[samples] = {
-12.51, -5.06, -5.49, -8.55, -7.37, -8.08, -5.73, -10.59,
-11.81, -3.49, -2.79, -15.42, -16.83, -2.12, -17.06, -17.34,
-2.35, -16.83, -16.55, -15.3
};
const char* ssid = "********";
const char* password = "*******";
AsyncWebServer server(80);
String readAxis(uint16_t j)
{
float t = vRealCustom[j];
Serial.print("t ->"); Serial.println(t);
return String(t);
}
void setup(void)
{
#ifndef ESP8266
while (!Serial); // for Leonardo/Micro/Zero
#endif
Serial.begin(115200);
// Initialize SPIFFS
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
server.begin();
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html");
});
for(uint16_t j = 0; j<20;j++ ){
delay(400);
String tempAxis = readAxis(j);
Serial.println(tempAxis);
server.on("/zAxis", HTTP_GET, [=](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", tempAxis.c_str());
delay(400);
});}
}
void loop(void)
{
}
It is my javascript code:
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
</head>
<body>
<h2>EXAMPLE</h2>
<div id="chart-zAxis" class="container"></div>
</body>
<script>
var chartZAxis = new Highcharts.Chart({
chart:{ renderTo:'chart-zAxis' },
title: { text: 'Z Axis' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
marker: {
enabled: false,
dataLabels: { enabled: true }
}
},
series: { color: '#27F416' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Z Axis' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = parseFloat(this.responseText);
if(chartZAxis.series[0].data.length > 40) {
chartZAxis.series[0].addPoint([x, y], true, true, true);
} else {
chartZAxis.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/zAxis", true);
xhttp.send();
}, 800 ) ;
</script>
</html>