3

I have just started using jqPlot for a line chart with multiple series. It seems great.

I have added the Cursor plugin with the intention of showing a vertical line on the nearest data point on the x axis. In other words, it snaps to the nearest point. The Cursor plugin, however always shows the vertical cursor right where the mouse is.

It seems like I just want to "override" or replace moveLine to change the current functionality.

What's the most appropriate way of doing so?

It seems a little much to copy/past all of the cursor plugin just to modify a very small subset.

Thanks!

Anish Nair
  • 3,238
  • 29
  • 41
Aaronius
  • 4,936
  • 6
  • 31
  • 40
  • Also FYI--I want to be able to set a function that will be called when a new "snap" occurs. Any guidance on that would be helpful as well. – Aaronius Oct 12 '11 at 22:35
  • I'm looking for exactly the same functionality. Seems it wouldn't be too hard to implement though. – Deefjuh Nov 14 '11 at 14:37
  • Did you sorted it out? Could you share your code with us? – Boro May 29 '12 at 16:29
  • I started on it but ended up using d3 instead of jqPlot. d3, while it has a higher learning curve, is much more flexible and powerful. – Aaronius May 29 '12 at 22:47
  • @Boro perhaps you can combine some of the events in http://jsfiddle.net/Boro/5QA8r/ with http://www.jqplot.com/docs/files/jqplot-core-js.html#Series.neighborThreshold I don't have enough experience to do that yet, but if you can somehow force the mouse to a possition, you can make somekind of snappy behavior – Jeroen Jul 16 '12 at 14:07

2 Answers2

2

I know I'm a kind of archaeologist by edited this post but I think the following can be useful for someone (I hope).

I've made a piece of code which allow to draw a vertical line following the cursor and displaying a tooltip on the nearest point (according to the cursor). You can find a demo of it on this JSFiddle.

I also post the corresponding code below (only the part which calculate nearest point and display tooltip): 

//Show nearest point's tooltip
$("#chart1").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
var c_x = datapos.xaxis;
var index_x = -1;
var pos_index = 0;
var low = 0;
var high = data.data[0].length-1;
while(high - low > 1){
    var mid = Math.round((low+high)/2);
    var current = data.data[0][mid][0];
    if(current <= c_x)
        low = mid;
    else
        high = mid;
}
if(data.data[0][low][0] == c_x){
    high = low;
    index_x = high;
}else{
    var c_low = data.data[0][low][0];
    var c_high = data.data[0][high][0];
    if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
        index_x = low;
    }else{
        index_x = high;   
    }
}
//Display marker and tooltip
if(data.series[0].data[index_x]){
    var x = data.series[0].gridData[index_x][0];
    var y = data.series[0].gridData[index_x][1];
    var r = 5;
    var highlightCanvas = $(".jqplot-highlight-canvas")[0];
    var context = highlightCanvas.getContext('2d');
    context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
    context.strokeStyle = 'rgba(47,164,255,1)';
    context.fillStyle = 'rgba(47,164,255,1)';
    context.beginPath();
    context.arc(x,y,r,0,Math.PI*2,true);
    context.closePath();
    context.stroke();
    context.fill();
    //Display tooltip on nearest point
    var highlightTooltip = $(".jqplot-highlighter-tooltip");
    var val_x = data.data[0][index_x][0];
    var val_y = data.data[0][index_x][1];
    highlightTooltip.html("X : "+val_x+"<br/>Y : "+val_y);
    highlightTooltip.css({'left': x+'px', 'top': (y-10)+'px', 'display': 'block'});           
}
});

Feel please to use it and to modify it as you need it.

AnthonyLeGovic
  • 2,335
  • 1
  • 13
  • 22
0

Try a bar graph series on top of everything else that has alpha set to 0.

supershwa
  • 41
  • 1