CODEWITHSUNDEEP
javascriptflot
Tony_Henrich
Tony_Henrich

Reputation: 44085

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

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.

enter image description here

Upvotes: 5

Views: 3974

Answers (1)

Rodrigo Ruiz Murguía
Rodrigo Ruiz Murguía

Reputation: 100

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.

Upvotes: 1

Related Questions