How to make a cardiogram on canvas?

Question

JavaScript

Hello everyone, I need to perform an animation of the type: https://ru.expertoption.com/
I have experience with canvas, but it's not enough, I have a sketch, if anything - I'll throw it off. Specifically, in this task, I do not need to make smooth lines. In general, as I understand it, we need animation with lines like a cardiogram.
Do not tell me how to implement this?

PS I can do the whole layout, but this particular animation - no, I don't want to abandon the project.

Answer 1

Answer 2

If you want the same, then open that site and see its js

Code from that site, study

e.prototype.drawPointsOnChart = function() {
                for (var e = this.width - 20, t = this.counter - e, n = this.getMarginTop(), o = [], a = this, i = 0, c = this.pointsOnChart.length; i < c; i++)
                    !function(e, i) {
                        var c = a.pointsOnChart[e]
                          , l = s.find(a.points, function(e) {
                            return e.index == c.index
                        });
                        if (l) {
                            var u = a.pixelToX(l.x - t)
                              , p = a.pixelToY(l.y + n);
                            if (u < 0)
                                o.push(c.index);
                            else {
                                var f = null
                                  , m = c.size - 2
                                  , d = c.size - 3;
                                m < 0 && (m = 0),
                                d < 0 && (d = 0),
                                f = c.type == r.CALL ? "RGBA(87, 188, 154, 1.00)" : "RGBA(255, 60, 109, 1.00)";
                                var h = 360 * c.progress * (Math.PI / 180);
                                h < 0 && (h = 0),
                                a.ctx.shadowColor = "black",
                                a.ctx.shadowBlur = 10,
                                a.ctx.beginPath(),
                                a.ctx.strokeStyle = f,
                                a.ctx.lineWidth = 2,
                                a.ctx.arc(u, p, m, 0, h),
                                a.ctx.stroke(),
                                a.ctx.closePath(),
                                a.ctx.save(),
                                a.ctx.beginPath(),
                                a.ctx.arc(u, p, d, 0, 2 * Math.PI),
                                a.ctx.closePath(),
                                a.ctx.clip(),
                                a.ctx.drawImage(c.image, u - d, p - d, 2 * d, 2 * d),
                                a.ctx.beginPath(),
                                a.ctx.arc(u, p, d, 0, 2 * Math.PI),
                                a.ctx.clip(),
                                a.ctx.closePath(),
                                a.ctx.restore(),
                                a.ctx.shadowColor = null,
                                a.ctx.shadowBlur = null;
                                var v = 0
                                  , g = "+$" + Math.floor(c.money)
                                  , y = c.name
                                  , E = a.ctx.measureText(g)
                                  , b = a.ctx.measureText(y);
                                b.width + 20 > v && (v = b.width + 20),
                                E.width > v && (v = E.width);
                                var S = v + 20
                                  , _ = 0;
                                a.ctx.beginPath(),
                                a.ctx.globalAlpha = -(c.resultAnimation - 1),
                                _ = c.type == r.CALL ? 24 + 10 * c.resultAnimation : -(40 + d + 2 + 8 + 10 * c.resultAnimation),
                                a.roundRect(u - S / 2, p + _, S, 40),
                                a.ctx.font = "13px Arial",
                                a.ctx.fillStyle = "#fff",
                                a.ctx.fillText(y, u - b.width / 2 + 5, p + _ + 17),
                                a.ctx.font = "bold 13px Arial",
                                a.ctx.fillStyle = f,
                                a.ctx.fillText(g, u - E.width / 2, p + _ + 33),
                                a.ctx.beginPath(),
                                a.ctx.fillStyle = f,
                                a.ctx.globalAlpha = c.directionAnimationOpacity;
                                var w = c.directionAnimation
                                  , O = p + _
                                  , N = u - b.width / 2;
                                c.type == r.CALL ? (O -= -w,
                                O += 15,
                                a.ctx.moveTo(N, O),
                                a.ctx.lineTo(N - 8, O),
                                a.ctx.lineTo(N - 4, O - 6)) : (O -= w,
                                O += 10,
                                a.ctx.moveTo(N, O),
                                a.ctx.lineTo(N - 8, O),
                                a.ctx.lineTo(N - 4, O + 6)),
                                a.ctx.fill(),
                                a.ctx.globalAlpha = 1,
                                a.ctx.closePath()
                            }
                        }
                    }(i);