Flot vertical crosshair with tooltips

by andig2

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.crosshair.js"></script>
<div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
</div>

CSS

.demo-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}
.demo-container {
    box-sizing: border-box;
    width: 600px;
    height: 400px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

JavaScript

$(function () {

    var sin = [];
    for (var i = 0; i < 14; i += 0.5) {
        sin.push([i, Math.sin(i)]);
    }

    plot = $.plot("#placeholder", [{ data: sin, color: "rgb(162,48,22)"}], {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        crosshair: {
            mode: "x"
        },
        grid: {
            hoverable: true,
            autoHighlight: false
        },
        yaxis: {
            min: -1.2,
            max: 1.2
        }
    });


    var canvas = $(".flot-overlay")[0];
    var ctx = canvas.getContext("2d");
    
    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
    }).appendTo("body");

    var updateTooltipTimeout = null;
    var latestPosition = null;

    function update() {
        updateTooltipTimeout = null;
        var pos = latestPosition;

        var i, j, dataset = plot.getData();
        for (i = 0; i < dataset.length; ++i) {
            var series = dataset[i];

            // Find the nearest points, x-wise
            for (j = 0; j < series.data.length; ++j) {
                if (series.data[j][0] > pos.x) {
                    break;
                }
            }

            // Now Interpolate
            var y,
            p1 = series.data[j - 1],
                p2 = series.data[j];

            if (p1 == null) {
                y = p2[1];
            } else if (p2 == null) {
                y = p1[1];
            } else {
                y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
            }

            var o = plot.pointOffset({
                x: pos.x,
                y: y
            });

            updateTooltip(o.left, o.top,
                "x: " + pos.x.toFixed(2) + " y: " + y.toFixed(2));
            // plotPoint(o.left, o.top, 5, "rgb(153,180,125)", "circle");
        }
    }


    function updateTooltip(x, y, contents) {
  ...