JSFiddle - React, Tailwind, and code Playground

by mtsys

HTML

<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.symbol.js"></script>
<div id="flotcontainer"></div>

CSS

#flotcontainer {
    width: 600px;
    height: 300px;
    text-align: center;
    margin: 0 auto;
}

JavaScript

var months = ["125", "250", "500", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var data9_1 = [
    [3, 120], [5, 125], [7.5, 125],  [8, 7490], [9, 5230],[10, 2580], [11, 6880], [12, 3640]
];

$.fn.UseTooltip = function () {
    var previousPoint = null;
    
    $(this).bind("plothover", function (event, pos, item) {        
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                
                var x = item.datapoint[0];
                var y = item.datapoint[1];               
                
                //showTooltip(item.pageX, item.pageY,
                //  months[x-  1] + "<br/>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

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


$(function () {       
    $.plot($("#flotcontainer"),
        [{
              data: data9_1,label: "Page View",lines: { show: true}, color: "blue", points: { show: true, symbol: "cross" }              
            }
        ],{           
            grid: {
                hoverable: true,
                clickable: false,
                mouseActiveRadius: 30
                //backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis:{
                   min: 0,
                   max: 24,
                   ticks: [
                            [1, "125"], [3, "250"], [5, "500"], [6.25, "750"], [7.5, "1000"], [8.75,...