Ecg graph with html5 canvas

user_844419 0
Viewed 11827

My need is to draw a ECG graph on canvas for socket data per every data iteration.

enter image description here

I tried to look into several graph plugins which use canvas to plot graphs, tried http://www.flotcharts.org/ but didn't succeed.

I Tried to plot graph using below basic html5 canvas drawline with sample data.

var fps = 60;
var n = 1;

drawWave();
    function drawWave() {
        setTimeout(function() {
                requestAnimationFrame(drawWave2);
                ctx.lineWidth = "2";
                ctx.strokeStyle = 'green';
                // Drawing code goes here
                n += 1;
                if (n >= data.length) {
                    n = 1;
                }
                ctx.beginPath();
                ctx.moveTo(n - 1, data[n - 1] * 2);
                ctx.lineTo(n, data[n] * 2);
                ctx.stroke();
                ctx.clearRect(n + 1, 0, 10, canvas.height);
            }, 1000 / fps);
    }

But it is not giving me the exact graph view as attached image. I'm not able to understand how to achieve graph like ecg graph. Please help me to get rid of this problem.

html5-canvas graph html javascript
4 Answers

The characteristics with an ECG is that is plots the signal horizontally headed by a blank gap. When the end of the right side is reached is returns to left side and overdraw the existing graph.

DEMO

ECG

Setup

var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,

    /// plot x and y, old plot x and y, speed and scan bar width
    speed = 3,
    px = 0, opx = 0, 
    py = h * 0.8, opy = py,
    scanBarWidth = 20;

ctx.strokeStyle = '#00bd00';
ctx.lineWidth = 3;

/// for demo we use mouse as signal input source    
demo.onmousemove = function(e) {
    var r = demo.getBoundingClientRect();
    py = e.clientY - r.top;
}
loop();

The main loop:

The loop will plot whatever the signal amplitude is at any moment. You can inject a sinus or some other signal or read from an actual sensor over Web socket etc.

function loop() {

    /// move forward at defined speed
    px += speed;
    
    /// clear ahead (scan bar)
    ctx.clearRect(px,0, scanBarWidth, h);

    /// draw line from old plot point to new
    ctx.beginPath();
    ctx.moveTo(opx, opy);
    ctx.lineTo(px, py);
    ctx.stroke();
    
    /// update old plot point
    opx = px;
    opy = py;
    
    /// check if edge is reached and reset position
    if (opx > w) {
        px = opx = -speed;
    }
    
    requestAnimationFrame(loop);
}

To inject a value simply update py (outside loop).

Admin1

It would be far more helpful, if you included an image of what it does produce, rather than stating that it doesn't do that. Anyhow, it looks like you're only drawing a single line per frame. You need to run a loop with lineTo inside, iterating through all values of n.

Something along the lines of the below except from a sound-synthesizer. Just pay attention to the fact that there's a drawing-loop. In my case, there are often 40,000 or 50,000 samples that need to be drawn on a canvas of only a few hundred pixels wide. It seems like redundant drawing in my case, but doing th intuitive thing, of a single point per pixel results in an inaccurate image. The output of this looks something (88200 samples per 1024 pixels)

enter image description here

function drawFloatArray(samples, canvas)
{
    var i, n = samples.length;
    var dur = (n / 44100 * 1000)>>0;
    canvas.title = 'Duration: ' +  dur / 1000.0 + 's';

    var width=canvas.width,height=canvas.height;
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'yellow';
    ctx.fillStyle = '#303030';
    ctx.fillRect(0,0,width,height);
    ctx.moveTo(0,height/2);
    ctx.beginPath();
    for (i=0; i<n; i++)
    {
        x = (i*width) / n;
        y = (samples[i]*height/2)+height/2;
        ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.closePath();
}
user_16309630

Since your live data is streaming non-stop, you need a plan to deal with a graph that overflows the canvas.

Here's one solution that pans the canvas to always show only the most recent data.

Demo: http://jsfiddle.net/m1erickson/f5sT4/

Here's starting code illustrating this solution:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // capture incoming socket data in an array
    var data=[];

    // TESTING: fill data with some test values
    for(var i=0;i<5000;i++){
        data.push(Math.sin(i/10)*70+100);
    }

    // x is your most recent data-point in data[]
    var x=0;

    // panAtX is how far the plot will go rightward on the canvas
    // until the canvas is panned

    var panAtX=250;

    var continueAnimation=true;
    animate();


    function animate(){

        if(x>data.length-1){return;}

        if(continueAnimation){
            requestAnimationFrame(animate);
        }

        if(x++<panAtX){

            ctx.fillRect(x,data[x],1,1);

        }else{

            ctx.clearRect(0,0,canvas.width,canvas.height);

            // plot data[] from x-PanAtX to x 

            for(var xx=0;xx<panAtX;xx++){
                var y=data[x-panAtX+xx];
                ctx.fillRect(xx,y,1,1)
            }
        }
    }


    $("#stop").click(function(){continueAnimation=false;});

}); // end $(function(){});
</script>

</head>

<body>
    <button id="stop">Stop</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
user_4115910

I think this web component is both prettier and easier to use. It using canvas as a backend of draw. If you going use it all you need to do is call bang() on every appearing beat

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));

enter image description here

user_73883070
Related