Sensor data is very important in any project to find how system is performing or we just want to monitor a system. Last tutorial where I showed how we can plot sensor data to our local network web page. In this tutorial we can plot sensor data chart from cloud. So we don’t need to be on same wifi network, you can access sensor data from anywhere in the world. We not only see how to plot sensor data but also export this data in CSV file. All this things will be going in Blynk App. Where we also explore various ways to present sensor data like Gauge, H Level, V Level & Display value in Blynk App. So let’s get stated.

Final ESP8266 Chart

Components Required:
  1. NodeMCU ESP8266 12E,
  2. DHT22 sensor,
  3. 10K ohms Resistor,
  4. Breadboard,
  5. Jumper Wire.
Libraries Required:
  1. DHT22 Library,
  2. Adafruit Sensor, (If you haven’t installed yet)

How to add library in Arduino IDE.

Make sure you already setup ESP8266 for Arduino IDE. If you didn’t setup yet. You can read How to setup ESP8266 for first time in Arduino IDE.

Blynk Library:

After setting up your Arduino IDE, Go to Sketches → Include libraries → manage libraries → type Blynk and then Install.

Downloading Blynk Library

Installing Blynk Library

Circuit diagram for DHT22 Sensor Data Blynk Receiver with ESP8266:
circuit diagram for ESP8266 DHT22 Sensor Data ChartSetup Blynk App:

Step 1: Download Blynk from Playstore.

Step 2: Register with email ID where you will receive “Auth Token”.

Step 3: Open New Project and name the project. Click on create.

 

1.Create Project

Step 4: After creating project you will receive email, which contain “Auth Token”.

2. Auth Token Sent to email

Step 5: Copy this “Auth Token” and paste in our Arduino Code.

char auth[] = "";

Make sure before uploading code, insert your SSID and password. Also check you have selected NodeMCU board and correct port.

Creating a Chart in Blynk App:

Step 1: Swipe left or Click on “+” icon to add SuperChart.

3.Create Graph

Step 2: You can see chart created on screen. Click on chart to add DataStream for Temperature and Humidity.

4. Graph

Step 3: Click on Add DataStream, Name it then click on setting icon.

5. Add Datastream

Step 4: Click on “PIN” & set virtual pin 6 for Temperature.

6.Select Pin number for temperature datastream

Step 5: Similarly set pin V5 for Humidity.

Step 6: If you want you can change the graph line color. Taking back from chart setting, Now you will be able to see chart with name & color on screen.

8.Change datastream line color

9.Graph Created

Creating a H Level& V Level in Blynk App:

Sometimes we want to see data in levels from minimum to maximum range. You can do that easily with the help of Blynk app. H Level in Horizontal Level and V Level is Vertical Level.

Step 1: Swipe left to add H Level & V Level.

10.Creat H level and V Level

Step 2: Now click on level and set V6 for humidity or set V5 for temperature.

Step 3: Putting limits to level.

12. Putting limit to levels

Step 4: We want to refresh reading in every one second.

13.Set Refresh Rate

11. Created H & V level

Creating a Gauge in Blynk App:

It is same as H & V Level. Only difference is, it is in circular fashion.

Swipe left to add Gauge. Similarly add PIN number for data, set limit & refresh rate.

14.Creating Gauge

Creating a Value Display in Blynk App:

Similarly you can add pin number for sensor data. Our Energy Balance is low, after spending 2000 points either we need to buy points or delete some widget.

16. Creating display value

Export .CSV File:

Step 1: Click on three horizontal dot, just below your chart.

Export ESP8266 Chart CSV

Step 2: Now click Export to CSV. It will send this CSV file directly to your email id.

Export sensor chart data to email

Code for Blynk Chart & Export with DHT22 Sensor ESP8266:
#define BLYNK_PRINT Serial // Comment this out to disable prints and save space
#include <SPI.h>
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>
#include <SimpleTimer.h>
#include <DHT.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "";//Enter the Auth code which was send by Blink

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = "Your_SSID";
char pass[] = "Your_Password";

#define DHTPIN 2 // Digital pin 4

// Uncomment whatever type you're using!
//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22, AM2302, AM2321
//#define DHTTYPE DHT21 // DHT 21, AM2301

DHT dht(DHTPIN, DHTTYPE);
SimpleTimer timer;

// This function sends Arduino's up time every second to Virtual Pin (5).
// In the app, Widget's reading frequency should be set to PUSH. This means
// that you define how often to send data to Blynk App.
void sendSensor()
{
float h = dht.readHumidity();
float t = dht.readTemperature(); // or dht.readTemperature(true) for Fahrenheit

if (isnan(h) || isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
// You can send any value at any time.
// Please don't send more that 10 values per second.
Blynk.virtualWrite(V5, h); //V5 is for Humidity
Blynk.virtualWrite(V6, t); //V6 is for Temperature
}

void setup()
{
Serial.begin(9600); // See the connection status in Serial Monitor
Blynk.begin(auth, ssid, pass);

dht.begin();

// Setup a function to be called every second
timer.setInterval(1000L, sendSensor);
}

void loop()
{
Blynk.run(); // Initiates Blynk
timer.run(); // Initiates SimpleTimer
}

Uncommentthe DHT type you are using, in our case it DHT22 and comment out rest of type.

//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22, AM2302, AM2321
//#define DHTTYPE DHT21 // DHT 21, AM2301

Modify SSID and Password with your network credential. Also make sure you insert your “Auth Token”.

char auth[] = "";//Enter the Auth code which was send by Blink
char ssid[] = "Your_SSID";
char pass[] = "Your_Password";

I hope you get benefited by this ESP8266 Chart tutorial. Please consider my YouTube Channel to subscribe for latest update. Till then Keep Learning Keep Making.

Video: