0.9 work - bezier curves #1158

Open
wants to merge 7 commits into
from

Projects

None yet

4 participants

@klyngbaek

I added a new option to allow for smoothed bezier curves without the need for a plugin. It is a clean solution with only a few extra lines of code. The default behavior remains unchanged.

I also gave options.xaxes and optins.yaxes useful default values.

klyngbaek added some commits Oct 9, 2013
@klyngbaek klyngbaek Added series.interpolation option to allow bezier curves.
Added a new option: series.interpolation. There are two valid values: line and bezier. The default is line. When set to line, the plot is rendered as usual. When set to bezier, the series in the plot are rendered with bezier curves rather than the usual straight lines.
a50de82
@klyngbaek klyngbaek Update API.md to include series.interpolation bezier option
Updated the API documentation to include the new series.interpolation option from the previous commit.
c95a385
@klyngbaek klyngbaek Changed single quotes to double quotes. c29d13c
@klyngbaek klyngbaek Fixed bug where it would crash if options.xaxes/yaxes was undefined.
Now checks to see if options.xaxes and options.yaxes are undefined. If they are, they are set to a default value of [{}]. (An array with 1 empty object).
9388300
@klyngbaek klyngbaek Merge branch '0.9-work' of github.com:klyngbaek/flot into 0.9-work 5ec09f7
@klyngbaek klyngbaek Added correct white space around comment blocks. 12cc88d
@nschonni nschonni and 1 other commented on an outdated diff Oct 9, 2013
jquery.flot.js
+ //
+ // A---P
+ // |
+ // |
+ // |
+ // Q---B
+ //
+ // Importantly, A and P are at the same y coordinate, as are B and Q. This is
+ // so adjacent curves appear to flow as one.
+
+ ctx.bezierCurveTo ( // startPoint (A) is implicit from last iteration of loop
+ Math.round((axisx.p2c(x1) + xoffset + axisx.p2c(x2) + xoffset) / 2), axisy.p2c(y1) + yoffset, // controlPoint1 (P)
+ Math.round((axisx.p2c(x1) + xoffset + axisx.p2c(x2) + xoffset) / 2), axisy.p2c(y2) + yoffset, // controlPoint2 (Q)
+ axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset); // endPoint (B)
+ break;
+ case "line":
@nschonni
nschonni Oct 9, 2013 Member

If this just falls through to default it can be removed. I think that is why JSHint is complaining

@klyngbaek
klyngbaek Oct 9, 2013

Thanks, I've fixed it now.

@nschonni nschonni commented on the diff Oct 15, 2013
jquery.flot.js
+ // Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves
+ //
+ // Assuming A was the last point in the line plotted and B is the new point,
+ // we draw a curve with control points P and Q as below.
+ //
+ // A---P
+ // |
+ // |
+ // |
+ // Q---B
+ //
+ // Importantly, A and P are at the same y coordinate, as are B and Q. This is
+ // so adjacent curves appear to flow as one.
+
+ ctx.bezierCurveTo ( // startPoint (A) is implicit from last iteration of loop
+ Math.round((axisx.p2c(x1) + xoffset + axisx.p2c(x2) + xoffset) / 2), axisy.p2c(y1) + yoffset, // controlPoint1 (P)
@nschonni
nschonni Oct 15, 2013 Member

Since axisx.p2c(x1) + xoffset + axisx.p2c(x2) + xoffset is calculated twice, maybe it should be cached in a var (if it is an expensive operation)

@klyngbaek
klyngbaek Oct 16, 2013

Good idea -- now fixed.

@nschonni nschonni commented on the diff Oct 15, 2013
jquery.flot.js
@@ -2487,7 +2498,36 @@ Licensed under the MIT license.
prevx = x2;
prevy = y2;
- ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
+
+ // check interpolation option to see how lines should be drawn
+ // inspired from https://github.com/Joe8Bit/smoothie/blob/master/smoothie.js
+
+ switch (options.series.interpolation) {
+ case "bezier":
+
+ // Great explanation of Bezier curves: http://en.wikipedia.org/wiki/Bezier_curve#Quadratic_curves
@nschonni
nschonni Oct 15, 2013 Member

/* since it is a multiline comment block?

@dnschnur
dnschnur Oct 15, 2013 Member

This is actually correct; block comments using // are one of the exceptions to the jQuery style guide noted in CONTRIBUTING.md.

@nschonni nschonni commented on the diff Oct 15, 2013
jquery.flot.js
@@ -2487,7 +2498,36 @@ Licensed under the MIT license.
prevx = x2;
prevy = y2;
- ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);
+
+ // check interpolation option to see how lines should be drawn
+ // inspired from https://github.com/Joe8Bit/smoothie/blob/master/smoothie.js
+
+ switch (options.series.interpolation) {
@nschonni
nschonni Oct 15, 2013 Member

Since this switch only has 2 paths, it might be better as and if/else

@AaronHarris

Is this planned to be merged anytime soon? Or released as a separate plugin?

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