ESP8266 data logging with real time graphs

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.Node MCU data logger

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

index.h HTML Code File for data logger

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.

NodeMCU Data Logging web server

References

  1. AJAX Tutorial
  2. SPIFFS for directly loading java script file.

 

Leave a Reply