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)