I have a need to display real-time data from an ICU monitor via MQTT. Data is sent from the tool every 1 second in the form of an array of around 250 elements.

Demo video

My goal is to display a graph that displays this data continuously with smooth animation. However, currently the graph that I display looks broken because the graph that I display only updates the data every second according to the data received.

The main problem I faced was how to make the graphics appear with smooth animation.
I would like to ask for suggestions and opinions about the best way to:

1. Process the data received so that the graph can display smoother animation.
2. Are there certain techniques/methods that can reduce the effects of stuttering and ensure the graph continues to run smoothly.

Sample data:
(245) [133, 139, 145, 152, 159, 166, 173, 180, 185, 189, 193, 194, 194, 193, 189, 185, 180, 173, 166, 159, 152, 145, 139, 133, 128, 122, 118, 113, 112, 112, 113, 115, 117, 120, 122, 125, 126, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 127, 128, 128, 128, 128, 129, 130, 130, 131, 132, 132, 133, 133, 134, 135, 135, 136, 137, 137, 137, 138, 139, 139, 139, 140, 141, 141, 142, 142, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, 143, …]

I use vue js and canvas js to display the graph. Here’s a code snippet that I can attach.
Code snippet

Thanks in advance.