ESP8266 data logging with real time
graphs
https://circuits4you.com/2019/01/11/e
sp8266-data-logging-with-real-time-
graphs/
January 11, 2019ESP8266, IoT TutorialsESP8266, NodeMCU
In this tutorial we are going to make really really cool thing with NodeMCU ESP8266. That
is data logger web server with real time graphs and tables, mostly seen
on thingspeak. But this time we are putting complete graphs and tables all inside
NodeMCU without using thingspeak. For this we need graphs library that we are using
from chartsjs.org an open source Chart drawing library and Knowledge of alax, html and
javascipt.
Things we need
1. NodeMCU ESP8266
2. USB Cable
3. Laptop
4. Internet and wifi router
Programming NodeMCU
To draw graphs we use chart.js from CDN. you can use char.js file directly inside the
NodeMCU for this see : AJAX Web Server
To get knowledge of real time data update without refresh read this.
Program consists of two parts one is HTML, Javascipts and Arduino Code
Arduino IDE Code For Graphs ESP8266 and Data Logging
Before directly uploading make changes in WiFi SSID and Password as per yours WiFi.
most of the things are explained inside code comments. also make index.h header file
and save it near to your ino file.
In this example we are creating web server inside ESP8266 for data logging. It has two
parts one part that displays HTML web GUI and second is that takes AJAX request and
reads ADC data.
ESPGraph.ino File
1 /*
2 * ESP8266 NodeMCU Real Time Graphs Demo
3 * Updates and Gets data from webpage without page refresh
4 * https://circuits4you.com
5 */
6 #include <ESP8266WiFi.h>
7 #include <WiFiClient.h>
8 #include <ESP8266WebServer.h>
10 #include "index.h" //Our HTML webpage contents with javascripts
11
12 #define LED 2 //On board LED
13
14 //SSID and Password of your WiFi router
15 const char* ssid = "your-wifi";
16 const char* password = "your-password";
17
18 ESP8266WebServer server(80); //Server on port 80
19
20 //===============================================================
21 // This routine is executed when you open its IP in browser
22 //===============================================================
23 void handleRoot() {
24 String s = MAIN_page; //Read HTML contents
25 server.send(200, "text/html", s); //Send web page
26 }
27
28 void handleADC() {
29 int a = analogRead(A0);
30 String adcValue = String(a);
31 digitalWrite(LED,!digitalRead(LED)); //Toggle LED on data request ajax
32 server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
33 }
34 //==============================================================
35 // SETUP
36 //==============================================================
37 void setup(void){
38 Serial.begin(115200);
39
40 WiFi.begin(ssid, password); //Connect to your WiFi router
41 Serial.println("");
42
43 //Onboard LED port Direction output
44 pinMode(LED,OUTPUT);
45
46 // Wait for connection
47 while (WiFi.status() != WL_CONNECTED) {
48 delay(500);
49 Serial.print(".");
50 }
51
52 //If connection successful show IP address in serial monitor
53 Serial.println("");
54 Serial.print("Connected to ");
55 Serial.println(ssid);
56 Serial.print("IP address: ");
57 Serial.println(WiFi.localIP()); //IP address assigned to your ESP
58
59 server.on("/", handleRoot); //Which routine to handle at root location. This is display page
60 server.on("/readADC", handleADC); //This page is called by java Script AJAX
61
62 server.begin(); //Start server
63 Serial.println("HTTP server started");
64 }
65 //==============================================================
66 // LOOP
67 //==============================================================
68 void loop(void){
69 server.handleClient(); //Handle client requests
70 }
index.h HTML Code File for data logger
1 const char MAIN_page[] PROGMEM = R"=====(
2 <!doctype html>
3 <html>
5 <head>
6 <title>Line Chart | Circuits4you.com</title>
7 <!--For offline ESP graphs see this tutorial https://circuits4you.com/2018/03/10/esp8266-jquery-and-ajax-web-
8 server/ -->
9 <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
10 <style>
11 canvas{
12 -moz-user-select: none;
13 -webkit-user-select: none;
14 -ms-user-select: none;
15 }
16
17 /* Data Table Styling */
18 #dataTable {
19 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
20 border-collapse: collapse;
21 width: 100%;
22 }
23
24 #dataTable td, #dataTable th {
25 border: 1px solid #ddd;
26 padding: 8px;
27 }
28
29 #dataTable tr:nth-child(even){background-color: #f2f2f2;}
30
31 #dataTable tr:hover {background-color: #ddd;}
32
33 #dataTable th {
34 padding-top: 12px;
35 padding-bottom: 12px;
36 text-align: left;
37 background-color: #4CAF50;
38 color: white;
39 }
40 </style>
41 </head>
42
43 <body>
44 <div style="text-align:center;"><b>Circuits4you.com</b><br>Real Time Data Logging with Graphs on ESP8266</div>
45 <div class="chart-container" position: relative; height:350px; width:100%">
46 <canvas id="Chart" width="400" height="400"></canvas>
47 </div>
48 <div>
49 <table id="dataTable">
50 <tr><th>Time</th><th>ADC Value</th></tr>
51 </table>
52 </div>
53 <br>
54 <br>
55
56 <script>
57 //Graphs visit: https://www.chartjs.org
58 var values = [];
59 var timeStamp = [];
60 function showGraph()
61 {
62 for (i = 0; i < arguments.length; i++) {
63 values.push(arguments[i]);
64 }
65
66 var ctx = document.getElementById("Chart").getContext('2d');
67 var Chart2 = new Chart(ctx, {
68 type: 'line',
69 data: {
70 labels: timeStamp, //Bottom Labeling
71 datasets: [{
72 label: "Voltage 1",
73 fill: false, //Try with true
74 backgroundColor: 'rgba( 243, 156, 18 , 1)', //Dot marker color
75 borderColor: 'rgba( 243, 156, 18 , 1)', //Graph Line Color
76 data: values,
77 }],
78 },
79 options: {
80 title: {
81 display: true,
82 text: "ADC Voltage"
83 },
84 maintainAspectRatio: false,
85 elements: {
86 line: {
87 tension: 0.5 //Smoothening (Curved) of data lines
88 }
89 },
90 scales: {
91 yAxes: [{
92 ticks: {
93 beginAtZero:true
94 }
95 }]
96 }
97 }
98 });
99
100 }
101
102 //On Page load show graphs
103 window.onload = function() {
104 console.log(new Date().toLocaleTimeString());
105 showGraph(5,10,4,58);
106 };
107
108 //Ajax script to get ADC voltage at every 5 Seconds
109 //Read This tutorial https://circuits4you.com/2018/02/04/esp8266-ajax-update-part-of-web-page-without-refreshing/
110
111 setInterval(function() {
112 // Call a function repetatively with 5 Second interval
113 getData();
114 }, 5000); //5000mSeconds update rate
115
116 function getData() {
117 var xhttp = new XMLHttpRequest();
118 xhttp.onreadystatechange = function() {
119 if (this.readyState == 4 && this.status == 200) {
120 //Push the data in array
121 var time = new Date().toLocaleTimeString();
122 var ADCValue = this.responseText;
123 values.push(ADCValue);
124 timeStamp.push(time);
125 showGraph(); //Update Graphs
126 //Update Data Table
127 var table = document.getElementById("dataTable");
128 var row = table.insertRow(1); //Add after headings
129 var cell1 = row.insertCell(0);
130 var cell2 = row.insertCell(1);
131 cell1.innerHTML = time;
132 cell2.innerHTML = ADCValue;
133 }
134 };
135 xhttp.open("GET", "readADC", true); //Handle readADC server on ESP8266
136 xhttp.send();
137 }
138
139 </script>
140 </body>
141
142 </html>
143
)=====";
Results
Upload code and get IP Address from serial monitor. and enter it in web browser. wait for
few seconds and see the updating of graphs.
References
1. AJAX Tutorial
2. SPIFFS for directly loading java script file.
