Spline interpolation for line and area charts #872

wants to merge 6 commits into


None yet

Lighweight plugin for plotting line splines and area splines.

Uses bezier curves to connect the points, as explained here , computing the control points first.


Solves issue #305.

DrFiz commented on a5da304 Nov 27, 2012

I used this version of the script to create a simple live test here
There is an issue with the tension parameter, because for each value between 0 and 1, nothing change.
May be a bug?


Indeed, I was setting the tension property to lines instead of splines. I fixed it and updated the jsfiddle.

10x for the observation.

Works fine now, thank you!


is this compatible with threshold plugin ?


I would just like to vote this merge up, this is exactly the functionality I am looking for.

jbohren commented Mar 24, 2013

Will this work with stacking?


After switching from using lines to this, the fillbetween plugin doesn't fill anymore


I wouldn't be surprised if it broke other plugins. The reason why this hasn't been merged yet is because Flot doesn't provide a solid API for adding 'fake points', as this plugin (and others) do. We're addressing that for 0.9, at which point we'll finally be able to merge this and other changes that involve the relationship between raw and drawn points.


Do you have an ETA for 0.9?


No; we just released 0.8 earlier this month, and haven't really started on 0.9 development yet.


For now is there an interim solution or a hack to get curves and fillbetween working in Flot?


You'll need to wait for @alexbardas to take a look at that.

kiler129 commented Jun 1, 2013

@alexbardas: I think I found a bug - if value is above max axis limit Flot just draw chart above boundaries, if spline plugin is used chart is almost unpredictable :)

Without spline: http://ne0.pl/jMtCa+/
Using spline: http://ne0.pl/oD8OF*/


We wanted to use this, but unfortunately fill is not supported by the spline plugin. Since it relies on the line fill, you can get bad results such as the attached image shows. It's a bug.

The spline plugin should have code to do a proper spline fill, and the line:{} options should be removed completely. It means some changes in the drawing code.


AMKohn commented Aug 23, 2013

@aaronaverill: I also needed the fill to work so I forked the plugin and fixed it.

You can set the fill via the splines: { fill: (float between 0 and 1 || false) } option. The seriesColor will automatically be used.

My fork also draws the entire line at once instead of doing it one segment at a time so it should be faster.

The fork is here: https://github.com/AMKohn/flot/blob/master/jquery.flot.spline.js

And I put together a demo here: http://jsfiddle.net/MHTEy/1/

Since the project I'm working on doesn't use any area charts I'm not sure if it works with them properly. I also used a slightly modified version of flot while working on it but that shouldn't affect anything.


We ended up making the same changes but are on a furious product release cycle right now and didn't have time to push back to a fork.

There are a few other bugs we fixed as well, which are probably in your code:

  • Fill to the y-axis origin (zero), not the bottom of the chart - this will handle the scenario of data that is positive/negative. I tested your fiddle, and it has this problem.
  • If you are doing any zooming (setting axis min/max), the code to clip points outside of the x/y region causes all kinds of bugs. We took it out and take the performance hit; at least the curve draws correctly.

Basically we ended up rewriting it entirely except for the control point calculation. LOL.

AMKohn commented Aug 23, 2013

OK, those weren't issues for me. But, since you've had more time with it, I assume your version is better.

If you're allowed/have a chance, could you make a fork with your version?

Glad you got it fixed!

niksodu commented Dec 11, 2013

I wanted to use this interpolation with negative y-values, but all I got was a straight line at y=0.
I had to comment out line 75 "if (ys < 0) ys = 0;" to get the right result... not sure though, why it's there?


Related: #1158



nelg commented Mar 24, 2016

keen to see this feature get merged. Anyone making progress?


Any progress here?


So is this planned to be merged or does this pr need to be resubmitted?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment