ESP32 Plot Sensor Readings in Charts (Multiple Series)

This project shows how to build a web server with the ESP32 to plot sensor readings in charts with multiple series. As an example, we’ll plot sensor readings from four different DS18B20 temperature sensors on the same chart. You can modify the project to plot any other data. To build the charts, we’ll use the Highcharts JavaScript library.
We have a similar tutorial for the ESP8266 NodeMCU board:
ESP8266 NodeMCU Plot Sensor Readings in Charts (Multiple Series)
Project Overview
This project will build a web server with the ESP32 that displays temperature readings from four DS18B20 temperature sensors on the same chart—chart 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.
DS18B20 Temperature Sensor
The
DS18B20 temperature sensor
is a one-wire digital temperature sensor. This means that it just requires one data line to communicate with your microcontroller.
Each sensor has a unique 64-bit serial number, which means you can connect multiple sensors to the same GPIO—as we’ll do in this tutorial. Learn more about the DS18B20 temperature sensor:
ESP32 DS18B20 Temperature Sensor with Arduino IDE (Single, Multiple, Web Server)
ESP32 with Multiple DS18B20 Temperature Sensors
Server-Sent Events
The readings are updated automatically on the web page using Server-Sent Events (SSE).
To learn more about SSE, you can read:
ESP32 Web Server using Server-Sent Events (Update Sensor Readings Automatically)
Files Saved on the Filesystem
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).
Prerequisites
Make sure you check all the prerequisites in this section before continuing with the project.
1. Install ESP32 Board in Arduino IDE
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:
Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, Linux)
If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP32:
Getting Started with VS Code and PlatformIO IDE for ESP32 and ESP8266 (Windows, Mac OS X, Linux Ubuntu)
2. Filesystem Uploader Plugin
To upload the HTML, CSS, and JavaScript files to the ESP32 flash memory (LittleFS), we’ll use a plugin for Arduino IDE:
LittleFS
Filesystem uploader
. Follow the next tutorial to install the filesystem uploader plugin:
Arduino IDE 2: Install ESP32 LittleFS Uploader (Upload Files to the Filesystem)
If you’re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:
ESP32 with VS Code and PlatformIO: Upload Files to LittleFS Filesystem
3. Installing Libraries
To build this project, you need to install the following libraries:
OneWire (by Paul Stoffregen)
DallasTemperature
Arduino_JSON library by Arduino version 0.1.0
ESPAsyncWebServer
by ESP32Async
AsyncTCP
by ESP32Async
You can install the libraries using the Arduino Library Manager. Go to
Sketch
>
Include Library
>
Manage Libraries
and search for the libraries’ names.
Parts Required
To follow this tutorial you need the following parts:
ESP32
(read
Best ESP32 development boards
)
4x
DS18B20 temperature sensor
(one or multiple sensors) –
waterproof version
4.7k Ohm resistor
Jumper wires
Breadboard
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—to experiment with this project…)
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Schematic Diagram
Wire four DS18B20 sensors to your board.
Recommended reading:
ESP32 Pinout Reference: Which GPIO pins should you use?
Getting the DS18B20 Sensors’ Addresses
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’re reading the temperature.
Upload the following code to the ESP32. Make sure you have the right board and COM port selected.
/*
*/

#include `OneWire.h`

// Based on the OneWire library example

OneWire ds(4); //data wire connected to GPIO 4

void setup(void) {
Serial.begin(115200);
}

void loop(void) {
byte i;
byte addr[8];

if (!ds.search(addr)) {
Serial.println(\" No more addresses.\");
Serial.println();
ds.reset_search();
delay(250);
return;
}
Serial.print(\" ROM =\");
for (i = 0; i < 8; i++) {
Serial.write(' ');
Serial.print(addr[i], HEX);
}
}
Wire just one sensor at a time to find its address (or successively add a new sensor) so that you’re able to identify each one by its address. Then, you can add a physical label to each sensor.
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):
Untick the “
Autoscroll
” option so that you’re able to copy the addresses. In our case, we’ve got the following addresses:
Sensor 1:
28 FF A0 11 33 17 3 96
Sensor 2:
28 FF B4 6 33 17 3 4B
Sensor 3:
28 FF 11 28 33 18 1 6B
Sensor 4:
28 FF 43 F5 32 18 2 A8
Organizing Your Files
To keep the project organized and make it easier to understand, we’ll create four files to build the web server:
Arduino sketch
that handles the web server;
index.html
: to define the content of the web page;
sytle.css
: to style the web page;
script.js
: to program the behavior of the web page—handle web server responses, events, create the chart, etc.
You should save the HTML, CSS, and JavaScript files inside a folder called
data
inside the Arduino sketch folder, as shown in the previous diagram. We’ll upload these files to the ESP32 filesystem (LittleFS).
You can download all project files:
Download All the Arduino Project Files
HTML File
Copy the following to the
index.html
file.

<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"icon\" type=\"image/png\" href=\"favicon.png\">
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<script src=\"https://code.highcharts.com/highcharts.js\"></script>
</head>
<body>
<div class=\"topnav\">
ESP WEB SERVER CHARTS</h1>
</div>
<div class=\"content\">
<div class=\"card-grid\">
<div class=\"card\">
<p class=\"card-title\">Temperature Chart</p>
<div id=\"chart-temperature\" class=\"chart-container\"></div>
</div>
</div>
</div>
<script src=\"script.js\"></script>
</body>
</html>
The HTML file for this project is very simple. It includes the
JavaScript Highcharts library
in the head of the HTML file:
<script src=\"https://code.highcharts.com/highcharts.js\"></script>
There is a

section with the id
chart-temperature
where we’ll render our chart later on.
<div id=\"chart-temperature\" class=\"chart-container\"></div>
CSS File
Copy the following styles to your
style.css
file.

html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
p {
font-size: 1.4rem;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
margin: 0;
}
.content {
padding: 5%;
}