Real time graph for data logging

While scowering the internet for some hardware info on data logging i came upon a logging program (using chartjs) that seemed interesting at first, but that kept crashing my ESP8266 the moment the webpage was loaded. So I set out to find the fault and fix it. In the end it involved altering the entire structure of the program. (Edit: their program will work correctly if in the ‘void handleRoot()’ routine, they had changed String s = MAIN_page; to be String s = FPSTR(MAIN_page);.
Another issue with that program was that it loaded 4 fake values before it started recording some real values. This was obviously done to have some initial values in the graph during the first interval time. There is a better way to do that so I fixed that too. Finally, I made it suitable to be viewed on a tablet or phone as well.

This is the final program: (note, there is a mistake in the html because wordpress cannot display it correctly. Best get the file here.

/*
 * ESP8266 NodeMCU Real Time Graphs Demo
 * Updates and Gets data from webpage without page refresh
 */
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

#define LED 2  //On board LED

//SSID and Password of your WiFi router
const char* ssid = "YourSSID";
const char* password = "YourPW";

ESP8266WebServer server(80); //Server on port 80
//---------------------
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>

<head>
  <title>Data logger</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
//the below line is wrong and wordpress cannot show the right way. The link should be in a 'script src=' tag and closed with '/script' html tag
  https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js
  <style>
  canvas{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  /* Data Table Styling */
  #dataTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  #dataTable td, #dataTable th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  #dataTable tr:nth-child(even){background-color: #f2f2f2;}

  #dataTable tr:hover {background-color: #ddd;}

  #dataTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
  </style>
</head>

<body>
    <div style="text-align:center;">Real Time Voltage logging</div>
    <div class="chart-container" position: relative; height:350px; width:100%">
        <canvas id="Chart" width="400" height="400"></canvas>
    </div>
<div>
  <table id="dataTable">
    <tr><th>Time</th><th>ADC Value</th></tr>
  </table>
</div>
<br>
<br>  

<script>
//Graphs visit: https://www.chartjs.org
var values = [];
var timeStamp = [];
function showGraph()
{
    for (i = 0; i < arguments.length; i++) {
      values.push(arguments[i]);    
    }

    var ctx = document.getElementById("Chart").getContext('2d');
    var Chart2 = new Chart(ctx, {
        type: 'line',
        data: {
            labels: timeStamp,  //Bottom Labeling
            datasets: [{
                label: "Voltage",
                fill: false, 
                backgroundColor: 'rgba( 18, 156, 243 , 1)', //Dot marker color
                borderColor: 'rgba( 18, 156, 243 , 1)', //Graph Line Color
                data: values,
            }],
        },
        options: {
            title: {
                    display: true,
                    text: "ADC Voltage"
                },
            maintainAspectRatio: false,
            elements: {
            line: {
                    tension: 0.2 //Smoothening (Curved) of data lines
                }
            },
            scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:false
                        }
                    }]
            }
        }
    });

}

//On Page load show graphs
window.onload = function() {
  console.log(new Date().toLocaleTimeString());
  getData();
  showGraph();
};

//Ajax script to get ADC voltage at every 5 Seconds 

setInterval(function() {
  // Call a function repetatively with 5 Second interval
  getData();
}, 5000); 
 
function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     //Push the data in array
  var time = new Date().toLocaleTimeString();
  var ADCValue = this.responseText; 
      values.push(ADCValue);
      timeStamp.push(time);
      showGraph();  //Update Graphs
  //Update Data Table
    var table = document.getElementById("dataTable");
    var row = table.insertRow(1); //Add after headings
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = time;
    cell2.innerHTML = ADCValue;
    }
  };
  xhttp.open("GET", "readADC", true); //Handle readADC server on ESP8266
  xhttp.send();
}
    
</script>
</body>

</html>
)rawliteral";
//--------------------

void handleRoot() {
 server.send(200, "text/html", index_html); //Send web page
  
}

void handleADC() {
 int a = analogRead(A0);
 String adcValue = String(a);
 digitalWrite(LED,!digitalRead(LED)); //Toggle LED on data request ajax
 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}

void setup(){
  Serial.begin(115200);
  
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");

  //Onboard LED port Direction output
  pinMode(LED,OUTPUT); 
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP

  server.on("/", handleRoot);      
  server.on("/readADC", handleADC); 
  server.begin();                  
  Serial.println("HTTP server started");
}

void loop(){
  server.handleClient();          //Handle client requests
}

The below picture shows what the corrupted line should look like, but best download the file from here.

Ofcourse choosing Influx and Grafana to store and show data is also a good choice.

7 thoughts on “Real time graph for data logging”

zoomx says:

April 14, 2022 at 16:03

It seems that some HTML code is gone aweay.
For example here
scale=1″>
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

the and tags are gone but I am sure that they was there some days ago.
Here

there is a ” at the end that souldn’t be there. Maybe there are other errors too that I checked here
https://validator.w3.org/

1. E says:
  
  April 14, 2022 at 16:07
  
  Thanks. I will check. WordPress is just notoriously bad at displaying html code. Even when check and it looks fine and subsequently i need to open the edit again for say correcting a typo, the html can go haywire
  
zoomx says:

April 14, 2022 at 16:04

here mean this, I forgot that html is interpreted also in comments
class=”chart-container” position: relative; height:350px; width:100%”

1. E says:
  
  April 14, 2022 at 16:08
  
  Tnx. Yes it is
  
zoomx says:

April 14, 2022 at 16:08

Okay the correct line should be
div class=”chart-container” style=”position: relative; height:350px; width:100%”

1. E says:
  
  April 14, 2022 at 17:01
  
  eh no, it should have script tags around it. But wordpress just refuses to display those. You will find the full code here: https://gitlab.com/diy_bloke/esp8266datalogger/-/tree/main
  
zoomx says:

April 14, 2022 at 16:09

okay the correct line should be
class=”chart-container” style=”position: relative; height:350px; width:100%”