JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.pie.min.js"></script>
<div id="placeholder" style="width:500px;height:400px;"></div>
<div id="flot-memo" style="text-align:center;height:30px;width:250px;height:20px;text-align:center;margin:0 auto"></div>

JavaScript

$.fn.showMemo = function () {
    $(this).bind("plothover", function (event, pos, item) {
        if (!item) { return; }
 
        var html = [];
        var percent = parseFloat(item.series.percent).toFixed(2);       
 
        html.push("<div style=\"border:1px solid grey;background-color:",
             item.series.color,
             "\">",
             "<span style=\"color:white\">",
             item.series.label,
             " : ",
             item.series.data[0][1],
             " (", percent, "%)",
             "</span>",
             "</div>");
        var x = pos.x.toFixed(2);
        var y = pos.y.toFixed(2);
        showTooltip(x, y, html.join(''));
        //$("#flot-memo").html(html.join(''));
    });
};

var data = [
    {label: "Series 0", data: 1, color: '#99c7ce'}, 
    {label: "Series 1", data: 3, color: '#efb3e6'},
    {label: "Series 2", data: 9, color: '#a48ad4'}, 
    {label: "Series 3", data: 20, color: '#fdd752'}
];

datapie = [
    {label: "Running",  data: 19.5, color: '#e1ab0b'},
    {label: "Stopped",  data: 4.5, color: '#fe0000'},
    {label: "Terminated",  data: 36.6, color: '#93b40f'}
];


$.plot($("#placeholder"), data, { 
    series: {
         pie: {show: true,
             label: {show: true}
         }
    },
    legend: {show: true},
    grid: {
        hoverable: true
    },
    tooltip: true    
 });

$("#placeholder").showMemo();

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