JSFiddle - React, Tailwind, and code Playground

by larsenmtl

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.threshold.js"></script>
<br/><br/>
<div id="placeholder" style="width:600px;height:300px;"></div>

JavaScript

$(function () {
    sin = [];
    x = null;
    for (var i = 0; i < 14; i += 0.5) {
        randomDate = new Date(1328119218000 - (86400000 * (Math.random() * 100)));
        sin.push([i, Math.sin(i),{url: randomDate}]);
    }

    var plot = $.plot($("#placeholder"),
           [ { data: sin, label: "Some Line Plot"} ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: -1.2, max: 1.2 }
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

            if (item) {

                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    
                    $("#tooltip").remove();
                    
                    showTooltip(item.pageX, item.pageY,
                                item.series.data[item.dataIndex][2].url.toString());
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }

    });
});