How to overlay an eclipse on top of scatter plot?

Question

Any idea or hack on how to draw a red eclipse on top of a Flot scatter graph?

If Flot is not possible, you can provide me solution for d3 too or any charting tool!

Answer 1

That is possible by using a hook:

hooks: {
    drawSeries: [drawEllipse]
}

with a function like this:

function drawEllipse(plot, ctx, series) {

    // parameter for the ellipse, calculate with your chosen method from series
    var center = {
        x: 300,
        y: 300
    };
    var radius = {
        x: 150,
        y: 100
    };

    ctx.save();
    ctx.beginPath();

    ctx.translate(center.x - radius.x, center.y - radius.y);
    ctx.scale(radius.x, radius.y);
    ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);

    ctx.restore();
    ctx.strokeStyle = 'red';
    ctx.stroke();
}

Ellipse-drawing method from this SO answer. See this fiddle for a working example. The parameters for the ellipse are hard coded here, for a real solution you have to calculate them from your data.