Search code examples
javascriptchartscanvasjs

How draw an ECG wave with a static range in real time?

I´m drawing an real time ECG Wave with CanvasJs ,all works good if I use the size of the array, but when I try to set that size for example 478 points this doesn't show the new data who is coming, the chart is static but I´m sending new data.

ECG wave

The code for that chart is the next one : 

 maxDataLength = 478;
 dataLenght = 0;

   if (result.length !== maxDataLength) {
        for (var i = dataLength; i < result.length; i++)
            {
                data.push({
                    x: parseInt(result[i].valorx),
                    y: parseFloat(result[i].valory)
                });
               if (data.length > maxDataLength) {
               data.shift()}
            }
            dataLength = result.length;
            chart.render();
        }
  });

The problem is that the chart is not loading the new data.

The next code works for me : 

dataLength = 0;

if (dataLength !== result.length) {
  for (var i = dataLength; i < result.length; i++) 
        {
            data.push({
                x: parseInt(result[i].valorx),
                y: parseFloat(result[i].valory)
            });
           if (data.length > result.length) {
           data.shift()}
        }
        dataLength = result.length;
        chart.render();
    }
});

But this graph show all the data of the array and looks awful, If you know how solve this task, please let me know.

Solution

  • The only place you check this maxDataLength is before you do the loop:

    if (result.length !== maxDataLength) {

    How will this stop the loop when it gets to maxDataLength? Here is your working code, with typos fixed and one extra check in the for loop to compare the counter to maxDataLength:

    maxDataLength = 478;
dataLength = 0;

if (dataLength !== result.length) {
    for (var i = dataLength; i < result.length && i <= maxDataLength; i++) {
        data.push({
            x: parseInt(result[i].valorx),
            y: parseFloat(result[i].valory)
        });
        if (data.length > result.length) {
            data.shift();
        }
        dataLength = result.length;
        chart.render();
    }
}

    (This code was full of typos, I don't see that it would have worked in the first place.)