CODEWITHSUNDEEP
jqueryflot
DjangoSi
DjangoSi

Reputation: 395

More information on Flot plothover

Is it possible to show more information in the Flot plothover than

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

I will add 3 Informations in my data like: y, x, someinfo

[1337341819000, 7.00000000, 3.95000000]

First is the date, second an amount and the third is the information, that I will show in my hover.

Upvotes: 1

Views: 12038

Answers (3)

Shagglez
Shagglez

Reputation: 1522

I have a lot of information included in my datapoints, like tooltip, id for links etc.

Example datapoint: [1325980800000,5,1,"6 x 4mg patch", 3]

Example plothover:

placeholder.bind('plothover', function (event, pos, item) {
    if (item && (item.series.type == 's_points' || item.series.type == 't_points')) {
        showTooltip(item.pageX, item.pageY, item.series.data[item.dataIndex][3]);
        $('canvas').css('cursor', 'pointer');
    } else {
        $('[id^="pointTooltip"]').remove();
        $('canvas').css('cursor', 'auto');
    }
});

You just need to find that datapoint by index in series, and extract the info you need like from any array.

Upvotes: 6

Blake
Blake

Reputation: 1077

I used something similar to the code below:

enter code here

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



        var previousPoint = null;
        $("#divname").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();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                        showTooltip(item.pageX, item.pageY,
                                item.series.label +"- "+ y);
                                                    }
                    }
                else {
                    $("#tooltip").remove();
                    previousPoint = null;
                    }

            });

Upvotes: 2

DNS
DNS

Reputation: 38189

Item includes not just the datapoint, but also its series and the point's index in the data array for that series. Search the API Docs for 'plothover' to see a complete reference.

To add more info, you can either:

  1. Build an external mapping from series/index to your additional info, then do a lookup in your hover handler

  2. Provide a processRawData hook that modifies datapoints.format (as described in the docs under processRawData) to add a third non-numeric value, which will then show up in item.datapoint. This approach takes a little more work, but gets you exactly what you were looking for.

Upvotes: 3

Related Questions