Measurements on graph

[Simon Platten]

Another requirement....is it possible to click on a point on a trace and drag a vector to another point on the graph, during this the tool-tip would show results between the points, or call a custom callback that could compute some value to display using the start and end points.

Thank you,

[Simon Platten]

I've implemented a new selection method to the graphs.  The modification allows you to drag a selection between two points on the graph, the first point is fixed when you click on the graph, the next point tracks with the mouse, a vector is drawn between points, this screenshot shows it in action: http://syrinix.com/portal/images/ss1.jpg

To implement this I modified envision.js:

Search for:
Flotr.addPlugin('selection', {

Insert:
// 30/05/2013 SP, Make sure points are cleared         
      if (options.mode == "p2p" ) {
        options.from = options.to = null;
        options.dragging = false;
      }   
I've implemented a new selection method the graphs.  The modification allows you to drag a selection between two points on the graph, the first point is fixed when you click on the graph, the next point tracks with the mouse, a vector is drawn between points, this screenshot shows it in action: http://syrinix.com/portal/ss1.jpg

To implement this I modified envision.js:

Search for:
  Flotr.addPlugin('selection', {
 
Insert:
// 30/05/2013 SP, Make sure points are cleared   
      if (options.mode == "p2p" ) {
        options.from = options.to = null;
        options.dragging = false;
      }   

After:
      selection.clearSelection();
    
Search for:
       if (!options.mode || (!isLeftClick(event) && _.isUndefined(event.touches))) return;

Insert after:
// 30/05/2013 SP, Added check for p2p mode          
      if (options.mode == "p2p" ) {
        options.from = options.to = null;
        options.dragging = true;    
      } else
And before:    
      if ( !options.pinchOnly) {
        selection.setSelectionPos(selection.selection.first, pointer);
      }
    
Search for:
      drawSelection: function() {

Insert after:
    if (prevSelection &&
      s.first.x == prevSelection.first.x &&
      s.first.y == prevSelection.first.y &&
      s.second.x == prevSelection.second.x &&
      s.second.y == prevSelection.second.y) {
      return;
    }  
This:
// 30/05/2013 SP, Is p2p measurement applicable?
    if  ( options
       && options.selection
       && options.selection.mode
       && options.selection.mode == "p2p" ) {
      if ( !(options.selection.from && options.selection.to) ) {
// We don't have two points yet, abort
        return;    
      }
      var from = options.selection.from,
          to = options.selection.to;
      octx.save();
      octx.strokeStyle = this.processColor(options.selection.color,
                                           {opacity: 1.0});
      octx.lineWidth = 1;
      octx.beginPath();
      var x1 = from.xaxis.d2p(from.x),
          y1 = from.yaxis.d2p(from.y),
          x2 = to.xaxis.d2p(to.x),
          y2 = to.yaxis.d2p(to.y);         
      octx.moveTo(plotOffset.left + x1, plotOffset.top + y1);
      octx.lineTo(plotOffset.left + x2, plotOffset.top + y2);
      octx.stroke();
      octx.closePath();
      octx.restore();

      this.selection.prevSelection = {
        first: { x: x1, y: y1 },
        second: { x: x2, y: y2 }
      };
      return;            
    }
And before:
  octx.save();     


Search for:
  n.seriesIndex = seriesIndex;
 
Insert after:
// 30/05/2013 SP, tracking of co-ordinates for p2p mode
          if ( this.options.selection
            && this.options.selection.mode == "p2p"
            && this.options.selection.dragging == true ) {
            if ( this.options.selection.from == null ) {
              this.options.selection.from = n;
            } else {
              this.options.selection.to = n;
            }
          }
        
Search for:
  fraction: n.fraction

Insert after:
// 30/05/2013 SP Added reference to selection
      , selection: this.options.selection    


Thats it for the modifications, as an example of how to implement...