ESP32/ESP8266 Plot Sensor Readings in Real Time Charts

ESP32/ESP8266 Plot Sensor Readings in Real Time Charts - Web Server

4 роки тому

For complete project details (schematics + source code), visit ► RandomNerdTutorials.com/esp32...
Learn how to plot sensor readings (temperature, humidity, and pressure) on a web server using the ESP32 or ESP8266 with Arduino IDE. The ESP will host a web page with three real time charts that have new readings added every 30 seconds.
** Preparing Your Arduino IDE for ESP32 ***
1) Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux): randomnerdtutorials.com/insta...
2) ESP32: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtutorials.com/insta...
3) Libraries that you need to install: ESPAsyncWebServer, AsyncTCP, Adafruit BME280, and Adafruit Unified Sensor
** Preparing Your Arduino IDE for ESP8266 ***
1) Installing ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux): randomnerdtutorials.com/how-t...
2) ESP8266: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtutorials.com/insta...
3) Libraries that you need to install: ESPAsyncWebServer, ESPAsyncTCP, Adafruit BME280, and Adafruit Unified Sensor
Like my page on Facebook:
/ randomnerdtutorials
Follow me on twitter:
/ ruisantosdotme
Subscribe for more projects like this!
bit.ly/subscribeRNT

КОМЕНТАРІ: 175

@RuiSantosdotme 4 роки тому

You can find the complete project details (schematics + source code) on my blog ► RandomNerdTutorials.com/esp32-esp8266-plot-chart-web-server/

@HarisMaulanaID 4 роки тому

How to load data plot with sd card to chart webserver?

@MoesKeckeEcke 3 роки тому

Yeah please add write to sd card as csv file

@jkghhh97 3 роки тому

i tried with dht22 but server not found how to make it work . Any tutorial ? i have done with displaying humidity n temperature value using ur web server tutorial, it work fine.When i wan to display it in chart it not showing.. Any solutions?

@jasonfrank4991 2 роки тому

You all probably dont give a damn but does anyone know a trick to get back into an Instagram account..? I was stupid lost the password. I appreciate any assistance you can give me.

@jacobroman9965 2 роки тому

@Jason Frank Instablaster =)

@arpcatchall822 8 місяців тому

Thank you Rui. Found this guide most helpful.

@cristiantalos4042 4 роки тому

I'm so glad that out of luck i found out about you! I've been watching a few of your videos now and i think you're doing a fantastic job explaining everything! I just purchased your course on ESP8266 and ESP32 and i can't wait to learn everything about it! I was wondering if you would happen to be interrested into making tutorial videos (or maybe a complete course) with using an IoT dashboard platform such as Thingsboard? Keep up the great work!

@echoesofmind8430 2 роки тому

A good idea to make a graph dynamically! Super project! Thank you!

@DocMicha 4 роки тому

I am a regular viewer of your homepage, but did not realize, that you also have this youtube channel, so I subscribed! Nice work!

@RuiSantosdotme 4 роки тому

Thanks! I've been focusing mainly on my blog, but I'll try to focus more on UKposts this year.

@DocMicha 4 роки тому

@@RuiSantosdotme For me you are the REFERENCE for ESP uC. I love the ESPs and use them a lot!

@Ed19601 4 роки тому

ditto

@ulrichkliegis4138 2 місяці тому

Same here! Thanks for your great work, Rui!

@ardent4035 4 роки тому

Thank you ! everything from your website is so detailed and yet can be followed by a beginner like me.

@101appsCoZa 4 роки тому

fantastic tutorial! just what i was looking for.

@kaiomatico 3 роки тому

Wow this is simply perfect! Thank you so much for your hard work

@MrArtyomle 2 роки тому

Just awesome brief tutorial!

@sadeeppriyankara6400 4 роки тому

Everything including description crystal clear...and work fine..thank you very much

@RuiSantosdotme 4 роки тому

Thanks! I'm glad it was easy to follow

@marinformatics4587 4 роки тому

wowwwwww, thankyou, wonderfull tutorial !, I was looking for

@Ed19601 4 роки тому

A very interesting sketch as it uses a graphics library that's available on internet. That library can be configured to yr needs and used in other projects. This sketch is a very good introduction to its use. Well done

@RuiSantosdotme 4 роки тому

Thank you, I'm glad you found it helpful!

@robertgrassi6285 4 роки тому

Finally don't have to insert clunky HTML into the arduino code itself....wow this is a lifesaver. Really cool and useful tutorial thank you for pushing 32/8266 to the limits

@RuiSantosdotme 4 роки тому

Exactly, just store your CSS or HTML in the ESP SPIFFS. Here's another example randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/

@romafont2860 4 роки тому

Very interesting projects. Congrats!!

@RuiSantosdotme 4 роки тому

Thanks!

@mcomulu 4 роки тому

Thank you for this perfect Video Tutorial 👍

@RuiSantosdotme 4 роки тому

Thanks! I'm glad it was helpful!

@l301681 3 роки тому

Thank you verry much this is exactly what i needed !!!

@JosePetri 3 роки тому

This project is awesome! I test it and works like a dream. But I would like to know if I could take time from a rtc component attach to esp32? I will use the ESP32 with an RTC and an SD card to datalogger the sensors. This device will not connect to internet, but I will use ESP softAP to make an access point, so I could use any device to connect with ESP32 network and see the readings. Thank you for share this project!

@EliasPereira 4 роки тому

Obrigado por compartilhar, projeto top demais, obtive sucesso por aqui. Parabéns.

@mattm32 2 роки тому

Hi there, thanks for the wonderful tutorial. One problem I am having is, the sensor reading once in a while gets too high, not sure why. I tried the sensor with different code it works fine, another question I have is how do I add one more graph to display another sensor reading? Thanks

@stefanbramel 4 роки тому

I have already built my own weather station. Iam using it for quit a while now and I wonderd if it is possible to store the sensor data an the ESP for the last week and display it on a nice chart, so i don't have to wait until new sensor data cums in. It would be nice if you could make a video about that. Thanks

@luiscoelho3523 4 роки тому

Great project! Thank you for sharing!

@RuiSantosdotme 4 роки тому

You're welcome! Thanks for watching!

@marionboynton5223 4 роки тому

Thanks for video! :) is it possible to make the esp8266 an access point and log data so one can view the data plots on a desktop/mobile by conencting staright to esp8266 and no need for wifi?

@lorenzodefinis832 3 роки тому

Hey man, thanks for the tutorial. I've followed it step by step but when I go to upload the code, in the serial monitor it reports that no sensor is found, check wiring. I checked the wiring and its exactly how you have it. Im using an esp8266 with the same bme280 sensor as you. I've used an IC2 scanner and it can't discover the sensor. Any ideas whats wrong?

@youmaxim221 4 роки тому

Hello! Is it possible to make realtime plotting via WiFi with ESP in the interval of 10 microseconds to build a graph? Or it's impossible for this technology?

@fiendasiddi7151 3 роки тому

Thank you for your video!

@arminsenpai6755 3 роки тому

is there a way to get access to the esp server/Time Chart if i am not in local network? For example i want to make an ecg sensor with an esp and show the results like this time chart but from every place not just local. Thanks

@giova2927 Рік тому

Hi I would the same think but monitoring an on cnc using serial rs232. Could you have any idea to do this? Thanks

@felipegarciaencina5117 4 роки тому

Hi, can I use this to diplay data from a i2s mic?. And, you know how to read that data and turn it to sound?

@herrjonatan5436 3 роки тому

this is not nice , this is perfect !!! I am suscribing directly to your channel

@jeffvenqueleir2036 4 роки тому

well done i can use this in the futur thanks

@RuiSantosdotme 4 роки тому

Thanks! I'm glad it was helpful

@jonasmolleta7265 3 роки тому

Hi Rui! How can I change the X Axis time to my local timezone?

@drrandel7269 3 роки тому

Good day, Would that also work with a NodeMCU Amica module V2 ESP8266? I have built a small weather station with a 1.3 OLED display but would like to show the sensor data on a diagram or something if that were possible. I just can't find anything on the internet.

@MohamedAli-xb7kh 4 роки тому

How can I send continuous data to esp such as make the led on while I am pressing the forward arrow at keyboard ?

@davidsantiagogalvan3795 2 роки тому

Hello Rui! Amazing project, can I know, if the data file is inside the arduino project?

@CristiIstrate 2 роки тому

Can we change timezone ? Thank you!

@Johnzy33 4 роки тому

How can i collect the point on the graph in a table form

@josias6177 2 роки тому

how hard is it to make a graph from a microphone? i'd love to use the esp32 with a microphone as a babymonitor

@test2514 2 роки тому

hi coolvideos man :! any ideas what i could google if i want to safe these charts on the webserver. so whenever i come to the webpage i can also read past messurements? in ur verison i can only see present and past messurements

@christianpaul3497 Рік тому

hello, is it possible to save the recorded data to a database. Thank you for the response

@Ripen3 9 місяців тому

How long can it store information? I want to open the webpage and see temperature for the last 24 hours. It can update every 2 minutes for example. Is this possible?

@crisselectronicprojects8408 4 роки тому

Excellent project ! Thanks for sharing ! Can NTC sensors be used if the appropriate library is added?

@RuiSantosdotme 4 роки тому

Sure, it will work with any sensor or value. You just need to modify the code to read your sensor instead

@slavotoebog 2 роки тому

how i can configured BH1750 sensor to web server with esp32 devkitv1? Thank you advance for your support.

@diekritik8927 4 роки тому

You are a genius. Do you know how to change the time zone?

@lukeskywalkerbachman Рік тому

Can this be done on a web server that is configured as an access point? Let's say for example you want the arduino to host the server, but have the arduino not connected to Wifi, is it possible to implement Highcharts without Including the JavaScript files in the section of your web page, but storing the JS files on the arduino?

@bharathkalyaan3855 3 роки тому

sir do you have the code with tof sensor for measuring distance

@amjadalnahhas4295 4 роки тому

Thank you very much, but h have problem, when i copy IP and past it on the internet is not founded

@Johnzy33 4 роки тому

If i want to collect the data on the graph in a table, how do i go about it?

@moeburn 4 місяці тому

Does anyone know how to add a simple text display for the same values at the top? Like just a box that displays the latest value in bigger text, above the chart. I have been trying for days to figure this out but I don't understand Javascript or HTML as well as C.

@evilkittyofdoom195 9 місяців тому

Inspiring !

@antoniogerson5068 4 роки тому

How do I do with dht11 or 22 ?

@DaStuntChannel Місяць тому

Hi, how can I make it faster? as in more data per second, I lowered the value to 10 and its not enough

@widcoshop 3 роки тому

hi bro its great can you make it with stme32cubemx and mysql?

@arashhashemi7091 4 роки тому

Thanks a lot sir 🍀🍃☘️👍

@caturpermadi 27 днів тому

is it possible to use ESP32-C3 Mini?

@soutakbiswas3029 2 роки тому

I want to plot second sensor data on x axis... Instate of time... Like voltage vs current graph..... Please help me to modify html file...

@lafrooptimiste245 4 роки тому

thanks ? how can I record this curve?

@donnysdp Рік тому

Nice explanation sir, but I have a question. Could we set the webserver that has ability to auto-add the plot chart when there's a new sensor readings installed? (For example, I wanna visualize sensor readings from every node in my mesh network created by painlessmesh)

@dr-mnizam Рік тому

Here is a method to show dynamic data from google sheet database ukposts.info/have/v-deo/e3F0p4Ovf5edwn0.html

@ashgork 4 роки тому

Hi, beautiful project ! What happens once the 40 points are reached ? Thank you in advance for your answer !

@MrMikael1337 2 роки тому

once 40 points are reached, the graph just removes the first point as it adds every new point.

@muhammadrifqy24 3 місяці тому

is this with mqtt protocol?

@irfansensoy5901 2 місяці тому

Can we export this data as an excel or txt file?

@MathematikO0 2 роки тому

Is it possible to create a local webserver with mysql data?

@nrdesign1991 4 роки тому

Is there a way to locally host the chart js code?

@BertrandL 4 роки тому

Excellent project ! Thanks for sharing ! What is the minimum delay that we can set between two values ?

@RuiSantosdotme 4 роки тому

I've used it extensively with 1 minute updates and it was very reliable with 1 connected client. I haven't tested with lower time frames...

@BertrandL 4 роки тому

@@RuiSantosdotme Thanks for your response ! I'm looking for a way to send data in real time from an Arduino to another wirelessly, but I didn't find the perfect solution yet... The idea is to create a musical instrument (MIDI) with several homemade wireless controllers (different types of sensors)... Your channel helped me a lot for working with the ESP32 the past 5 month ! I can't thank you enough!

@RuiSantosdotme 4 роки тому

@@BertrandL I would recommend just using 2 ESP32 to exchange data with each other. I would probably use MQTT. I'm glad it helped! Thanks

@denisgrabocka1269 4 роки тому

Great project ...can i use a Wemos D1 mini for this and what do i have to modify? Thank you

@RuiSantosdotme 4 роки тому

You can, it should work without any modifications just check that you are connecting the sensor to the SCL/SDA I2C pins of the Wemos D1 Mini: randomnerdtutorials.com/esp8266-pinout-reference-gpios/

@buimanhha3741 4 роки тому

Thank you, so much!

@RuiSantosdotme 4 роки тому

You're welcome! Regards, Rui

@buimanhha3741 4 роки тому

Dear. Can you guide to plot analog gauge. Thanks.

@rocococamp 3 роки тому

Hello, Santos I'm currently working on ESP32 800l project . I need help from you .How can I contact you?

@doc777ga 3 роки тому

Is it possible to do it with a DS18B20

@JKFCV 3 роки тому

The data update speed is nearly per 30 seconds. How to increase the speed?

@tariq4846 Рік тому

Can we do this with Arduino UNO?

@Ziqastory 3 роки тому

hi, can this be logged into csv file?

@fajarwahidan6542 3 роки тому

Can i change the sensor using dht11?

@giovanipellin3384 3 роки тому

Is there a way to export the data to a .csv?

@basmangeorge 3 роки тому

That is good thank you

@GiegX 2 роки тому

Thanks a lot!

@johnharoldcastillo1710 10 місяців тому

did you use python language in your web ?

@MrJannemanbrandt 4 роки тому

Very cool, thank you

@RuiSantosdotme 4 роки тому

Thanks for watching!

@xaviertintin849 3 роки тому

I have an esp8266 user exception (panic/abort/assert)!! how do I fix that?

@pupanpoulkaew9860 4 роки тому

Hello, I will reset the time zone. thanyou

@bytesizedinnovations Місяць тому

is there a way to export this data?

@raveenkumuditharathnayaka7473 3 роки тому

How do we save these data in our PC

@abhijitrashinkar 4 роки тому

Hello! Excellent work, thinking of doing something similar like you did but unfortunately do not understand where to start, I can only use PIC chips for the moment and really don't know that I know enough of it to do something like you did, I liked your project, cheers....

@RuiSantosdotme 4 роки тому

Unfortunately I don't have any PIC tutorials...

@abhijitrashinkar 4 роки тому

Hello! Okay my friend, thanks for your humble reply.

@dave-in-nj9393 4 роки тому

The Arduino IDE is a free download programming in in C++ ESP32 is commonly available from on-line suppliers. BME280 (not BMP280) is available from same supplies You can cut and paste to get this to work. I would say there are a lot of steps, but Rui has on all the hard work and given a step-by-step tutorial for you to follow. but, you have to follow from the very beginning to add the ESP32 to the IDE

@abhijitrashinkar 4 роки тому

@@dave-in-nj9393 Hello! Dave Thanks for your quick reply, yes indeed, even I appreciate the efforts taken by Rui. Regarding programming, I am zero in C++ that's the reason I use FlowCode to program the PIC chips. I am trying to understand you and what Rui did, hope to do so quickly, probably ordering those parts you mentioned and start the action.😊 Once again thanks for your kind words. Abhi

@dave-in-nj9393 4 роки тому

@@abhijitrashinkar : see the link to the website tutorial. this is specific to the ESP32 or to the ESP8266. the ESP32 has more I/O pins and a few other benefits. the steps are explained. you have to get the Arduino IDE, free from the Arduino Website take some steps to load the specific chip (32 or 8266 one and then the other) down load libraries download the program assemble the board with the BME280 (I think pull up resistors might be needed, more data on the web) he goes pretty fast on this video, but the tutorial is step-by-step with links. since FlowCode has a C++ as part of the options, you should be able to port this into FlowCode, then add what you need. if you wanted to port this from C++ to a PIC, then I would hope FlowCode can do the heavy work for you.

@engineer1.0 3 роки тому

Web server are local ?

@hugoalexandermejiadiaz1075 3 роки тому

Hello !! I am trying to do a similar project, but with the difference that I have the temperature sensor, and the pressure sensor has it my friend who is located in another part of my city, the problem I have is that I want to show in The same web page, the values of the two sensors, but I don't know how to link. Could you tell me how to do it?

@ummuhanigul5531 2 роки тому

@TechInventorAman 2 роки тому

Lets say if you have this sensor and a heart rate sensor attached . Will the same system work , as both of the sensors will produce data at their own rate . And what i think is that as the whole page is getting refreshed it might need all of the data at the same time from all the sensors

@arielelbaum Рік тому

You can adjust the different polling rates for each sensor in the HTML file.

@anonimuso 4 роки тому

Great project. I'm trying to modify this for use with a AD8232 heart rate monitor, but I'm only getting a single value (4095) when I should be getting a constant stream of changing values (from 0 - 4095 using the built in ADC). The AD8232 works with just the serial monitor and plotter, so I know it's hooked up correctly. Any suggestions?

@Screcy Рік тому

Kind of late but did you find a solution?

@anonimuso Рік тому

@@Screcy Sorry, but it's been so long, I don't remember. I hope you can find the solution.

@MRmidnightify 2 роки тому

sir can u help me, i got problem like this when running program on website Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///pressure. (Reason: CORS request not http). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///temperature. (Reason: CORS request not http). Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///humidity. (Reason: CORS request not http).

@CyberTechSRB 3 роки тому

can you make a project with ESP32 + BME280+PMS7003+MQ135 and the same webpage with a graph like this? I really like the project but I am not good at coding.

@ummuhanigul5531 2 роки тому

simply, Can you please explain how to make this project with multiple sensors that are analog or I2C.

@mr.techinventor3463 2 роки тому

HOW YOU RECORDS VIDEOS

@ismzaxxon 3 роки тому

Nice tutorial, even if sharts made me laugh. Google what a shart it.

@super123paperman 2 роки тому

Hi . I like your project very much but I have some trouble. Every time when I close the website(accessed by smartphone or PC) , the data is all disappear . And I open the new window of the website . The data is blank . Only the latest data is written on it . Are there any steps of your instruction that I missed ? I appreciate that you can help me

@LegeFles Рік тому

That also happens in this video.

@akashahmmed9463 Рік тому

how can i do it in android please help me

@tmjromao 4 роки тому

Thanks!

@RuiSantosdotme 4 роки тому

You're welcome!

@mandyelectronicmaker 4 роки тому

Thank you

@RuiSantosdotme 4 роки тому

You're welcome!

@karinyafields9651 4 роки тому

Is there a reason why it only displays 40 data points? Can this be extended to more than 40 or are we restricted to the limits of the Esp8266 / esp32?

@RuiSantosdotme 4 роки тому

It was just an arbitrary number that I decided... I found it was a good amount of values to see either in a mobile or laptop browser. You can modify the HTML page to let you see hundreds of points per chart. Just open my index.html file. Then, search for "40" and modify those values to 100, 500 or any limit that you want

@dave-in-nj9393 4 роки тому

as you try to display more, the points run together and become almost un-readable. I think the next version should have a button on your Android that says 40 200 and 1000 that would be a day and a half, one week and one month if you take readings every hour. that way, you could press the value on your phone, and the chart would fill to that. I think it would be great to have a way to see the last 200/1000 stored readings and not have to wait for it it fill

@RuiSantosdotme 4 роки тому

@@dave-in-nj9393 Thanks for the suggestion. You can definitely all those features to this project

@Ed19601 4 роки тому

@@dave-in-nj9393 I have been digging in that library a little bit and hat you mention is certainly possible. As example, paste this in an html file and open it in your browser: (I hope the code wont be garbled by youtube) $.getJSON('www.highcharts.com/samples/data/aapl-c.json', function (data) { // Create the chart Highcharts.stockChart('container', { rangeSelector: { selected: 1 }, title: { text: 'Stock price' }, series: [{ name: 'AAP', data: data, tooltip: { valueDecimals: 2 } }] }); });

@bhupiistersingh4097 3 роки тому

@@Ed19601 Hey, thanks for the code!

@reynaldobernabe9634 4 роки тому

I tried to use this tutorials, everything. And i modified it by using DHT11, but to no luck, it doesn't work. it compile and upload properly both the filesystem and arduino sketch. but there's nothing in the web. "No webpage was found for the web address:" Please help to make it work...

@jkghhh97 3 роки тому

do you find a way to do tht?

@kartikrajurkar3708 4 роки тому

How to store multiple Web pages in esp8266 and call it as hyperlinks

@elektronik1111 4 роки тому

I can answer for a small nonreturnable loan of one million dollars !

@danielbob7769 4 роки тому

@Rui Santos , I need help ... how can I change the clock ? It's with 3 hours back . The date it is correct. Please answer me . We can talk on email if you want

@claudineymoratony 3 роки тому

good night daniel, did you manage to change the date to gm -3? I have the same problem

@danielbob7769 3 роки тому

@@claudineymoratony hi.I found the solution myself. I just had to add 3 hours in minutes to the function that displayed the time.

@danielbob7769 3 роки тому

@@claudineymoratony var x = (new Date()).getTime() - 1000 * 60 * 60 * 3 Try this. 1000* 60* 60*3 is 3 hours in miliseconds. That function displays the time in milliseconds since 1970. In the code you specified the time format, that's why the normal time is displayed, in hours, minutes and seconds . So, for GMT -3, you just have to subtract the 3 hours, exactly as I showed you.For GMT plus, you do the opposite, that is, you add up those hours

@claudineymoratony 3 роки тому

@@danielbob7769 It worked perfectly! Thanks!

@danielbob7769 3 роки тому

@@claudineymoratony you're welcome!

@augusto182100 4 роки тому

You can save the data after?

@RuiSantosdotme 4 роки тому

You could, but I don't have any tutorials on that exact subject. This might help though: Visualize Your Sensor Readings from Anywhere in the World (ESP32/ESP8266 + MySQL + PHP) randomnerdtutorials.com/visualize-esp32-esp8266-sensor-readings-from-anywhere/