How to generate a graph with a curve similar to "sine" in jquery Flot?

Question

Friends,

I’m using Flot for a little ECG simulation (electrocardiogram), and I stumbled across a problem, which I think is over mathematics than of programming...

So I’m sorry if I’m explaining bad. GOOD, my problem is to make the transition from the normal beat, to higher! (or whatever happens when you apply the medicine)

For example: His heart rate’s at 70, and I’m giving him adrenaline, and this should go up to 210.

Do it straight eh quiet, as in this example:(example of Flot itself) (from "6M" to "TE")

• Please see the example code in the fiddle

But I need it to be a waveform like a "seno":(from "6M" to "TE")

Here’s my question for the float:

• Simplifying the question, as I would in the jquery Flot (in Altime), to generate a chart that starts at X and goes to Y, with a "curve" similar to a sine?

Answer 1

In principle, what you’re looking for is an envelope, to modify the main wave. To simplify things, you can create a function that takes a linear value, and turns it into a curve.

Here’s a simple example:

function Easing( i ) {
    i *= 2;
    if (i<1) return 1/(2-i)-.5;
    return 1.5-1/i;
};

If you feed this formula linearly with a value of 0 to 1, will receive back a value also from 0 to 1, only nonlinear.

What you need to do, in this case is take the amplitude of the main wave, and multiply by the result of the formula.

Here is a very basic example of use. The extensive code is for drawing the canvas, but what matters is just applying the formula:

function Easing( i ) {
	i *= 2;
	if (i<1) return 1/(2-i)-.5;
	return 1.5-1/i;
};

//demonstração:
var canvas = document.getElementById("out");
var context = canvas.getContext("2d"); 
var width = canvas.width;
var height = canvas.height;
var data;

context.beginPath();
context.moveTo(0,height);
context.strokeStyle = 'red';
for(i=0; i<=100; i++)
{
  data = i/100; //linear
  context.lineTo(i/100*width,height-data*height);
  context.stroke();
}

context.beginPath();
context.moveTo(0,height);
context.strokeStyle = 'blue';
for(i=0; i<100; i++)
{
  data = Easing( i/100 ); //usando função
  context.lineTo(i/100*width,height-data*height);
  context.stroke();
}

#out {width:300px; height:200px; border:1px dotted #999}

<canvas id="out"></canvas>

Test also on CODEPEN.

Remember that jQuery itself has functions of easing, that already make similar thing. Usually they are used for animations, but nothing prevents to apply in graphics:

https://jqueryui.com/easing/

This site has a number of formulas that may interest you:

http://www.gizma.com/easing/