javascripthoverlabeljqplotjqplot-highlighter

display pointlabel in highlighter jqplot

I've many series of just two points on a graph to simulate a timeline. These points have a pointlabel. I'd like to have the name of that pointlabel in the highlighter. How do I do that?

please see my JsFiddle http://jsfiddle.net/NVbjv/8/

I'd tried to add a highlighter object to each series, and give it a format string. But how can I make this more dynamic?

I also like to only display time in the hoverbox-thingy in the bottom right. How do I get remove the ",1 " and ",2"?

Solution

  • The only idea that comes to my mind is to use a custom processing of the tooltip of highlighter and cursor. Something along the lines as it is presented here.

    In your case you would apply the following code:

    $("#container").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
    var date = new Date(datapos.xaxis);
    var time = "" + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
    $(".jqplot-cursor-tooltip").html(time + "  Oi");
    if (neighbor) {
        $(".jqplot-highlighter-tooltip").html("Label name= " + neighbor.data[2] + ";  time= " + time);
    }
});

    The working code sample is available here.

    EDIT: In Chrome I have noticed that the null is printed for the pointLabels therefore use empty strings for their values instead.