Tooltip for flot bar chart

Question

i am using flot API to build bar charts. I am successful in plotting bar charts.But i am not getting tooltip for those charts.I have tried alot but i failed to achieve this. My code is:

    $(function () {
                var a1 = [
            [0, 100],
            [1, 200],
            [2,300],
            [3,400],
            [4,500]

        ];
        var a2 = [
            [0, 90],
            [1, 150],
            [2,250],
            [3,380],
            [4,450]
            ];

    //var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
            var data = [
                {
                    label: "Pre Transformation",
                    data: a1
                },
                {
                    label: "Post Transformation",
                    data: a2
                }



            ];

            $.plot($("#placeholder2"), data, {
                series: {
                    bars: {
                        show: true,
                        barWidth: 0.13,
                        order: 1
                    }
                },
                xaxis: {
                ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
                //tickLength: 0
                },
                    grid: {
              hoverable: true,
             clickable:true
      
             //mouseActiveRadius: 30  //specifies how far the mouse can activate an item
              },


                valueLabels: {
                    show: true
                }

           });

        });

     var previousPoint = null, previousLabel = null;

  function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 40,
                left: x - 120,
                border: '2px solid ' + color,
                padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }

        $.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {
                if (item) {
                    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                        previousPoint = item.dataIndex;
                        previousLabel = item.series.label;
                        $("#tooltip").remove();

                        var x = item.datapoint[0];
                        var y = item.datapoint[1];

                        var color = item.series.color;

                        //console.log(item.series.xaxis.ticks[x].label);               

                        showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };

Please help me in this regard.

Answer 1

Not sure what you were trying to achieve with

$.fn.UseTooltip = function () {
            $(this).bind("plothover", function (event, pos, item) {

But try replacing with this:

$("#placeholder2").on("plothover", function (event, pos, item) {
    if (item) {
// and removing trailling } in the end

Demo

Answer 2

Your code is almost ok, there is just single peace is missing.

To understand what peace and why it is missing you should first understand what ' prototype ' is and how jQuery use it. In short words - prototype is and object which defines default property values/method implementations for some other object. '$.fn' in jQuery is short reference to prototype. So calling

$.fn.UseTooltip = function () { ... }

will create default implementation for function UseTooltip for all object created by jQuery - eg now you can call $(someSelector).UseTooltip(some-parameters).

The important thing in your code is in the fact, that although you defined this function, you never invoked it. This means that you didn't attach tooltip to your bar chart. Simply add:

$("#placeholder2").UseTooltip()

This should solve you problem.