Fleet diagram - how to start an event on the line

Question

I wrote a plugin for jQuery Flot charts, which allows you to dynamically add data points by clicking on a chart line, deleting them with the right mouse button, and also allows you to drag these points around the canvas.

This works fine, and I also have a tooltip displaying the value of Y when you hover or drag a point around.

What I would like to do is display a second prompt when the user hovers over the line with the message “Left-click to add a data point”.

I cannot find a way to add a hang event to the string itself and does not seem to be a native method.

Does anyone know how I can achieve this?

Thank.

EDIT: here is jsFiddle, which includes the tooltip creation code that I use:

jsFiddle

since you can see the tooltip when you hover over the actual datapoint, however, I would like to find a way to shoot to have a separate tooltip displayed when you hover over the line between the data points. NOTE. This script does NOT include my custom code for dynamically adding and dragging datapoints, since for the purposes of this question it will be too much code.

Answer 1

, , , . , , , , . :

:

function lineDistance( p1x, p1y,p2x, p2y ) {
    return Math.sqrt( (p2x - p1x)*(p2x - p1x) + (p2y-p1y)*(p2y-p1y) );
}

, A B C, AB AC + BC.

, , : Math.abs(AB-(AC+BC)) < SomeThreshold. , .

plothover (jsFiddle)

$(placeholder).bind("plothover", function (event, pos, item) {
    if (item) {
        var tipText;

        if (opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
            tipText = stringFormat(to.content, item, timestampToDate);
        } else {
            tipText = stringFormat(to.content, item);
        }

        $tip.html(tipText).css({
            left: tipPosition.x + to.shifts.x,
            top: tipPosition.y + to.shifts.y
            }).show();
    } else {
         // Extended for line hover
         var series = plot.getData();
         var xBeforeIndex = 0;
         var xAfterIndex = -1;
         var Threshold = 0.0000025;
         var i = 1;
         while (i <= series[0].data.length && xAfterIndex==-1) {
             if (xAfterIndex == -1 && pos.x > series[0].data[i][0]) {
                 xBeforeIndex = i;
             } else if (xAfterIndex == -1) {
                 xAfterIndex = i;
             }
             i++;
         }

         var onTheLine = 
             lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1], 
                pos.x/10000, pos.y)
             +lineDistance(pos.x/10000, pos.y,
                series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1])
             -lineDistance(
                series[0].data[xBeforeIndex][0]/10000,series[0].data[xBeforeIndex][1],
                series[0].data[xAfterIndex][0]/10000,series[0].data[xAfterIndex][1]);

          if (Math.abs(onTheLine) < Threshold) {
              tipText = "Found Line";
              $tip.html(tipText).css({
                  left: tipPosition.x + to.shifts.x,
                  top: tipPosition.y + to.shifts.y
                  }).show();
           } else {
               $tip.hide().html('');
           }
       }
  });

, :

• - , .
• , bubblesort, /.
• , x 10000. , Y ( ).

, , . , . , .