ESP8266 Số đọc cảm biến biểu đồ NodeMCU trong biểu đồ (Nhiều chuỗi)

ESP8266 Số đọc cảm biến biểu đồ NodeMCU trong
biểu đồ (Nhiều chuỗi)
Dự án này chỉ ra cách xây dựng một máy chủ web với bảng ESP8266 NodeMCU để vẽ
các bài đọc cảm biến trong các biểu đồ với nhiều chuỗi. Ví dụ: chúng tơi sẽ vẽ số đọc
cảm biến từ bốn cảm biến nhiệt độ DS18B20 khác nhau trên cùng một biểu đồ. Bạn có
thể sửa đổi dự án để vẽ bất kỳ dữ liệu nào khác. Để xây dựng các biểu đồ, chúng ta sẽ
sử dụng thư viện JavaScript Highcharts.

Chúng tơi có một hướng dẫn tương tự cho bảng ESP32:
Số đọc cảm biến biểu đồ ESP32 trong biểu đồ (Nhiều chuỗi)

Tổng quan dự án
Dự án này sẽ xây dựng một máy chủ web với bảng mạch ESP8266 NodeMCU hiển thị
các chỉ số nhiệt độ từ bốn cảm biến nhiệt độ DS18B20 trên cùng một biểu đồ — biểu đồ
với nhiều chuỗi. Biểu đồ hiển thị tối đa 40 điểm dữ liệu cho mỗi chuỗi và các bài đọc mới
được thêm vào sau mỗi 30 giây. Bạn có thể thay đổi các giá trị này trong mã của mình.

1/31


Cảm biến nhiệt độ DS18B20
Cảm biến nhiệt độ DS18B20 là cảm biến nhiệt độ kỹ thuật số một dây. Điều này có nghĩa
là nó chỉ u cầu một dịng dữ liệu để giao tiếp với vi điều khiển của bạn.

2/31


Mỗi cảm biến có một số sê-ri 64 bit duy nhất, có nghĩa là bạn có thể kết nối nhiều cảm
biến với cùng một GPIO — như chúng ta sẽ làm trong hướng dẫn này. Tìm hiểu thêm về
cảm biến nhiệt độ DS18B20:
Cảm biến nhiệt độ ESP8266 DS18B20 với Arduino IDE (Máy chủ Web, Đơn, Nhiều)

Sự kiện do máy chủ gửi
Các bài đọc được cập nhật tự động trên trang web bằng cách sử dụng Sự kiện do Máy
chủ Gửi (SSE).

3/31


Để tìm hiểu thêm về SSE với ESP8266, bạn có thể đọc:
ESP8266 Máy chủ Web NodeMCU sử dụng các sự kiện do máy chủ gửi (Cập nhật
cảm biến đọc tự động)

Các tệp được lưu trên hệ thống tệp (LittleFS)
Để giữ cho dự án của chúng tôi được tổ chức tốt hơn và dễ hiểu hơn, chúng tôi sẽ lưu
các tệp HTML, CSS và JavaScript để xây dựng trang web trên hệ thống tệp của bảng
(LittleFS).
Tìm hiểu thêm về cách sử dụng LittleFS với ESP8266, bạn có thể đọc:
Cài đặt ESP8266 NodeMCU LittleFS Filesystem Uploader trong Arduino IDE

Điều kiện tiên quyết
Hãy chắc chắn rằng bạn kiểm tra tất cả các điều kiện tiên quyết trong phần này trước khi
tiếp tục với dự án.

1. Cài đặt bảng ESP8266 trong Arduino IDE
Chúng tôi sẽ lập trình ESP8266 bằng Arduino IDE. Vì vậy, bạn phải cài đặt tiện ích bổ
sung ESP8266. Thực hiện theo hướng dẫn tiếp theo nếu bạn chưa có:
Cài đặt bo mạch ESP8266 trong Arduino IDE (Windows, Mac OS X, Linux)
Nếu bạn muốn sử dụng VS Code với tiện ích mở rộng PlatformIO, hãy làm theo hướng
dẫn tiếp theo để tìm hiểu cách lập trình ESP8266:
4/31

Bắt đầu với VS Code và PlatformIO IDE cho ESP32 và ESP8266 (Windows, Mac
OS X, Linux Ubuntu)

2. Plugin Filesystem Uploader
Để tải các tệp HTML, CSS và JavaScript lên bộ nhớ flash ESP8266 (LittleFS), chúng tôi
sẽ sử dụng một plugin cho trình tải lên hệ thống tệp Arduino IDE: LittleFS. Làm theo
hướng dẫn tiếp theo để cài đặt plugin tải lên hệ thống tệp:
Cài đặt ESP8266 NodeMCU LittleFS Filesystem Uploader trong Arduino IDE
Nếu bạn đang sử dụng VS Code với tiện ích mở rộng PlatformIO, hãy đọc hướng dẫn
sau để tìm hiểu cách tải tệp lên hệ thống tệp:
ESP8266 NodeMCU với VS Code và PlatformIO: Tải tệp lên hệ thống tệp (LittleFS)

3. Cài đặt thư viện
Để xây dựng dự án này, bạn cần cài đặt các thư viện sau:
Bạn có thể cài đặt hai thư viện đầu tiên bằng Trình quản lý thư viện Arduino. Đi tới
Sketch > Include Library > Manage Libraries và tìm kiếm tên thư viện.
Các thư viện ESPAsyncWebServer và AsynTCP khơng có sẵn để cài đặt thơng qua Trình
quản lý thư viện Arduino, vì vậy bạn cần sao chép các tệp thư viện vào thư mục Thư viện
cài đặt Arduino. Ngồi ra, trong Arduino IDE, bạn có thể vào Sketch > Include Library >
Add .zip Library và chọn các thư viện bạn vừa tải xuống.

Cài đặt thư viện (VS Code + PlatformIO)
Nếu bạn đang lập trình ESP8266 bằng PlatformIO, bạn nên thêm các dòng sau vào tệp
platformio.ini để bao gồm các thư viện (cũng thay đổi tốc độ Serial Monitor thành
115200):
monitor_speed = 115200

lib_deps = ESP Async WebServer

arduino-libraries/Arduino_JSON @ 0.1.0

milesburton/[email protected]^3.9.1

paulstoffregen/[email protected]^2.3.5

Các bộ phận cần thiết
Để làm theo hướng dẫn này, bạn cần các phần sau:
ESP8266 (đọc bảng phát triển ESP8266 tốt nhất)
Cảm biến nhiệt độ 4x DS18B20 (một hoặc nhiều cảm biến) – phiên bản chống thấm
nước
Điện trở 4.7k Ohm
Dây nhảy

5/31


Breadboard
Nếu bạn khơng có bốn cảm biến DS18B20, bạn có thể sử dụng ba hoặc hai. Ngồi ra,
bạn cũng có thể sử dụng các cảm biến khác (bạn cần sửa đổi mã) hoặc dữ liệu từ bất kỳ
nguồn nào khác (ví dụ: số đọc cảm biến nhận được qua MQTT, ESP-NOW hoặc các giá
trị ngẫu nhiên — để thử nghiệm với dự án này...)

Sơ đồ
Nối bốn cảm biến DS18B20 vào bo mạch của bạn.

Đề xuất đọc: Tham khảo sơ đồ chân ESP8266: Bạn nên sử dụng chân GPIO nào?

Lấy địa chỉ của cảm biến DS18B20

6/31


Mỗi cảm biến nhiệt độ DS18B20 có một số sê-ri được chỉ định. Đầu tiên, bạn cần tìm con
số đó để gắn nhãn cho từng cảm biến cho phù hợp. Bạn cần làm điều này để sau này
bạn biết bạn đang đọc nhiệt độ từ cảm biến nào.
Tải mã sau lên ESP8266. Đảm bảo rằng bạn đã chọn đúng bo mạch và cổng COM.
/*
* Rui Santos

* Complete Project Details

*/

#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);

}

}


Xem mã thô
Chỉ cần nối dây một cảm biến tại một thời điểm để tìm địa chỉ của nó (hoặc liên tiếp thêm
một cảm biến mới) để bạn có thể xác định từng cảm biến theo địa chỉ của nó. Sau đó,
bạn có thể thêm nhãn vật lý vào mỗi cảm biến.
Mở Serial Monitor với tốc độ truyền 115200, nhấn nút RST / EN trên bo mạch và bạn sẽ
nhận được một cái gì đó như sau (nhưng với các địa chỉ khác nhau):

7/31


Bỏ chọn tùy chọn "Tự động cuộn" để bạn có thể sao chép các địa chỉ. Trong trường hợp
của chúng tơi, chúng tơi có các địa chỉ sau:
Cảm biến 1: 28 FF A0 11 33 17 3 96
Cảm biến 2: 28 FF B4 6 33 17 3 4B
Cảm biến 3: 28 FF 11 28 33 18 1 6B
Cảm biến 4: 28 FF 43 F5 32 18 2 A8

Sắp xếp các tệp của bạn
Để giữ cho dự án được tổ chức và dễ hiểu hơn, chúng tôi sẽ tạo bốn tệp để xây dựng
máy chủ web:
Bản phác thảo Arduino xử lý máy chủ web;
index.html: để xác định nội dung của trang web;
sytle.css: để tạo kiểu cho trang web;
Tập lệnh.js: để lập trình hành vi của trang web — xử lý các phản hồi, sự kiện của
máy chủ web, tạo biểu đồ, v.v.

8/31

Bạn nên lưu các tệp HTML, CSS và JavaScript bên trong một thư mục được gọi là dữ
liệu bên trong thư mục phác thảo Arduino, như thể hiện trong sơ đồ trước. Chúng tôi sẽ
tải các tệp này lên hệ thống tệp ESP8266 (LittleFS).
Bạn có thể tải xuống tất cả các tệp dự án:
Tải xuống tất cả các tệp dự án Arduino

Tệp HTML
Sao chép nội dung sau vào tệp .html chỉ mục.
<!-- Complete project details: -->

<!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=" />
</head>

<body>

<div class="topnav">

ESP WEB SERVER CHARTS

</div>

<div class="content">

<div class="card-grid">

<div class="card">

Temperature Chart

<div id="chart-temperature" class="chart-container"></div>

</div>

</div>

</div>

<script src="script.js"></script>

</body>

</html>

Xem mã thô
Tệp HTML cho dự án này rất đơn giản. Nó bao gồm thư viện JavaScript Highcharts ở
đầu tệp HTML:
<script src=" />
Có một phần <div> với id chart-temperature nơi chúng ta sẽ hiển thị biểu đồ của chúng ta
sau này.
<div id="chart-temperature" class="chart-container"></div>

Tệp CSS
9/31


Sao chép các kiểu sau vào tệp .css kiểu của bạn .
/* Complete project details: */

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%;

}

.card-grid {

max-width: 1200px;

margin: 0 auto;

display: grid;

grid-gap: 2rem;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.card {

background-color: white;

box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);

}

.card-title {

font-size: 1.2rem;

font-weight: bold;

color: #034078

}

.chart-container {

padding-right: 5%;

padding-left: 5%;

}


Xem mã thô

Tệp JavaScript (tạo biểu đồ)
Sao chép nội dung sau vào tập lệnh.js tệp. Dưới đây là danh sách chức năng của mã
này:

10/31


khởi tạo giao thức nguồn sự kiện;
thêm trình nghe sự kiện cho sự kiện new_readings;
tạo biểu đồ;
nhận các bài đọc cảm biến mới nhất từ sự kiện new_readings và vẽ chúng trong
biểu đồ;
thực hiện yêu cầu HTTP GET cho các bài đọc cảm biến hiện tại khi bạn truy cập
trang web lần đầu tiên.

11/31

// Complete project details: />
// Get current sensor readings when the page loads

window.addEventListener('load', getReadings);

// Create Temperature Chart

var chartT = new Highcharts.Chart({

chart:{

renderTo:'chart-temperature'

},

series: [

{

name: 'Temperature #1',

type: 'line',

color: '#101D42',

marker: {

symbol: 'circle',

radius: 3,

fillColor: '#101D42',

}

},

{

name: 'Temperature #2',

type: 'line',

color: '#00A6A6',

marker: {

symbol: 'square',

radius: 3,

fillColor: '#00A6A6',

}

},

{

name: 'Temperature #3',

type: 'line',

color: '#8B2635',

marker: {

symbol: 'triangle',

radius: 3,

fillColor: '#8B2635',

}

},

{

name: 'Temperature #4',

type: 'line',

color: '#71B48D',

marker: {

symbol: 'triangle-down',

radius: 3,

fillColor: '#71B48D',

}

},

],

title: {

text: undefined

},

12/31


xAxis: {

type: 'datetime',

dateTimeLabelFormats: { second: '%H:%M:%S' }

},

yAxis: {

title: {

text: 'Temperature Celsius Degrees'

}

},

credits: {

enabled: false

}

});


//Plot temperature in the temperature chart

function plotTemperature(jsonValue) {

var keys = Object.keys(jsonValue);

console.log(keys);

console.log(keys.length);

for (var i = 0; i < keys.length; i++){

var x = (new Date()).getTime();

console.log(x);

const key = keys[i];

var y = Number(jsonValue[key]);

console.log(y);

if(chartT.series[i].data.length > 40) {

chartT.series[i].addPoint([x, y], true, true, true);

} else {

chartT.series[i].addPoint([x, y], true, false, true);

}

}

}

// Function to get current readings on the webpage when it loads for the first
time

function getReadings(){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

console.log(this.responseText);

}

};

xhr.open("GET", "/readings", true);

xhr.send();

}

if (!!window.EventSource) {

var source = new EventSource('/events');

source.addEventListener('open', function(e) {

console.log("Events Connected");

13/31


}, false);

source.addEventListener('error', function(e) {

if (e.target.readyState != EventSource.OPEN) {

console.log("Events Disconnected");

}

}, false);

source.addEventListener('message', function(e) {

console.log("message", e.data);

}, false);

source.addEventListener('new_readings', function(e) {

console.log("new_readings", e.data);

var myObj = JSON.parse(e.data);

console.log(myObj);

plotTemperature(myObj);

}, false);

}


Xem mã thô

Nhận bài đọc
Khi bạn truy cập trang web lần đầu tiên, chúng tôi sẽ yêu cầu máy chủ nhận số đọc cảm
biến hiện tại. Nếu không, chúng tôi sẽ phải đợi các chỉ số cảm biến mới đến (thơng qua
Sự kiện do máy chủ gửi), có thể mất một chút thời gian tùy thuộc vào khoảng thời gian
mà bạn đặt trên máy chủ.
Thêm trình nghe sự kiện gọi hàm getReadings khi trang web tải.
// Get current sensor readings when the page loads

window.addEventListener('load', getReadings);

Đối tượng cửa sổ đại diện cho một cửa sổ đang mở trong trình duyệt. Phương thức
addEventListener() thiết lập một hàm được gọi khi một sự kiện nhất định xảy ra. Trong
trường hợp này, chúng ta sẽ gọi hàm getReadings khi trang tải ('load') để nhận số đọc
cảm biến hiện tại.
Bây giờ, chúng ta hãy xem hàm getReadings. Chúng tôi sẽ gửi một yêu cầu HTTP để
ESP biết rằng nó cần gửi các bài đọc mới. Khi ESP nhận được yêu cầu này, nó sẽ đặt lại
bộ hẹn giờ để gửi một sự kiện mới với các bài đọc.
Tạo một đối tượng XMLHttpRequest mới . Sau đó, gửi một yêu cầu GET đến máy chủ
trên URL /readings bằng cách sử dụng các phương thức open() và send().
function getReadings() {

var xhr = new XMLHttpRequest();

xhr.open("GET", "/readings", true);

xhr.send();

}

14/31

Khi chúng tơi gửi u cầu đó, ESP sẽ gửi phản hồi. Vì vậy, chúng ta cần xử lý những gì
xảy ra khi chúng ta nhận được phản hồi. Chúng ta sẽ sử dụng thuộc tính
onreadystatechange để định nghĩa một hàm sẽ được thực thi khi thuộc tính readyState
thay đổi. Thuộc tính readyState giữ trạng thái của XMLHttpRequest. Phản hồi của yêu
cầu đã sẵn sàng khi readyState là 4 và trạng thái là 200.
readyState = 4 có nghĩa là yêu cầu đã hoàn thành và phản hồi đã sẵn sàng;
status = 200 có nghĩa là "OK"
Trong trường hợp của chúng tôi, chúng tôi sẽ chỉ ghi lại phản hồi ESP (thơng báo "OK").
Vì vậy, u cầu sẽ trơng giống như thế này:
function getReadings(){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

console.log(this.responseText);

}

};

xhr.open("GET", "/readings", true);

xhr.send();

}

Tạo biểu đồ
Các dòng sau tạo biểu đồ với nhiều chuỗi.

15/31


// Create Temperature Chart

var chartT = new Highcharts.Chart({

chart:{

renderTo:'chart-temperature'

},

series: [

{

name: 'Temperature #1',

type: 'line',

color: '#101D42',

marker: {

symbol: 'circle',

radius: 3,

fillColor: '#101D42',

}

},

{

name: 'Temperature #2',

type: 'line',

color: '#00A6A6',

marker: {

symbol: 'square',

radius: 3,

fillColor: '#00A6A6',

}

},

{

name: 'Temperature #3',

type: 'line',

color: '#8B2635',

marker: {

symbol: 'triangle',

radius: 3,

fillColor: '#8B2635',

}

},

{

name: 'Temperature #4',

type: 'line',

color: '#71B48D',

marker: {

symbol: 'triangle-down',

radius: 3,

fillColor: '#71B48D',

}

},

],

title: {

text: undefined

},

xAxis: {

type: 'datetime',

dateTimeLabelFormats: { second: '%H:%M:%S' }

},

yAxis: {

title: {

16/31

text: 'Temperature Celsius Degrees'

}

},

credits: {

enabled: false

}

});

Để tạo một biểu đồ mới, hãy sử dụng phương thức Highcharts.Chart() mới và truyền làm
đối số cho các thuộc tính biểu đồ.
var chartT = new Highcharts.Chart({

Trong dòng tiếp theo, xác định nơi bạn muốn đặt biểu đồ. Trong ví dụ của chúng ta,
chúng ta muốn đặt nó trong phần tử HTML với id nhiệt độ biểu đồ — xem phần tệp
HTML.
chart:{

renderTo:'chart-temperature'

},

Sau đó, xác định các tùy chọn cho chuỗi. Các dòng sau tạo chuỗi đầu tiên:

series: [

{

name: 'Temperature #1',

type: 'line',

color: '#101D42',

marker: {

symbol: 'circle',

radius: 3,

fillColor: '#101D42',

}

Thuộc tính name xác định tên chuỗi. Thuộc tính type xác định loại biểu đồ—trong trường
hợp này, chúng ta muốn xây dựng một biểu đồ đường. Màu sắc đề cập đến màu của
đường kẻ — bạn có thể thay đổi nó thành bất kỳ màu nào bạn muốn.
Tiếp theo, xác định các thuộc tính đánh dấu. Bạn có thể chọn từ một số biểu tượng mặc
định—hình vng, hình trịn, hình kim cương, hình tam giác , hình tam giác xuống. Bạn
cũng có thể tạo các biểu tượng của riêng mình. Bán kính đề cập đến kích thước của
điểm đánh dấu và fillColor đề cập đến màu của điểm đánh dấu. Có các thuộc tính khác
mà bạn có thể sử dụng để tùy chỉnh điểm đánh dấu—tìm hiểu thêm.
marker: {

symbol: 'circle',

radius: 3,

fillColor: '#101D42',

}

Tạo chuỗi khác cũng tương tự, nhưng chúng tôi đã chọn tên, điểm đánh dấu và màu sắc
khác nhau.

17/31


Có nhiều tùy chọn khác mà bạn có thể sử dụng để tùy chỉnh loạt phim của mình — hãy
kiểm tra tài liệu về plotOptions.
Bạn cũng có thể xác định tiêu đề biểu đồ — trong trường hợp này, vì chúng tôi đã xác
định tiêu đề cho biểu đồ trong tiêu đề của tệp HTML, chúng tôi sẽ không đặt tiêu đề ở
đây. Tiêu đề được hiển thị theo mặc định, vì vậy chúng ta phải đặt nó thành undefined.
title: {

text: undefined

},

Xác định các thuộc tính cho trục X — đây là trục nơi chúng ta sẽ hiển thị dữ liệu và thời
gian. Kiểm tra thêm tùy chọn để tùy chỉnh trục X.
xAxis: {

type: 'datetime',

dateTimeLabelFormats: { second: '%H:%M:%S' }

},

Chúng tôi đặt tiêu đề cho trục y. Xem tất cả các thuộc tính có sẵn cho trục y.
yAxis: {

title: {

text: 'Temperature Celsius Degrees'

}

}

Múi giờ
Nếu, vì lý do nào đó, sau khi xây dựng dự án, các biểu đồ khơng hiển thị múi giờ phù
hợp, hãy thêm các dịng sau vào tệp JavaScript sau dòng thứ hai:
Highcharts.setOptions({

time: {

timezoneOffset: -60 //Add your time zone offset here in seconds

}

});

Các biểu đồ sẽ hiển thị thời gian theo UTC. Nếu bạn muốn nó hiển thị trong múi giờ của

mình, bạn phải đặt tham số useUTC (là tham số thời gian) là false:
time:{

useUTC: false

},

Vì vậy, hãy thêm điều đó khi tạo biểu đồ như sau:
var chart = new Highcharts.Chart({

time:{

useUTC: false

},

(…)

18/31




Để tìm hiểu thêm về chỗ nghỉ này, hãy kiểm tra liên kết này trên tài liệu:
/>Cuối cùng, đặt tùy chọn tín dụng thành false để ẩn các khoản tín dụng của thư viện
Highcharts.
credits: {

enabled: false

}

Nhiệt độ lô
Chúng ta đã tạo ra hàm plotTemperature() chấp nhận làm đối số một đối tượng JSON với
các phép đọc nhiệt độ mà chúng ta muốn vẽ.
//Plot temperature in the temperature chart

function plotTemperature(jsonValue) {

var keys = Object.keys(jsonValue);

console.log(keys);

console.log(keys.length);

for (var i = 0; i < keys.length; i++){

var x = (new Date()).getTime();

console.log(x);

const key = keys[i];

var y = Number(jsonValue[key]);

console.log(y);



if(chartT.series[i].data.length > 40) {

chartT.series[i].addPoint([x, y], true, true, true);

} else {

chartT.series[i].addPoint([x, y], true, false, true);

}



}

}

Đầu tiên, chúng ta lấy các khóa của đối tượng JSON và lưu chúng vào biến khóa. Điều
này cho phép chúng ta đi qua tất cả các phím trong đối tượng.
var keys = Object.keys(jsonValue);

Biến keys sẽ là một mảng với tất cả các key trong đối tượng JSON. Trong trường hợp
của chúng tôi:
["sensor1", "sensor2", "sensor3", "sensor4"]

Điều này hoạt động nếu bạn có một đối tượng JSON với số lượng khóa khác nhau hoặc
với các khóa khác nhau. Sau đó, chúng ta sẽ đi qua tất cả các khóa (keys.length()) để vẽ
từng giá trị của nó trong biểu đồ.

19/31

Giá trị x cho biểu đồ là dấu thời gian.
var x = (new Date()).getTime()

Biến khóa giữ khóa hiện tại trong vòng lặp. Lần đầu tiên chúng ta đi qua vòng lặp, biến
chính là "sensor1".
const key = keys[i];

Sau đó, chúng ta lấy giá trị của khóa (jsonValue[key]) và lưu nó dưới dạng một số trong
biến y.
Biểu đồ của chúng tơi có nhiều chuỗi (chỉ số bắt đầu từ 0). Chúng ta có thể truy cập chuỗi
đầu tiên trong


biểu đồ nhiệt độ bằng cách sử dụng: chartT.series [0], tương ứng với chartT.series [i] lần
đầu tiên chúng ta đi qua vòng lặp.
Đầu tiên, chúng tôi kiểm tra độ dài dữ liệu chuỗi:
Nếu chuỗi có hơn 40 điểm: thêm và dịch chuyển một điểm mới;
Hoặc nếu chuỗi có ít hơn 40 điểm: thêm một điểm mới.
Để thêm một điểm mới, hãy dùng phương thức addPoint() chấp nhận các đối số sau đây:
Giá trị được vẽ. Nếu nó là một số duy nhất, một điểm có giá trị y đó được

trường
nối vào chuỗi. Nếu nó là một mảng, nó sẽ được hiểu là giá trị x và y. Trong
hợp của chúng ta, chúng ta truyền một mảng với các giá trị x và y;
Tùy chọn vẽ lại (boolean): đặt thành true để vẽ lại biểu đồ sau khi thêm điểm.
Tùy chọn dịch chuyển (boolean): Nếu đúng, một điểm sẽ bị dịch chuyển khỏi đầu
chuỗi khi một điểm được nối vào cuối. Khi độ dài biểu đồ lớn hơn 40, chúng tôi đặt
tùy chọn shift thành true.
withEvent option (boolean): Được sử dụng nội bộ để kích hoạt chuỗi sự kiện
addPoint—tìm hiểu thêm tại đây.

Vì vậy, để thêm một điểm vào biểu đồ, chúng tôi sử dụng các dòng tiếp theo:
if(chartT.series[i].data.length > 40) {

chartT.series[i].addPoint([x, y], true, true, true);

} else {

chartT.series[i].addPoint([x, y], true, false, true);

}

Xử lý sự kiện
Vẽ các bài đọc trên biểu đồ khi khách hàng nhận được các bài đọc về sự kiện
new_readings
Tạo một đối tượng EventSource mới và chỉ định URL của trang gửi cập nhật. Trong
trường hợp của chúng tơi, đó là /events.

20/31