Signal,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="500" height="300">
</canvas>
<script>
let str = `4.621335/4.1592015/
5.709323/5.1383907/
5.538191/4.9843719/
5.643141/5.0788269/
4.889848/4.4008632/
4.819855/4.3378695/
5.433496/4.8901464/
4.493977/4.0445793/
5.146029/4.6314261/
4.614111/4.1526999/
4.760567/4.2845103/
5.625925/5.0633325/
5.299403/4.7694627/
5.673628/5.1062652/
5.397109/4.8573981/
5.602033/5.0418297/
5.6111/5.04999/
4.935967/4.4423703/
4.512971/4.0616739/
4.720645/4.2485805/
4.923674/4.4313066/
4.291274/3.8621466/
5.669429/5.1024861/
5.365008/4.8285072/
`;
const arr = str.split(/\/\d+\.\d+\/\n/).map(Number).slice(0,-1);
const average = arr.reduce((a,b) => a + b, 0)/arr.length;
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let cnvWidth = canvas.width;
let cnvHeight = canvas.height;
let x = 0;
let tempY = arr[0];
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, cnvHeight * (1 - average / 6.2));
ctx.strokeStyle = "#FFFF00";
ctx.lineTo(cnvWidth, cnvHeight * (1 - average / 6.2));
ctx.stroke();
for (let y of arr.slice(1)) {
ctx.beginPath();
ctx.moveTo(x, cnvHeight * (1 - tempY / 6.2));
ctx.strokeStyle = y < tempY ? "#FF0000" : "#228B22";
tempY = y;
ctx.lineTo(x += cnvWidth/(arr.length-1), cnvHeight * (1 - y / 6.2));
ctx.stroke();
}
document.body.append(`arr: ${JSON.stringify(arr)}, average: ${average.toFixed(1)}`)
</script>
</body>
</html>