Scribd
Upload
930 views

ESP8266 Data Logging With Real Time Graphs

This document describes how to create an ESP8266-based data logger that displays real-time graphs and tables of sensor data on a web page without refreshing. It involves programming the ESP8266 to create a web server hosting an HTML page with JavaScript that uses AJAX calls to retrieve sensor readings and Chart.js to dynamically update graphs every 5 seconds. The ESP8266 code sets up a web server and handles requests for the main page and readings, while toggling an LED. It obtains WiFi credentials and ADC readings to return via the handlers.

Uploaded by

Julpan Ongly Pangaribuan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
930 views

ESP8266 Data Logging With Real Time Graphs

This document describes how to create an ESP8266-based data logger that displays real-time graphs and tables of sensor data on a web page without refreshing. It involves programming the ESP8266 to create a web server hosting an HTML page with JavaScript that uses AJAX calls to retrieve sensor readings and Chart.js to dynamically update graphs every 5 seconds. The ESP8266 code sets up a web server and handles requests for the main page and readings, while toggling an LED. It obtains WiFi credentials and ADC readings to return via the handlers.

Uploaded by

Julpan Ongly Pangaribuan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

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.

You might also like