ESP8266 Plot Sensor Readings in Real Time Charts on a Web Server

Until recent, I had not bothered much about adding graphics to my ESP8266 programs, as I was using Openhab and Influx/Grafana for graphical presentation of data. In fact I never fully realized what was possible on an ESP8266. Then I saw some great graphics for a BME280 on the randomnerdtutorials site from Rui and Sara Santos.
Their approach is to use the ‘Highcharts’ graphic javascript library that is available on line on cloudflare, something that in all honesty I had never thought of.
Anyway, they create 3 separate graphs, for each of the modalities (temperature, humidity and pressure) of the BME280. That works wonder well. I however was more interested in having various (temperature) results in one graph. Before I go further, the fact that Sara and Rui make 3 requests, makes the program easy to follow. They could ofcourse have made one request, receive the temperature, humidity and air pressure in one json message and parse that. Anyway, back to my adaptation of the code.
I found some examples that were using a different library: Chart.js, but I found the program that Sara and Rui presented cleaner and clearer. Also, they fully separate the HTML file from the ino sketch (storing the HTML in SPIFFS) and that was something I wanted too, so I set about to adapt their program to my needs. I must confess that I am not an expert on javascript, asynchronous websites, websockets and AJAX programming, but this seemed like a great way to dive deeper.
I started with identifying where in the program the data was sent and where it was further processed
In the BME280 program 3 separate calls are made in which subsequently temperature, humidity and pressure are sent to the server.
For the temperature this goes as follows:

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readBME280Temperature().c_str());

The request->send_P is a way to send an entire webpage from PROGMEM, but in fact, only the result of the temperature reading is being sent. It seemed to me the best way to add temperature readings (from several DS18B20’s) they needed to be added here somehow. It seemed most sensible to do that with a JSON format.

I found the data was received/processed in the HTML file by the setInterval(function ( ) in the line y = parseFloat(this.responseText);. Obviously I needed to add one or more variables here and instead of using parsefloat, I would need to parse the JSON like this:

var myObj = JSON.parse(this.responseText);
var y=myObj.Temp[0];
var z=myObj.Temp[1];

OK, so that seemed covered, now the Highcharts library needed some further digging in to for me in order to actually add the values to a second and third line in the chart. There are some examples on the cloudflare and jsfiddle website, but those seemed to have little in common with the structure I already had, so obviously this needed some trial and error.

To keep things manageble as an example, I will add 1 channel to the temperature chart that Sara and Rui Santos made and will leave the Humidity and AirPressure graphs untouched.

So first lets adapt the ino file.
Go to the server.on("/temperature" procedure and replace that one by:

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
     String payload = "{\"Temp\":[" + String(readBME280Temperature()) + "," + String(readDS18B20()) + "]}";
    Serial.println(payload);
    request->send(200, "text/plain", payload.c_str());

The readDS18B20() should be your procedure to read the result of a DS18B20 (or any other sensor). and yes, I am using ‘send‘, not ‘send_P.’
The result -i.e. the JSON, can be checked on /temparature20190807_200243.jpg

The HTML file needs various changes,not only in the AJAX-serverrequest section, but also in the Highcharts definitions, so I best just post that here in totality.
You could play around with the various Highchart settings. You may have noticed that the colors of both lines are the same. Might be a good excercise for you to try and define a different color . A hint: in the index.html file, as far as I understand Highcharts, the color statement that Rui&Sara use (series: { color: '#059e8a' }) under ‘plot options’ is a general one for the entire graph (1 of the 3). That is a possibility with more than one line too, but you can also define colors per line. Try it, it is not so hard. (I believe that if you do not define any color at all, Highcharts will use default colours, but I did not try that.)

BME3

It is also easy to change the line markers,BME4

or make a dotted line, give it a try.

BME5

or display negative results in a different color:

bme6

(Yes, I know I am not giving you the exact code for that, trying to stimulate, and really, only takes minutes. You may find this link of interest)

2 thoughts on “ESP8266 Plot Sensor Readings in Real Time Charts on a Web Server”

  1. Hi , another good article from you, I too use Grafana / Influx and really like it. I also saw the Ruis Santos article and thought that would be nice to develop further. However, there is another extremely versatile package, not free but not expensive either, called MegunoLink Pro. This package can display data in a wide variety of formats, multi line charts etc, it can also store data in various formats. It is easy to use and can be used with Arduino’s ESP8266 and probably ESP32 although I haven’t tried the latter. Data can be sent via serial and UDP, I find UDP extremely useful. I thought I would share this with you as it may be on interest. It is particularly when doing multiple sensor comparisons as I did BME280, DS18B20’s, SHT range, DHT22 etc. There is also a free trial version. Support from the team that develop the package is very good too. BTW I have no vested financial interest in this product but I do like to support good quality software sold at a fair price. I don’t work for nothing and I don’t expect other to either.

    1. Thanks. Rui&Sara Santos bring a lot of informative and useful articles. As I mention in the article, I probably would have pulled all the BME280 data with just one call and pull everything in in one JSON, but for educational purposes with this article I didn’t want to wander too far away from Santos’ approach, I only extended one of the requests.
      MegunoLink I didnt know, but it might be worth checking out.
      There are various packages who basically all do the same, it is just that some have more examples and support than others, making it more or less easy.
      Both Highcharts and Chartjs could do a bit better with their instructions. Had to do a lot of searching through existing snippets for just a few adaptations. But once you get it,it becomes simple

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.