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

Подписаться 69 тыс.

Просмотров 198 тыс.

50% 1

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

Наука

Опубликовано:

18 июл 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 177

@RuiSantosdotme 5 лет назад

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

@HarisMaulanaID 5 лет назад

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

@MoesKeckeEcke 4 года назад

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 3 года назад

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 3 года назад

@Jason Frank Instablaster =)

@ardent4035 4 года назад

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

@cristiantalos4042 5 лет назад

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 5 лет назад

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 5 лет назад

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

@DocMicha 5 лет назад

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

@Ed19601 5 лет назад

ditto

@ulrichkliegis4138 6 месяцев назад

Same here! Thanks for your great work, Rui!

@101appsCoZa 4 года назад

fantastic tutorial! just what i was looking for.

@arp_catchall Год назад

Thank you Rui. Found this guide most helpful.

@MrArtyomle 2 года назад

Just awesome brief tutorial!

@kaiomatico 4 года назад

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

@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

@Ed19601 5 лет назад

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 5 лет назад

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

@marinformatics4587 4 года назад

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

@romafont2860 5 лет назад

Very interesting projects. Congrats!!

@RuiSantosdotme 5 лет назад

Thanks!

@l301681 3 года назад

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

@fiendasiddi7151 4 года назад

Thank you for your video!

@robertgrassi6285 5 лет назад

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 5 лет назад

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/

@mcomulu 5 лет назад

Thank you for this perfect Video Tutorial 👍

@RuiSantosdotme 5 лет назад

Thanks! I'm glad it was helpful!

@luiscoelho3523 5 лет назад

Great project! Thank you for sharing!

@RuiSantosdotme 5 лет назад

You're welcome! Thanks for watching!

@evilkittyofdoom195 Год назад

Inspiring !

@EliasPereira 4 года назад

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

@GiegX 2 года назад

Thanks a lot!

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!

@jeffvenqueleir2036 5 лет назад

well done i can use this in the futur thanks

@RuiSantosdotme 5 лет назад

Thanks! I'm glad it was helpful

@MrJannemanbrandt 5 лет назад

Very cool, thank you

@RuiSantosdotme 5 лет назад

Thanks for watching!

@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

@basmangeorge 3 года назад

That is good thank you

@arashhashemi7091 4 года назад

Thanks a lot sir 🍀🍃☘️👍

@herrjonatan5436 3 года назад

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

@giova2927 Год назад

Hi I would the same think but monitoring an on cnc using serial rs232. Could you have any idea to do this? 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

@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?

@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 года назад

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

@felipegarciaencina5117 5 лет назад

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?

@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 ?

@buimanhha3741 4 года назад

Thank you, so much!

@RuiSantosdotme 4 года назад

You're welcome! Regards, Rui

@buimanhha3741 4 года назад

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

@youmaxim221 5 лет назад

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?

@jonasmolleta7265 3 года назад

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

@lorenzodefinis832 4 года назад

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?

@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?

@diekritik8927 4 года назад

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

@Johnzy33 4 года назад

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

@crisselectronicprojects8408 5 лет назад

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

@RuiSantosdotme 5 лет назад

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

@davidsantiagogalvan3795 2 года назад

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

@moeburn 8 месяцев назад

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.

@tmjromao 5 лет назад

Thanks!

@RuiSantosdotme 5 лет назад

You're welcome!

@pupanpoulkaew9860 5 лет назад

Hello, I will reset the time zone. thanyou

@lafrooptimiste245 4 года назад

thanks ? how can I record this curve?

@antoniogerson5068 4 года назад

How do I do with dht11 or 22 ?

@mandyelectronicmaker 5 лет назад

Thank you

@RuiSantosdotme 5 лет назад

You're welcome!

@orijinajunior6968 2 года назад

nice

@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

@slavotoebog 3 года назад

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

@CristiIstrate 2 года назад

Can we change timezone ? Thank you!

@oussamathedjfreeman 3 месяца назад

To add download chart data into pfg or image file

@test2514 3 года назад

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

@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.

@BertrandL 5 лет назад

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

@RuiSantosdotme 5 лет назад

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 5 лет назад

@@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 5 лет назад

@@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

@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

@bharathkalyaan3855 3 года назад

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

@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/

@christianpaul3497 Год назад

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

@widcoshop 4 года назад

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

@nrdesign1991 4 года назад

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

@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.

@doc777ga 3 года назад

Is it possible to do it with a DS18B20

@fajarwahidan6542 3 года назад

Can i change the sensor using dht11?

@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...

@donnysdp 2 года назад

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CACsMxHalaI.html

@Ripen3 Год назад

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?

@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 3 года назад

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

@xaviertintin849 3 года назад

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

@giovanipellin3384 3 года назад

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

@JKFCV 3 года назад

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

@abhijitrashinkar 5 лет назад

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 5 лет назад

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

@abhijitrashinkar 5 лет назад

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

@dave-in-nj9393 5 лет назад

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 5 лет назад

@@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 5 лет назад

@@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.

@MathematikO0 3 года назад

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

@TechInventorAman 3 года назад

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.

@dave-in-nj9393 5 лет назад

thanks.

@RuiSantosdotme 5 лет назад

You're welcome!

@ismzaxxon 3 года назад

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

@ahmadprayudi9178 5 лет назад

mantap good bro

@RuiSantosdotme 5 лет назад

Thanks for watching!

@DaStuntChannel 4 месяца назад

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

@raveenkumuditharathnayaka7473 3 года назад

How do we save these data in our PC

@caturpermadi 4 месяца назад

is it possible to use ESP32-C3 Mini?

@anonimuso 5 лет назад

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 2 года назад

Kind of late but did you find a solution?

@anonimuso 2 года назад

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

@Ziqastory 3 года назад

hi, can this be logged into csv file?

@hugoalexandermejiadiaz1075 4 года назад

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 3 года назад

@EmilyAngel-i2j 2 месяца назад

Se puede actualizar la grafica cada 10 milisegundos?

@irfansensoy5901 6 месяцев назад

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

@muhammadrifqy24 7 месяцев назад

is this with mqtt protocol?

@tariq4846 Год назад

Can we do this with Arduino UNO?

@bytesizedinnovations 5 месяцев назад

is there a way to export this data?

@MRmidnightify 3 года назад

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).

@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.

@engineer1.0 3 года назад

Web server are local ?

@akashahmmed9463 2 года назад

how can i do it in android please help me

@kartikrajurkar3708 5 лет назад

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

@elektronik1111 5 лет назад

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

@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?

@karinyafields9651 5 лет назад

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 5 лет назад

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 5 лет назад

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 5 лет назад

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

@Ed19601 5 лет назад

@@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 } }] }); });