displaying custom tooltip when hovering over a poi

Question

From the example here, I kind of know how to create a Flot graph that shows tooltips when hovering. But the examples only show to how to display tooltips containing the x value, y value, label, etc., and I can't figure out how to create more customized tooltips.

Is there someplace I can attach custom data, that I can access when creating the tooltip?

For example, to simplify, let's suppose my code looks like:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

Now, when clicking on the first datapoint, I want the tooltip to show "Hello", and when clicking on the second datapoint I want to show "Bye". How do I do this? When binding the plothover event

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

I'm not sure what "item" refers to, and how to attach data to it.

Answer 1

Here is a rough JSFiddle example that I whipped up. Not sure if it's functioning exactly how you like but might spark an idea...

[update]

you'll want to bind to the

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});

event for clicking events

[update2] Updated Example

I've adjusted the example to use your test data and to work more with what you have described above. As for the item object it seems that it is generated on the fly so, from what I can tell, you can not add additional data to it. However, you can create an array to cache the item objects when clicked and add additional data to them and use them for the hover event.

This new example does just that, it shows the normal tooltip when nothing is clicked. but once clicked it determines if the point clicked was the first or second and adds an addition property to the item object called alternateText and stores it in an array called itemsClicked.

Now when a point is hovered over it checks to see if there is a cached item object within the array based on the same index of the current item object, which is obtained via item.dataIndex. If there is a matching index in the cache array itemsClicked it will grab the item object from it and use the alternateText property that was added during the click event earlier.

The first point's item object would look something like this:

item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

Once clicked it would then look like this and be stored in the itemsClicked array:

item : {
    alternateText: 'hello',
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

Please let me know if any of this is helpful or not, if not I'll shut up and stop updating my answer :P

Answer 2

Also you can try following code:

HTML body:

<div id="content">
    <div class="demo-container">
        <div id="placeholder" class="demo-placeholder"></div>
    </div>
</div>

Script:

<script type="text/javascript">
    function showTooltip(x, y, contents, z) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x - 110,
            'font-weight':'bold',
            border: '1px solid rgb(255, 221, 221)',
            padding: '2px',
            'background-color': z,
            opacity: '0.8'
     }).appendTo("body").show();
     };

    $(document).ready(
                 $(function () {
                     var data = [{
                         "label": "scott",
                         "data": [[1317427200000 - 5000000 * 3, "17017"], [1317513600000 - 5000000 * 5, "77260"]]
                     },
        {
            "label": "martin",
            "data": [[1317427200000 - 5000000 * 2, "96113"], [1317513600000 - 5000000 * 4, "33407"]]
        },
        {
            "label": "solonio",
            "data": [[1317427200000 - 5000000, "13041"], [1317513600000 - 5000000 * 3, "82943"]]
        },
        {
            "label": "swarowsky",
            "data": [[1317427200000, "83479"], [1317513600000 - 5000000 * 2, "96357"], [1317600000000 - 5000000, "55431"]]
        },
        {
            "label": "elvis",
            "data": [[1317427200000 + 5000000, "40114"], [1317513600000 - 5000000 * 1, "47065"]]
        },
        {
            "label": "alan",
            "data": [[1317427200000 + 5000000 * 2, "82504"], [1317513600000, "46577"]]
        },
        {
            "label": "tony",
            "data": [[1317513600000 + 5000000, "88967"]]
        },
        {
            "label": "bill",
            "data": [[1317513600000 + 5000000 * 2, "60187"], [1317600000000, "39090"]]
        },
        {
            "label": "tim",
            "data": [[1317513600000 + 5000000 * 3, "95382"], [1317600000000 + 5000000, "89699"]]
        },
        {
            "label": "britney",
            "data": [[1317513600000 + 5000000 * 4, "76772"]]
        },
        {
            "label": "logan",
            "data": [[1317513600000 + 5000000 * 5, "88674"]]
        }];

                     var options = {
                         series: {
                             bars: {
                                 show: true,
                                 barWidth: 60 * 60 * 1000,
                                 align: 'center'
                             }
                         },
                         points: {
                             show: true
                         },
                         lines: {
                             show: true
                         },
                         grid: { hoverable: true, clickable: true },
                         yaxes: {
                             min: 0
                         },
                         xaxis: {
                             mode: 'time',
                             timeformat: "%b %d",
                             minTickSize: [1, "month"],
                             tickSize: [1, "day"],
                             autoscaleMargin: .10
                         }
                     };

                     $(function () {
                         $.plot($('#placeholder'), data, options);
                     });
                     $(function () {
                         var previousPoint = null;
                         $("#placeholder").bind("plothover", function (event, pos, item) {
                             if (item) {
                                 if (previousPoint != item.datapoint) {
                                     previousPoint = item.datapoint;

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

Answer 3

You can add data to the series simply by adding it to the data array.

Instead of

$.plot(element, [[1, 2], [2, 4]] ...)

You can

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

And then use that information to show a custom label.

See this fiddle for a full example: http://jsfiddle.net/UtcBK/328/