2

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"?

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
Jeroen
  • 1,638
  • 3
  • 23
  • 48

1 Answers1

1

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.

Community
  • 1
  • 1
Boro
  • 7,913
  • 4
  • 43
  • 85
  • Thanks for your answer. It works at first, but after you use the zoom function, the bind event gets lost or overwritten with the settings of the highlighter configuration. Any ideas how to fix that? – Jeroen Aug 22 '12 at 09:47
  • 1
    @Jeroen Try using the 'on' method of jQuery instead of 'bind' Explanation and examples are in [this very nice article](http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html) which will also explain you the differences between them. – Boro Aug 23 '12 at 13:42
  • I tried this in you code example but it doesn't work. The pointlabels still reset on zoom. Also disabling any other format-thing for these labels doesn't help. I'm afraid this needs much more diving into. – Jeroen Aug 24 '12 at 07:22
  • ah, after reading the article (thanks!) I changed the code to: $( document ).on( "jqplotMouseMove", "#container", ... which works! – Jeroen Aug 24 '12 at 07:52
  • @Jeroen Great to hear that it helped :) – Boro Aug 28 '12 at 09:17