WEB Server Chart Does not Change

Using Arduino Programming Questions
1

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>
2

Welcome

Your code attaches 20 handlers to the same URI "/zAxis", it makes no sense because only the first handler will be called, as you noticed

Instead you should add a parameter to the request and have one handler use this parameter as the parameter of your function readAxis

3

Thank you for your attention. I'm new in this area and I do not understand clearly. How can I add parameter to the request? Please give me a little example?

4

I meant, something like this

// "/zAxis?id=[0-19]"
server.on("/zAxis", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    if ( request->hasParam( "id" ) )
    {
      int id = request->getParam( "id" )->value().toInt();
      
      if ( id >= 0 && id <= 19 )
      {
        request->send_P( 200, "text/plain", readAxis( id ).c_str() );
      }
    }
  }
);

But, I think it may be better if you sent all the values at once, as CSV that you can parse in your JS, so that you don't need to add a request parameter.

server.on("/zAxis", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send_P( 200, "text/plain", str ); // where str = "-12.51,-5.06,-5.49,etc"
  }
);
5

thank you :slight_smile: I will try both ways. If I succeed, I will add to comment

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.