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

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

[@sadeeppriyankara6400]

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

[@RuiSantosdotme]

Thanks! I'm glad it was easy to follow

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

[@ardent4035]

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

[@echoesofmind8430]

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

[@arp_catchall]

Thank you Rui. Found this guide most helpful.

[@101appsCoZa]

fantastic tutorial! just what i was looking for.

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!

[@MrArtyomle]

Just awesome brief tutorial!

[@romafont2860]

Very interesting projects. Congrats!!

[@RuiSantosdotme]

Thanks!

[@kaiomatico]

Wow this is simply perfect! Thank you so much for your hard 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?

[@mcomulu]

Thank you for this perfect Video Tutorial 👍

[@RuiSantosdotme]

Thanks! I'm glad it was helpful!

[@giova2927]

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

[@marinformatics4587]

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

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

[@l301681]

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

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

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

[@luiscoelho3523]

Great project! Thank you for sharing!

[@RuiSantosdotme]

You're welcome! Thanks for watching!

[@herrjonatan5436]

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

[@jonasmolleta7265]

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

[@jeffvenqueleir2036]

well done i can use this in the futur thanks

[@RuiSantosdotme]

Thanks! I'm glad it was helpful

[@fiendasiddi7151]

Thank you for your video!

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

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

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

[@EliasPereira]

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

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

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

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

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

+

[@antoniogerson5068]

How do I do with dht11 or 22 ?

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

[@arashhashemi7091]

Thanks a lot sir 🍀🍃☘️👍

[@evilkittyofdoom195]

Inspiring !

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

[@davidsantiagogalvan3795]

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

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

[@diekritik8927]

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

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

[@9sadra9]

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

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

[@DaStuntChannel]

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

[@CristiIstrate]

Can we change timezone ? Thank you!

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

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

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

[@christianpaul3497]

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

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

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

[@slavotoebog]

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

[@MrJannemanbrandt]

Very cool, thank you

[@RuiSantosdotme]

Thanks for watching!

[@amjadalnahhas4295]

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

[@RobinsonDanieldosSantos]

Boa Rui, gostei muito!

[@irfansensoy5901]

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

[@GiegX]

Thanks a lot!

[@xaviertintin849]

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

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

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

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

[@basmangeorge]

That is good thank you

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

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

[@buimanhha3741]

Thank you, so much!

[@RuiSantosdotme]

You're welcome! Regards, Rui

[@buimanhha3741]

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

[@caturpermadi]

is it possible to use ESP32-C3 Mini?

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

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

[@bharathkalyaan3855]

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

[@johnharoldcastillo1710]

did you use python language in your web ?

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

[@sithiradissanayake3940]

same happend to me.. any ideas on how to correct the error

[@MathematikO0]

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

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

[@nrdesign1991]

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

[@doc777ga]

Is it possible to do it with a DS18B20

[@rocococamp]

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

[@oussamathedjfreeman]

To add download chart data into pfg or image file

[@muhammadrifqy24]

is this with mqtt protocol?

[@fajarwahidan6542]

Can i change the sensor using dht11?

[@lafrooptimiste245]

thanks ? how can I record this curve?

[@EmilyAngel-i2j]

Se puede actualizar la grafica cada 10 milisegundos?

[@tariq4846]

Can we do this with Arduino UNO?

[@JKFCV]

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

[@engineer1.0]

Web server are local ?

[@pupanpoulkaew9860]

Hello, I will reset the time zone. thanyou

[@ismzaxxon]

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

[@giovanipellin3384]

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

[@Ziqastory]

hi, can this be logged into csv file?

[@tmjromao]

Thanks!

[@RuiSantosdotme]

You're welcome!

[@raveenkumuditharathnayaka7473]

How do we save these data in our PC

[@mandyelectronicmaker]

Thank you

[@RuiSantosdotme]

You're welcome!

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

[@widcoshop]

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

[@akashahmmed9463]

how can i do it in android please help me

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

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

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