![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-Charts-Multiple-Series-Web-Server.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWe have a similar tutorial for the ESP8266 NodeMCU board:<\/p>\n\n\n\n
- \n
- ESP8266 NodeMCU Plot Sensor Readings in Charts (Multiple Series)<\/a><\/li>\n<\/ul>\n\n\n\n
Project Overview<\/h2>\n\n\n\n
This project will build a web server with the ESP32 that displays temperature readings from four DS18B20 temperature sensors on the same chart\u2014chart with multiple series. The chart displays a maximum of 40 data points for each series, and new readings are added every 30 seconds. You can change these values in your code.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/Sensor-readings-Multiple-Series-ESP32-Project-Overview-02.png?resize=750%2C452&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDS18B20 Temperature Sensor<\/h3>\n\n\n\n
The DS18B20 temperature sensor<\/a> is a one-wire digital temperature sensor. This means that it just requires one data line to communicate with your microcontroller.<\/p>\n\n\n
\n![\"DS18B20](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/07\/DS18B20-tempeature-sensor-pinout.jpg?resize=750%2C490&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nEach sensor has a unique 64-bit serial number, which means you can connect multiple sensors to the same GPIO\u2014as we’ll do in this tutorial. Learn more about the DS18B20 temperature sensor:<\/p>\n\n\n\n
- \n
- ESP32 DS18B20 Temperature Sensor with Arduino IDE (Single, Multiple, Web Server)<\/a><\/li>\n\n\n\n
- ESP32 with Multiple DS18B20 Temperature Sensors<\/a><\/li>\n<\/ul>\n\n\n\n
Server-Sent Events<\/h3>\n\n\n\n
The readings are updated automatically on the web page using Server-Sent Events (SSE). <\/p>\n\n\n
\n![\"Sensor](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/Sensor-readings-Multiple-Series-Server-Sent-Events-DS18B20.png?resize=751%2C721&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTo learn more about SSE, you can read: <\/p>\n\n\n\n
- \n
- ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)<\/a><\/li>\n<\/ul>\n\n\n\n
Files Saved on the Filesystem<\/h3>\n\n\n\n
To keep our project better organized and easier to understand, we’ll save the HTML, CSS, and JavaScript files to build the web page on the board’s filesystem (LittleFS).<\/p>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
Make sure you check all the prerequisites in this section before continuing with the project.<\/p>\n\n\n\n
1. Install ESP32 Board in Arduino IDE<\/h3>\n\n\n\n
We’ll program the ESP32 using Arduino IDE. So, you must have the ESP32 add-on installed. Follow the next tutorial if you haven’t already:<\/p>\n\n\n\n
- \n
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:<\/p>\n\n\n\n
- \n
- Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)<\/a><\/li>\n<\/ul>\n\n\n\n
2. Filesystem Uploader Plugin<\/h3>\n\n\n\n
To upload the HTML, CSS, and JavaScript files to the ESP32 flash memory (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS<\/strong> Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin:<\/p>\n\n\n\n
- \n
- Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n
If you’re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n
- \n
- ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem<\/a><\/li>\n<\/ul>\n\n\n\n
3. Installing Libraries<\/h3>\n\n\n\n
To build this project, you need to install the following libraries:<\/p>\n\n\n\n
- \n
- OneWire (by Paul Stoffregen)<\/a><\/li>\n\n\n\n
- DallasTemperature<\/a><\/li>\n\n\n\n
- Arduino_JSON library by Arduino version 0.1.0<\/a><\/li>\n\n\n\n
- ESPAsyncWebServer <\/a>by ESP32Async<\/li>\n\n\n\n
- AsyncTCP<\/a> by ESP32Async<\/li>\n<\/ul>\n\n\n\n
You can install the libraries using the Arduino Library Manager. Go to\u00a0Sketch\u00a0<\/strong>>\u00a0Include Library<\/strong>\u00a0>\u00a0Manage Libraries<\/strong>\u00a0and search for the libraries’ names.<\/p>\n\n\n\n
Parts Required<\/h2>\n\n\n\n
To follow this tutorial you need the following parts:<\/p>\n\n\n\n
- \n
- ESP32<\/a> (read Best ESP32 development boards<\/a>)<\/li>\n\n\n\n
- 4x DS18B20 temperature sensor<\/a> (one or multiple sensors) \u2013 waterproof version<\/a><\/li>\n\n\n\n
- 4.7k Ohm resistor<\/a><\/li>\n\n\n\n
- Jumper wires<\/a><\/li>\n\n\n\n
- Breadboard<\/a><\/li>\n<\/ul>\n\n\n\n
If you don’t have four DS18B20 sensors, you can use three or two. Alternatively, you can also use other sensors (you need to modify the code) or data from any other source (for example, sensor readings received via MQTT, ESP-NOW, or random values\u2014to experiment with this project…)<\/p>\n\n\n
You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p>
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\nSchematic Diagram<\/h2>\n\n\n\n
Wire four DS18B20 sensors to your board.<\/p>\n\n\n
\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/ESP32-Multiple-DS18B20-Sensors-Diagram.png?resize=898%2C962&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nRecommended reading: ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n
Getting the DS18B20 Sensors’ Addresses<\/h2>\n\n\n\n
Each DS18B20 temperature sensor has an assigned serial number. First, you need to find that number to label each sensor accordingly. You need to do this so that later you know from which sensor you\u2019re reading the temperature.<\/p>\n\n\n\n
Upload the following code to the ESP32. Make sure you have the right board and COM port selected.<\/p>\n\n\n
\/*\n * Rui Santos \n * Complete Project Details https:\/\/randomnerdtutorials.com\n *\/\n\n#include <OneWire.h>\n\n\/\/ Based on the OneWire library example\n\nOneWire ds(4); \/\/data wire connected to GPIO 4\n\nvoid setup(void) {\n Serial.begin(115200);\n}\n\nvoid loop(void) {\n byte i;\n byte addr[8];\n \n if (!ds.search(addr)) {\n Serial.println(" No more addresses.");\n Serial.println();\n ds.reset_search();\n delay(250);\n return;\n }\n Serial.print(" ROM =");\n for (i = 0; i < 8; i++) {\n Serial.write(' ');\n Serial.print(addr[i], HEX);\n }\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Wire just one sensor at a time to find its address (or successively add a new sensor) so that you\u2019re able to identify each one by its address. Then, you can add a physical label to each sensor.<\/p>\n\n\n\n
Open the Serial Monitor at a baud rate of 115200, press the on-board RST\/EN button and you should get something as follows (but with different addresses):<\/p>\n\n\n
\n![\"Getting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/04\/DS18B20-addresses-Serial-Monitor.png?resize=1200%2C412&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nUntick the \u201cAutoscroll<\/strong>\u201d option so that you\u2019re able to copy the addresses. In our case, we\u2019ve got the following addresses:<\/p>\n\n\n\n
- \n
- Sensor 1: 28 FF A0 11 33 17 3 96<\/strong><\/li>\n\n\n\n
- Sensor 2: 28 FF B4 6 33 17 3 4B<\/strong><\/li>\n\n\n\n
- Sensor 3: 28 FF 11 28 33 18 1 6B<\/strong><\/li>\n\n\n\n
- Sensor 4: 28 FF 43 F5 32 18 2 A8<\/strong><\/li>\n<\/ul>\n\n\n\n
Organizing Your Files<\/h2>\n\n\n\n
To keep the project organized and make it easier to understand, we\u2019ll create four files to build the web server:<\/p>\n\n\n\n
- \n
- Arduino sketch <\/strong>that handles the web server;<\/li>\n\n\n\n
- index.html<\/strong>: to define the content of the web page;<\/li>\n\n\n\n
- sytle.css<\/strong>: to style the web page;<\/li>\n\n\n\n
- script.js<\/strong>: to program the behavior of the web page\u2014handle web server responses, events, create the chart, etc.<\/li>\n<\/ul>\n\n\n
\n![\"Organizing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/06\/folder-structure-1.png?resize=511%2C358&quality=100&strip=all&ssl=1\")
<\/a><\/figure><\/div>\n\n\nYou should save the HTML, CSS, and JavaScript files inside a folder called data<\/strong> <\/em>inside the Arduino sketch folder, as shown in the previous diagram. We\u2019ll upload these files to the ESP32 filesystem (LittleFS).<\/p>\n\n\n\n
You can download all project files:<\/strong><\/p>\n\n\n\n
- \n
- Download All the Arduino Project Files<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n
HTML File<\/h2>\n\n\n\n
Copy the following to the index.html<\/span> file.<\/p>\n\n\n
<!-- Complete project details: https:\/\/randomnerdtutorials.com\/esp32-plot-readings-charts-multiple\/ -->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>ESP IOT DASHBOARD<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n <script src="https:\/\/code.highcharts.com\/highcharts.js"><\/script>\r\n <\/head>\r\n <body>\r\n <div class="topnav">\r\n <h1>ESP WEB SERVER CHARTS<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <p class="card-title">Temperature Chart<\/p>\r\n <div id="chart-temperature" class="chart-container"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src="script.js"><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
The HTML file for this project is very simple. It includes the JavaScript Highcharts library<\/a> in the head of the HTML file:<\/p>\n\n\n\n
<script src=\"https:\/\/code.highcharts.com\/highcharts.js\"><\/script><\/code><\/pre>\n\n\n\nThere is a <div><\/span><\/span> section with the id chart-temperature<\/span> where we’ll render our chart later on. <\/p>\n\n\n\n
<div id=\"chart-temperature\" class=\"chart-container\"><\/div><\/code><\/pre>\n\n\n\nCSS File<\/h2>\n\n\n\n
Copy the following styles to your style.css<\/span> file.<\/p>\n\n\n
\/* Complete project details: https:\/\/randomnerdtutorials.com\/esp32-plot-readings-charts-multiple\/ *\/\r\n\r\nhtml {\r\n font-family: Arial, Helvetica, sans-serif;\r\n display: inline-block;\r\n text-align: center;\r\n}\r\nh1 {\r\n font-size: 1.8rem;\r\n color: white;\r\n}\r\np {\r\n font-size: 1.4rem;\r\n}\r\n.topnav {\r\n overflow: hidden;\r\n background-color: #0A1128;\r\n}\r\nbody {\r\n margin: 0;\r\n}\r\n.content {\r\n padding: 5%;\r\n}\r\n.card-grid {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-gap: 2rem;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n}\r\n.card {\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n}\r\n.card-title {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #034078\r\n}\r\n.chart-container {\r\n padding-right: 5%;\r\n padding-left: 5%;\r\n}\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
JavaScript File (creating the charts)<\/h2>\n\n\n\n
Copy the following to the script.js<\/span> file. Here’s a list of what this code does:<\/p>\n\n\n\n
- \n
- initializing the event source protocol;<\/li>\n\n\n\n
- adding an event listener for the new_readings<\/span> event;<\/li>\n\n\n\n
- creating the chart;<\/li>\n\n\n\n
- getting the latest sensor readings from the new_readings<\/span> event and plot them in the chart;<\/li>\n\n\n\n
- making an HTTP GET request for the current sensor readings when you access the web page for the first time.<\/li>\n<\/ul>\n\n\n
\/\/ Complete project details: https:\/\/randomnerdtutorials.com\/esp32-plot-readings-charts-multiple\/\r\n\r\n\/\/ Get current sensor readings when the page loads\r\nwindow.addEventListener('load', getReadings);\r\n\r\n\/\/ Create Temperature Chart\r\nvar chartT = new Highcharts.Chart({\r\n chart:{\r\n renderTo:'chart-temperature'\r\n },\r\n series: [\r\n {\r\n name: 'Temperature #1',\r\n type: 'line',\r\n color: '#101D42',\r\n marker: {\r\n symbol: 'circle',\r\n radius: 3,\r\n fillColor: '#101D42',\r\n }\r\n },\r\n {\r\n name: 'Temperature #2',\r\n type: 'line',\r\n color: '#00A6A6',\r\n marker: {\r\n symbol: 'square',\r\n radius: 3,\r\n fillColor: '#00A6A6',\r\n }\r\n },\r\n {\r\n name: 'Temperature #3',\r\n type: 'line',\r\n color: '#8B2635',\r\n marker: {\r\n symbol: 'triangle',\r\n radius: 3,\r\n fillColor: '#8B2635',\r\n }\r\n },\r\n {\r\n name: 'Temperature #4',\r\n type: 'line',\r\n color: '#71B48D',\r\n marker: {\r\n symbol: 'triangle-down',\r\n radius: 3,\r\n fillColor: '#71B48D',\r\n }\r\n },\r\n ],\r\n title: {\r\n text: undefined\r\n },\r\n xAxis: {\r\n type: 'datetime',\r\n dateTimeLabelFormats: { second: '%H:%M:%S' }\r\n },\r\n yAxis: {\r\n title: {\r\n text: 'Temperature Celsius Degrees'\r\n }\r\n },\r\n credits: {\r\n enabled: false\r\n }\r\n});\r\n\r\n\r\n\/\/Plot temperature in the temperature chart\r\nfunction plotTemperature(jsonValue) {\r\n\r\n var keys = Object.keys(jsonValue);\r\n console.log(keys);\r\n console.log(keys.length);\r\n\r\n for (var i = 0; i < keys.length; i++){\r\n var x = (new Date()).getTime();\r\n console.log(x);\r\n const key = keys[i];\r\n var y = Number(jsonValue[key]);\r\n console.log(y);\r\n\r\n if(chartT.series[i].data.length > 40) {\r\n chartT.series[i].addPoint([x, y], true, true, true);\r\n } else {\r\n chartT.series[i].addPoint([x, y], true, false, true);\r\n }\r\n\r\n }\r\n}\r\n\r\n\/\/ Function to get current readings on the webpage when it loads for the first time\r\nfunction getReadings(){\r\n var xhr = new XMLHttpRequest();\r\n xhr.onreadystatechange = function() {\r\n if (this.readyState == 4 && this.status == 200) {\r\n var myObj = JSON.parse(this.responseText);\r\n console.log(myObj);\r\n plotTemperature(myObj);\r\n }\r\n };\r\n xhr.open("GET", "\/readings", true);\r\n xhr.send();\r\n}\r\n\r\nif (!!window.EventSource) {\r\n var source = new EventSource('\/events');\r\n\r\n source.addEventListener('open', function(e) {\r\n console.log("Events Connected");\r\n }, false);\r\n\r\n source.addEventListener('error', function(e) {\r\n if (e.target.readyState != EventSource.OPEN) {\r\n console.log("Events Disconnected");\r\n }\r\n }, false);\r\n\r\n source.addEventListener('message', function(e) {\r\n console.log("message", e.data);\r\n }, false);\r\n\r\n source.addEventListener('new_readings', function(e) {\r\n console.log("new_readings", e.data);\r\n var myObj = JSON.parse(e.data);\r\n console.log(myObj);\r\n plotTemperature(myObj);\r\n }, false);\r\n}\r\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\n
Get Readings<\/h3>\n\n\n\n
When you access the web page for the first time, we\u2019ll request the server to get the current sensor readings. Otherwise, we would have to wait for new sensor readings to arrive (via Server-Sent Events), which can take some time depending on the interval that you set on the server.<\/p>\n\n\n\n
Add an event listener that calls the getReadings<\/span> function when the web page loads.<\/p>\n\n\n\n
\/\/ Get current sensor readings when the page loads\nwindow.addEventListener('load', getReadings);<\/code><\/pre>\n\n\n\nThe window<\/span> object represents an open window in a browser. The addEventListener()<\/span> method sets up a function to be called when a certain event happens. In this case, we\u2019ll call the getReadings<\/span> function when the page loads (‘load’<\/span>) to get the current sensor readings.<\/p>\n\n\n\n
Now, let\u2019s take a look at the getReadings<\/span> function. Create a new XMLHttpRequest<\/span> object. Then, send a GET<\/span> request to the server on the \/readings<\/span> URL using the open()<\/span> and send()<\/span> methods.<\/p>\n\n\n\n
function getReadings() {\n var xhr = new XMLHttpRequest();\n xhr.open(\"GET\", \"\/readings\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\nWhen we send that request, the ESP will send a response with the required information. So, we need to handle what happens when we receive the response. We\u2019ll use the onreadystatechange<\/span> property that defines a function to be executed when the readyState<\/span> property changes. The readyState<\/span> property holds the status of the XMLHttpRequest<\/span>. The response of the request is ready when the readyState<\/span> is 4<\/span>, and the status is 200<\/span>.<\/p>\n\n\n\n
- \n
- readyState = 4<\/span> means that the request finished and the response is ready;<\/li>\n\n\n\n
- status = 200<\/span> means \u201cOK\u201d<\/li>\n<\/ul>\n\n\n\n
So, the request should look something like this:<\/p>\n\n\n\n
function getStates(){\n var xhr = new XMLHttpRequest();\n xhr.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n \u2026 DO WHATEVER YOU WANT WITH THE RESPONSE \u2026\n }\n };\n xhr.open(\"GET\", \"\/states\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\nThe response sent by the ESP is the following text in JSON format.<\/p>\n\n\n\n
{\n \"sensor1\" : \"25\",\n \"sensor2\" : \"21\",\n \"sensor3\" : \"22\",\n \"sensor4\" : \"23\"\n}<\/code><\/pre>\n\n\n\nWe need to convert the JSON string into a JSON object using the parse()<\/span> method. The result is saved on the myObj<\/span> variable.<\/p>\n\n\n\n
var myObj = JSON.parse(this.responseText);<\/code><\/pre>\n\n\n\nThe myObj<\/span> varible is a JSON object that contains all the temperature readings. We want to plot those readings on the same chart. For that, we’ve created a function called plotTemperature()<\/span> that plots the temperatures stored in a JSON object on a chart.<\/p>\n\n\n\n
plotTemperature(myObj);<\/code><\/pre>\n\n\n\nHere\u2019s the complete getReadings()<\/span> function.<\/p>\n\n\n\n
function getReadings(){\n var xhr = new XMLHttpRequest();\n xhr.onreadystatechange = function() {\n if (this.readyState == 4 && this.status == 200) {\n var myObj = JSON.parse(this.responseText);\n console.log(myObj);\n plotTemperature(myObj);\n }\n }; \n xhr.open(\"GET\", \"\/readings\", true);\n xhr.send();\n}<\/code><\/pre>\n\n\n\nCreating the Chart<\/h3>\n\n\n\n
The following lines create the charts with multiple series.<\/p>\n\n\n\n
\/\/ Create Temperature Chart\nvar chartT = new Highcharts.Chart({\n chart:{ \n renderTo:'chart-temperature' \n },\n series: [\n {\n name: 'Temperature #1',\n type: 'line',\n color: '#101D42',\n marker: {\n symbol: 'circle',\n radius: 3,\n fillColor: '#101D42',\n }\n },\n {\n name: 'Temperature #2',\n type: 'line',\n color: '#00A6A6',\n marker: {\n symbol: 'square',\n radius: 3,\n fillColor: '#00A6A6',\n }\n },\n {\n name: 'Temperature #3',\n type: 'line',\n color: '#8B2635',\n marker: {\n symbol: 'triangle',\n radius: 3,\n fillColor: '#8B2635',\n }\n },\n {\n name: 'Temperature #4',\n type: 'line',\n color: '#71B48D',\n marker: {\n symbol: 'triangle-down',\n radius: 3,\n fillColor: '#71B48D',\n }\n },\n ],\n title: { \n text: undefined\n },\n xAxis: {\n type: 'datetime',\n dateTimeLabelFormats: { second: '%H:%M:%S' }\n },\n yAxis: {\n title: { \n text: 'Temperature Celsius Degrees' \n }\n },\n credits: { \n enabled: false \n }\n});<\/code><\/pre>\n\n\n\nTo create a new chart, use the new Highcharts.Chart()<\/span> method and pass as argument the chart properties.<\/p>\n\n\n\n
var chartT = new Highcharts.Chart({<\/code><\/pre>\n\n\n\nIn the next line, define where you want to put the chart. In our example, we want to place it in the HTML element with the chart-temperature<\/span> id\u2014see the HTML file section<\/a>.<\/p>\n\n\n\n
chart:{ \n renderTo:'chart-temperature' \n},<\/code><\/pre>\n\n\n\nThen, define the options for the series. The following lines create the first series:<\/p>\n\n\n\n
series: [\n {\n name: 'Temperature #1',\n type: 'line',\n color: '#101D42',\n marker: {\n symbol: 'circle',\n radius: 3,\n fillColor: '#101D42',\n }<\/code><\/pre>\n\n\n\nThe name<\/span> property defines the series name. The type<\/span> property defines the type of chart\u2014in this case, we want to build a line chart. The color<\/span> refers to the color of the line\u2014you can change it to whatever color you desire. <\/p>\n\n\n\n
Next, define the marker<\/span> properties. You can choose from several default symbols\u2014square<\/span>, circle<\/span>, diamond<\/span>, triangle<\/span>, triangle-down<\/span>. You can also create your own symbols. The radius<\/span> refers to the size of the marker, and the fillColor<\/span> refers to the color of the marker. There are other properties you can use to customize the marker\u2014learn more<\/a>. <\/p>\n\n\n\n
marker: {\n symbol: 'circle',\n radius: 3,\n fillColor: '#101D42',\n}<\/code><\/pre>\n\n\n\nCreating the other series is similar, but we’ve chosen different names, markers and colors.<\/p>\n\n\n\n
There are many other options you can use to customize your series\u2014check the documentation about plotOptions<\/a>.<\/p>\n\n\n\n
You can also define the chart title\u2014in this case, as we’ve already defined a title for the chart in a heading of the HTML file, we will not set the title here. The title is displayed by default, so we must set it to undefined<\/span>.<\/p>\n\n\n\n
title: { \n text: undefined\n},<\/code><\/pre>\n\n\n\nDefine the properties for the X axis\u2014this is the axis where we’ll display data and time. Check more options to customize the X axis<\/a>.<\/p>\n\n\n\n
xAxis: {\n type: 'datetime',\n dateTimeLabelFormats: { second: '%H:%M:%S' }\n},<\/code><\/pre>\n\n\n\nWe set the title for the y axis. See all available properties for the y axis<\/a>.<\/p>\n\n\n\n
yAxis: {\n title: { \n text: 'Temperature Celsius Degrees' \n }\n}<\/code><\/pre>\n\n\n\nTime Zone<\/h4>\n\n\n\n
If, for some reason, after building the project, the charts are not showing the right time zone, add the following lines to the JavaScript file after the second line:<\/p>\n\n\n\n
Highcharts.setOptions({\n time: {\n timezoneOffset: -60 \/\/Add your time zone offset here in minutes\n }\n});<\/code><\/pre>\n\n\n\nThe charts will show the time in UTC. If you want it to display in your timezone, you must set the useUTC<\/span> parameter (which is a time<\/span> parameter) as false<\/span>:<\/p>\n\n\n\n
time:{\n useUTC: false\n},<\/code><\/pre>\n\n\n\nSo, add that when creating the chart as follows:<\/p>\n\n\n\n
var chart = new Highcharts.Chart({\n time:{\n useUTC: false\n },\n(\u2026)<\/code><\/pre>\n\n\n\nTo learn more about this property, check this link on the documentation: https:\/\/api.highcharts.com\/highcharts\/time.useUTC<\/a><\/p>\n\n\n\n
Finally, set the credits<\/span> option to false<\/span> to hide the credits of the Highcharts library.<\/p>\n\n\n\n
credits: { \n enabled: false \n}<\/code><\/pre>\n\n\n\nPlot Temperatures<\/h3>\n\n\n\n
We’ve created the plotTemperature()<\/span> function that accepts as an argument a JSON object with the temperature readings we want to plot.<\/p>\n\n\n\n
- status = 200<\/span> means \u201cOK\u201d<\/li>\n<\/ul>\n\n\n\n
- index.html<\/strong>: to define the content of the web page;<\/li>\n\n\n\n
- Sensor 2: 28 FF B4 6 33 17 3 4B<\/strong><\/li>\n\n\n\n
- 4x DS18B20 temperature sensor<\/a> (one or multiple sensors) \u2013 waterproof version<\/a><\/li>\n\n\n\n
- DallasTemperature<\/a><\/li>\n\n\n\n
- OneWire (by Paul Stoffregen)<\/a><\/li>\n\n\n\n
- ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem<\/a><\/li>\n<\/ul>\n\n\n\n
- Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)<\/a><\/li>\n<\/ul>\n\n\n\n
- Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)<\/a><\/li>\n<\/ul>\n\n\n\n
- Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n
- ESP32 with Multiple DS18B20 Temperature Sensors<\/a><\/li>\n<\/ul>\n\n\n\n
- ESP32 DS18B20 Temperature Sensor with Arduino IDE (Single, Multiple, Web Server)<\/a><\/li>\n\n\n\n