Question

To try and solve this problem, I started looking into writing a plugin for flot to do what I needed. It looked surprisingly straight-forward, but I have run into a minor snag. I First used the draw hook to draw my axis (note: I’m aware this code needs some error checking to make sure the origin isn’t off the chart)

 function draw(plot, ctx) {
    var offset = plot.getPlotOffset();
    var origin = plot.pointOffset({ x: 0, y: 0 });
    ctx.moveTo(offset.left, origin.top);
    ctx.lineTo(plot.width() + offset.left, origin.top);
    ctx.stroke();
    ctx.moveTo(origin.left, offset.top);
    ctx.lineTo(origin.left, plot.height() + offset.top);
    ctx.stroke();
}

And this works, with 2 small snags. The first and most important is that for some reason it makes the very last point of my data series change color! See here:

The point in the upper right-hand corner has turned black. By stepping through the code I can observe that this only happens when the axes are drawn. Before my draw code is called, the point is the correct color. So I think it has something to do with the drawing on the first “stroke”. For some reason it seems to then apply the black color to the last point. Any idea on how to fix this?

The second problem is that this code is called only after flot has draw everything else (including the data points) which means that my lines appear on top of points instead of underneath them. This is only a problem for those two points that are very close to the vertical axis. Looking at the flot documentation, it mentions a drawBackground hook, but this doesn’t seem to actually exist. I tried using it and it complained the drawBackground was null. So what happened? And is there a better place to hook into and draw my axes? I want to draw after flot has worked out the size of the plot area and before it draws the first series of data points.

Answer 1

What’s currently on the website API documentation does not match the newest released version (0.7). In order to use the backgroundDraw hook, you’ll need a newer version of flot, directly from their github repository. The newest version is fine, but anything after this commit would be workable.