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.

Cervelat

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.

Indiaindiaman

how can you smooth an object? {date(milli):percent,date(milli),percent} ...etc... – Fant