JavaScript Crosshair for Spotfire

A Crosshair is a pair of perpendicular lines (horizontal and vertical) that moves when the mouse moves. A set of lines to go across the entire screen that overlays on top of all visualization on a given page. This can be useful guides when looking at visualization or set of charts that otherwise do not have these guides. 

Add this JavaScript on a Text Area and a couple of html lines to show a pair of cross hairs on the entire screen

HTML

<div id="crossHairX" style="cursor:default;width:100%;height:0;position:fixed;top:0;right:0;border-top:1px dashed green;"></div>
<div id="crossHairY" style="cursor:default;width:0;height:100%;position:fixed;top:0;right:0;border-left:1px dashed olive;"></div>

JavaScript

var cX = document.getElementById("crossHairX"); 
var cY = document.getElementById("crossHairY");  
cX.style.zIndex=10;
cY.style.zIndex=10;
document.body.addEventListener("mousemove",e=>{
   cX.style.top=(e.clientY-2)+"px";
   cY.style.left=(e.clientX-2)+"px" 
})

To disable, just remove the script from the text area

To change the look and feel of the lines, play with the style attribute from the html markup. Let me know if you made some enhancements to the script, such as adding an event listener to show the lines while pressing a combination of keys.

DISCLAIMER

This approach makes assumptions about the inner workings of Spotfire version 12.0.0 Any analyses created using this method may cause instability and performance issues and could not work properly when Spotfire is upgraded or hotfixed.  Any issues resulting from applying this script are not covered by TIBCO maintenance agreements and TIBCO support will not assist in troubleshooting problems with analysis files where this script is used.

Back to JavaScript for Text Areas