Flot curved lines/Spline plugin which works with FillBetween plugin?

Question

The Flot FillBetween plugin works nicely with line charts. However I need to smooth out the lines and make them more curvy. I have seen the CurvedLined plugin and the Spline plugin but both do not work properly with the fillbetween plugin.

Is there any way to use a two curved line/Spline series and fill the area between them? Something like the image below. Also fills any enclosed area between the two series any time when one crosses the other.

Answer 1

I am unfamiliar with the FillBetween plug-in. I am going to focus on aswering the smoothing part. I had a similar problem where those smoothing options did not work for me either. I used an external plug-in to make the smoothing. It's name is smooth.js and it worked for me. Smooth.js recives the data array and returns a function. To get a "smoothed point", apply the function to any value between 0 and the length of the array. The idea is to obtain more points than the original dataset.

For example, to smooth an array of values named test:

//obtaining smoothing function

var s = Smooth(test, {
    method: Smooth.METHOD_CUBIC,
});

//obtaining smoothed data
//asking for 10 "smoothed points" per each point in the original dataset
test_smoothed = [];
for (var i = 0; i <= test.length; i = i + .1) {
    test_smoothed.push(s(i));
}

I made a JSFiddle with this example. You can use this plug-in and pass the smoothed data to flot and then use the FillBetween.