It depends what you're graphing.
The buttons on the left of your image say "xCurve, yCurve, zCurve", and this suggests that you have a 3D curve, and you are graphing one of the coordinates ($x$) versus a time parameter, $t$.
If so, the graph of the derivative is certainly wrong. It should have the value $0$ when the abscissa (the horizontal axis value, the $t$-value) is around 17 or 53.
On the other hand, your graphs don't look like "$x$ versus $t$" graphs, they look like "$(x,y)$ versus $t$" graphs. If this is the case, then your results might well be correct (though undesirable). See below for details.
Let's start from the beginning with a nice simple notation:
Suppose $P(t)$ is a cubic Bezier, with control points $A$, $B$, $C$, $D$. Then its equation is:
$$P(t) = (1-t)^3A + 3t(1-t)^2B + 3t^2(1-t)C + t^3D \quad (0 \le t \le 1) $$
Then the derivative curve is a quadratic (degree 2) curve, and its control points are $3(B-A)$, $3(C-B)$, $3(D-C)$, so it's equation is:
$$Q(t) = 3(1-t)^2(B-A) + 6t(1-t)(C-B) + 3t^2(D-C) \quad (0 \le t \le 1) $$
All of this applies regardless of whether $A$, $B$, $C$, $D$ are $x$ values or $(x,y)$ values.
If you want to draw "$x$ versus $t$" graphs, then drawing $P$ and $Q$ together on the same graph should be straightforward.
If you want to draw "$(x,y)$ versus $t$" graphs, then putting both $P$ and $Q$ on the same graph is more problematic. Suppose the control points $A$, $B$, $C$, $D$ were a great distance from the origin, but fairly close to each other. Then $B-A$, $C-B$, $D-C$ would be small, so the $Q$ curve would be close to the origin -- far away from the $P$ curve. In your case, it looks like (roughly) $A = (0,0)$ and $B=(32,12)$, so the first control point of the derivative curve $Q$ is $3(B-A) = (96,36)$, which is off the charts. Your derivative graph is clipped, so the end-points of the curve are not visible, which makes it harder to say whether or not it's correct. At least it looks like a parabola, though, which is correct (Bezier curves of degree 2 are parabolas).
These notes might help. Section 2.5 discusses derivatives, and there's a picture showing how the derivative curve relates to the original one (for the xy-vs-t case). Section 2.12 talks about the x-vs-t type of curve (which is variously referred to as a real-valued, explicit, or non-parametric Bezier curve).
Thanks to @Oppenede commenting on the question post, it turns out that what I was looking for in this case is called the "Rotation minimizing frame" of a point, also known as the "parallel transport frame", or "bishop frame".
This is an algorithmic procedure, where you compute the orthogonal vector triplet $\{\textit{tangent}, \textit{rotation axis}, \textit{normal}\}$ for the point at time value 0, and then compute subsequent frames based on "the previous frame", using an ever so slightly modified version of the procedure explained in section 4 or "Computation of Rotation Minimizing Frames" (Wenping Wang, Bert Jüttler, Dayue Zheng, and Yang Liu, 2008):
ArrayList<VectorFrame> getRMF(int steps) {
ArrayList<VectorFrame> frames = new ArrayList<VectorFrame>();
double c1, c2, step = 1.0/steps, t0, t1;
PointVector v1, v2, riL, tiL, riN, siN;
VectorFrame x0, x1;
// Start off with the standard tangent/axis/normal frame
// associated with the curve just prior the Bezier interval.
t0 = -step;
frames.add(getFrenetFrame(t0));
// start constructing RM frames
for (; t0 < 1.0; t0 += step) {
// start with the previous, known frame
x0 = frames.get(frames.size() - 1);
// get the next frame: we're going to throw away its axis and normal
t1 = t0 + step;
x1 = getFrenetFrame(t1);
// First we reflect x0's tangent and axis onto x1, through
// the plane of reflection at the point midway x0--x1
v1 = x1.o.minus(x0.o);
c1 = v1.dot(v1);
riL = x0.r.minus(v1.scale( 2/c1 * v1.dot(x0.r) ));
tiL = x0.t.minus(v1.scale( 2/c1 * v1.dot(x0.t) ));
// Then we reflection a second time, over a plane at x1
// so that the frame tangent is aligned with the curve tangent:
v2 = x1.t.minus(tiL);
c2 = v2.dot(v2);
riN = riL.minus(v2.scale( 2/c2 * v2.dot(riL) ));
siN = x1.t.cross(riN);
x1.n = siN;
x1.r = riN;
// we record that frame, and move on
frames.add(x1);
}
// and before we return, we throw away the very first frame,
// because it lies outside the Bezier interval.
frames.remove(0);
return frames;
}
(This uses Java syntax but should be easy enough to parse for porting to any other language)
The result of this procedure leads to rather aesthetically pleasing normals. For the original planar curve, we see the following, with the RMF normals in green and the original normals in blue:
And for the non-planar curve, again with RMF normals in green and original normals in blue:
So this works really well. The downside of course is that this means normals can no longer be computed "on demand", as each frame relies on the previous frame, necessitating a full RMF computation pass and then interpolating for missing normals. But, based on the literature available, there does not appear to be a way to get nice, consistent looking normals without an iterative approach like this.
So Rotation Minimizing Frames it is!
Best Answer
OK, got it figured out my self, before including the acceleration I first had to parameterize the curve itself, you can read all the stuff over at my gamedev question:
https://gamedev.stackexchange.com/questions/5373/moving-ships-between-two-planets-along-a-bezier-missing-some-equations-for-accel