snap flot crosshair only to existing x values

[chris]

Hi all,
first of all, I'm an absolute newbe to javascript. But I got flot running now after a while. Now I'm trying to make crosshair plugin only to snap on existing datapoints (only the x axis) like the tooltip plugin does "almost".

I guess it should happen in this section:

        plot.lockCrosshair = function lockCrosshair(pos) {
            if (pos)
                plot.setCrosshair(pos);
            crosshair.locked = true;
        };

But I've no idea how to do.

Is there anybody able to help me?

Thank you very much in advenced!

BR
chris

[Ced]

To be clear, the crosshair plugin has a 'x' only mode.  But I assume you're posting this because you want an 'xy' crosshair that snaps only along the x axis.

You could modify the plugin code you pasted but you don't need to.

Look at the example code in jquery.flot.crosshair.js:

The values passed in to lockCrosshair are the x,y coordinates of the point.  You could pass in the y coordinate of the cursor instead.

plot.lockCrosshair({
    x: item.datapoint[0],
    y: pos.y
});

As you move the cursor, the crosshair moves with the cursor along the y axis, but is locked to the x position of the data point.

Here's an example:
http://jsfiddle.net/xeyo04uz/

[chris]

Hi Ced,
thank you very much for your hint. But I explained not detailed enough what I'm searching for.

The crosshair should only use the x axis (mode: "x"), but snap on every y value. For example in your jsfiddle point 2 (1/1) it should also snap at courser position (1/0,5) or (1/2,5).

Is this possible?


Thank you very much!
chris

[Ced]

I think you need to modify the findNearbyItem function in jquery.flot.js.

Change it so it calculates distance between point and cursor only along the X axis.

[Christoph Nissl]

Hi Tim,

yes, the crosshair should snap to every x value without any link to y values.

Chris

On 31 July 2015 at 12:30, Tim <t...@nb-dev.de> wrote:

Hi chris,

do i understand correctly, that you want a x axis cursor that always snaps to the closest value?

Tim

[Tim Schneider]

Hi Chris,

I hacked my crosshair.js to do exactly this. It's not very pretty, and I did not check if it breaks any of the functionality of any part that i do not use, but it works for my scenario.

I attached my crosshair.js for you to use. Feel free to modify it to your needs. 

Simply set SnapX to true for the algorithm to work.

I added another option 'showXValue' which draws the x value in a small box next to the crosshair. Feel free to also use it. (Optimized for timestamp x values)

Tim

[chris]

Hi Tim,
thank you very much! This was exactly what I've been searching for!

Thats greate!

BR
Chris

[JohnL]

Great solution Tim - this has helped me a lot. 

I did modify your changes a bit for my own circumstances:

 - allow for dates in series to be in either ascending or descending order (I have both)

 - dynamically set the crosshair line width to be the correct size to cover the whole day range (I allow user to resize the charts, so can't have a hardcoded value)

 - format crosshair date using UTC functions to match my axis and tooltip dates

Thanks!