Question

Is there a way to add callouts in flot? I’m using flot to plot tank level as well as a calulated line showing an estimate for when the tank reaches empty. I want to add a callout pointing to the date when the tank will be empty. See the attached illustration. The callout should point towards the given date even when you zoom/pan in flot. I.e. the angle of the “callout-arrow” changes as you pan.

Answer 1

You won’t find this specific need in the flot API. If I were you, I’d just draw it myself on the canvas. Here’s a quick example I threw together:

Drawing Code:

somePlot = $.plot($("#placeholder"), [ d1, d2, d3 ]);

canvas = somePlot.getCanvas();
context = canvas.getContext("2d");

var w = 100;
var h = 30;
var radius = 5;
var width = context.canvas.clientWidth;
var height = context.canvas.clientHeight;    

var x = (width - (width * .25));
var y = (height - (height * .3));
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle="green";
context.lineWidth="4";
context.moveTo(x+radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y+radius);
context.lineTo(r, y+h-radius);
context.lineTo(width, somePlot.getAxes().xaxis.box.top);
context.lineTo(x+radius, b);
context.quadraticCurveTo(x, b, x, b-radius);
context.lineTo(x, y+radius);
context.quadraticCurveTo(x, y, x+radius, y);
context.stroke();

context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 15px 'Times New Roman', Times, serif";
context.fillText("SomeText", x + w/2, y + h/2);