Flot Tooltip Chart

Flot Tooltip Chart, to make tooltip in Flot need a bit of work, since Flot don`t have built-in tooltip options, so you need to implement it by yourself. Flot has 'plothover' event, so you could take advantage of this event to make tooltips appear every time mouse cursor hovers over a data point.  

Line and Bar chart
ExampleTooltip Chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var data9_1 = [
    [1, 1530], [2, 6580], [3, 1980],[4, 6630], [5, 8010], [6, 10800],
    [7, 3530], [8, 7490], [9, 5230],[10, 2580], [11, 6880], [12, 3640]
];

var previousPoint = null;

$.fn.UseTooltip = function () {
    $(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];                

                console.log(x+","+y)

                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',   
        'border-radius': '6px 6px 6px 6px',
        'background-color': '#fff',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var plot;

$(function () {        
    plot = $.plot($("#example-section27 #flotcontainer"),
        [{
              data: data9_1,label: "Page View",lines: { show: true},points: { show: true }
            }
        ],{            
            grid: {
                hoverable: true, 
                clickable: false, 
                //mouseActiveRadius: 30,
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis:{
                   ticks: [
                            [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"],
                            [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]
                   ]
            }     
        }
    );

    $("#example-section27 #flotcontainer").UseTooltip();
});
</script>

<!-- HTML -->
<div id="example-section27">
    <div id="flotcontainer" style="width: 600px;height:200px; text-align: center; margin:0 auto;">
    </div>
</div>


comments powered by Disqus