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

For complete project details (schematics + source code), visit ► RandomNerdTuto...
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): randomnerdtuto...
2) ESP32: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtuto...
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): randomnerdtuto...
2) ESP8266: Install FileSystem Uploader Plugin in Arduino IDE: randomnerdtuto...
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/subscrib...

[@RuiSantosdotme]

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

[@HarisMaulanaID]

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

[@MoesKeckeEcke]

Yeah please add write to sd card as csv file

[@jkghhh97]

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]

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]

@Jason Frank Instablaster =)

[@DocMicha]

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]

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

[@DocMicha]

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

[@Ed19601]

ditto

[@ulrichkliegis4138]

Same here! Thanks for your great work, Rui!

[@robertgrassi6285]

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]

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/

[@cristiantalos4042]

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!

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

[@ardent4035]

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

[@Ed19601]

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]

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

[@sadeeppriyankara6400]

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

[@RuiSantosdotme]

Thanks! I'm glad it was easy to follow

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!

[@echoesofmind8430]

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

[@arp_catchall]

Thank you Rui. Found this guide most helpful.

[@namenlos4066]

Nice tutorial but I have 1 problem, in my Arduino IDE i cant finde the button "ESP8266 Sketch Data Upload" and if I upload the sketch with the normal "arrow" i cant get onto the website with the given IP from the serial monitor

[@giova2927]

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

[@irfansensoy5901]

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

[@101appsCoZa]

fantastic tutorial! just what i was looking for.

[@HylasFlooring]

Hi Rui! very cool project. I know nothing about coding, I followed your instructions and made one for monitoring my wood inventory. It will be great to have the deta sync with my local time zone. Please let me know how i can achieve this. many thanks!

[@BertrandL]

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

[@RuiSantosdotme]

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]

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

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

[@youmaxim221]

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?

[@drrandel7269]

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.

[@Reptex_cs]

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?

[@9sadra9]

If I close the browser and look at the data tomorrow, will it show yesterday's data?

[@MrArtyomle]

Just awesome brief tutorial!

[@kaiomatico]

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

[@CyberTechSRB]

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]

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

[@DaStuntChannel]

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

[@hugoalexandermejiadiaz1075]

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]

+

[@romafont2860]

Very interesting projects. Congrats!!

[@RuiSantosdotme]

Thanks!

[@josias6177]

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

[@crisselectronicprojects8408]

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

[@RuiSantosdotme]

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

[@MRmidnightify]

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

[@mattm32]

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

[@arminsenpai6755]

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

[@jonasmolleta7265]

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

[@moeburn]

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.

[@christianpaul3497]

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

[@lorenzodefinis832]

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?

[@johnharoldcastillo1710]

did you use python language in your web ?

[@xaviertintin849]

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

[@stefanbramel]

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

[@mcomulu]

Thank you for this perfect Video Tutorial 👍

[@RuiSantosdotme]

Thanks! I'm glad it was helpful!

[@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 kzbin.info/www/bejne/eXKmpICufcafl6s

[@slavotoebog]

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

[@super123paperman]

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.

[@karinyafields9651]

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]

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]

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]

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

[@Ed19601]

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

@@Ed19601 Hey, thanks for the code!

[@rocococamp]

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

[@gonzalorafaelrojasverenzue8961]

Goodnight friend. Gonzalo Rojas from Venezuela writes to you. I am working with the ESP32CAM development card, specifically with the example of CameraWebServer, it compiles and records well on the card but when I click MonitorSerie it generates the IP of my WiFi, however it does not connect with that IP on the internet, also on The Serial Monitor generates the error: E (321) esp_core_dump_flashz ɕ dump partition found! E (321) esp_core_dump_flash: No core dump partition found! COULD YOU HELP ME WITH YOUR ENOUGH EXPERIENCE? Gracias

[@marinformatics4587]

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

[@marionboynton5223]

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?

[@test2514]

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

[@TechInventorAman]

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.

[@soutakbiswas3029]

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

[@herrjonatan5436]

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

[@abhijitrashinkar]

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]

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

[@abhijitrashinkar]

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

[@dave-in-nj9393]

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]

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

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

[@l301681]

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

[@MohamedAli-xb7kh]

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

[@CristiIstrate]

Can we change timezone ? Thank you!

[@felipegarciaencina5117]

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?

[@ashgork]

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

[@MrMikael1337]

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

[@caturpermadi]

is it possible to use ESP32-C3 Mini?

[@MathematikO0]

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

[@davidsantiagogalvan3795]

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

[@amjadalnahhas4295]

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

[@EmilyAngel-i2j]

Se puede actualizar la grafica cada 10 milisegundos?

[@denisgrabocka1269]

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

[@RuiSantosdotme]

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/

[@reynaldobernabe9634]

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]

do you find a way to do tht?

[@diekritik8927]

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

[@luiscoelho3523]

Great project! Thank you for sharing!

[@RuiSantosdotme]

You're welcome! Thanks for watching!

[@RobinsonDanieldosSantos]

Boa Rui, gostei muito!

[@Johnzy33]

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

[@anonimuso]

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.

[@fiendasiddi7151]

Thank you for your video!

[@EliasPereira]

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

[@bharathkalyaan3855]

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

[@JKFCV]

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

[@evilkittyofdoom195]

Inspiring !

[@tariq4846]

Can we do this with Arduino UNO?

[@nrdesign1991]

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

[@engineer1.0]

Web server are local ?

[@jeffvenqueleir2036]

well done i can use this in the futur thanks

[@RuiSantosdotme]

Thanks! I'm glad it was helpful

[@muhammadrifqy24]

is this with mqtt protocol?

[@Johnzy33]

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

[@doc777ga]

Is it possible to do it with a DS18B20

[@Ziqastory]

hi, can this be logged into csv file?

[@fajarwahidan6542]

Can i change the sensor using dht11?

[@giovanipellin3384]

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

[@GiegX]

Thanks a lot!

[@antoniogerson5068]

How do I do with dht11 or 22 ?

[@danielbob7769]

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

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

[@danielbob7769]

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

[@danielbob7769]

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

@@danielbob7769 It worked perfectly! Thanks!

[@danielbob7769]

@@claudineymoratony you're welcome!

[@lafrooptimiste245]

thanks ? how can I record this curve?

[@MrJannemanbrandt]

Very cool, thank you

[@RuiSantosdotme]

Thanks for watching!

[@raveenkumuditharathnayaka7473]

How do we save these data in our PC

[@basmangeorge]

That is good thank you

[@arashhashemi7091]

Thanks a lot sir 🍀🍃☘️👍

[@ismzaxxon]

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

[@buimanhha3741]

Thank you, so much!

[@RuiSantosdotme]

You're welcome! Regards, Rui

[@buimanhha3741]

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

[@augusto182100]

You can save the data after?

[@RuiSantosdotme]

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/

[@oussamathedjfreeman]

To add download chart data into pfg or image file

[@kartikrajurkar3708]

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

[@elektronik1111]

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

[@tmjromao]

Thanks!

[@RuiSantosdotme]

You're welcome!

[@akashahmmed9463]

how can i do it in android please help me