Flot scatter with ellipse

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<div id="placeholder" style="width:600px; height:600px;"></div>

JavaScript

$(function () {

    var options = {
        series: {
            lines: {
                show: false
            },
            points: {
                show: true,
                radius: 3,
                lineWidth: 1
            },
            shadowSize: 2
        },
        xaxis: {
            min: 0,
            max: 10
        },
        yaxis: {
            min: 0,
            max: 10
        },
        legend: {
            show: false
        },
        hooks: {
            drawSeries: [drawEllipse]
        }
    };

    var data = [
        [
            [3, 5],
            [4, 5.5],
            [4, 4],
            [5, 4],
            [5, 5],
            [5, 5.5],
            [6, 4.5],
            [6, 5.5],
            [7, 5]
        ]
    ];

    var plot = $.plot("#placeholder", data, options);

    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();
    }

});