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.
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/
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
here mean this, I forgot that html is interpreted also in comments
class=”chart-container” position: relative; height:350px; width:100%”
Tnx. Yes it is
Okay the correct line should be
div class=”chart-container” style=”position: relative; height:350px; width:100%”
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
okay the correct line should be
class=”chart-container” style=”position: relative; height:350px; width:100%”