gerbilcharts 0.2.4 → 0.2.5

data/History.txt

@@ -1,3 +1,11 @@
+== 0.2.5 2009-10-27
+* Changes
+  * Negative values work good
+  * Much better timerange selection
+  * Auto tooltips for surfaces that allow it
+  * Butterfly surface Area surface (such as in/out charts)
+  * Other misc changes 
+
 == 0.2.3 2009-10-19
 * Changes
   * New Squarized Line Surface

data/lib/gerbilcharts/charts/area_chart.rb

@@ -27,7 +27,7 @@ class AreaChart < ChartBase
     
     # optional features
     if @feature_timetracker
-        @thechart.add_child(GerbilCharts::Surfaces::Tracker.new(:orient => ORIENT_SOUTH, :dim => 10 ))
+        @thechart.add_child(GerbilCharts::Surfaces::Tracker.new(:orient => ORIENT_OVERLAY ))
     end
   end
   

data/lib/gerbilcharts/charts/chart_base.rb

@@ -24,9 +24,11 @@ module GerbilCharts::Charts
 # [+:width+]	   Width of the generated SVG chart in pixels
 # [+:height+]	   Height of the generated SVG chart in pixels
 # [+:style+]	   CSS Stylesheet to use for the chart (default = brushmetal.css see public gem directory)
+#				   Use "inline:css_name" to embed the stylesheet inline  default is to use xref
 # [+:scaling_x+]   Allowed values are :auto, :auto_0, and an array [min,max] (default = :auto)
 # [+:scaling_y+]   Allowed values are :auto, :auto_0, and an array [min,max] (default = :auto)
 # [+:circle_data_points+] Draws a tiny circle around datapoints for tooltips
+# [+:enabletimetracker+] Time tracker  javascript selector  (default = false)
 #
 class ChartBase
 
@@ -41,6 +43,8 @@ class ChartBase
   ORIENT_SOUTHEAST=7
   ORIENT_SOUTHWEST=8
   ORIENT_OVERLAY=9
+  ORIENT_OVERLAY_NORTH=10
+  ORIENT_OVERLAY_SOUTH=11
 
 
   attr_reader     :thechart

data/lib/gerbilcharts/models/presets.rb

@@ -56,7 +56,7 @@ protected
   def format_suffix raw_value
     return "0" if raw_value == 0
     UNITPRESETS.each do |unit|
-          if raw_value >= unit[0]
+          if raw_value.abs  >= unit[0]
             retval = raw_value  / unit[0]
             sout=format("%.2f %s", retval, unit[1])
             sout.gsub! ".00",""

data/lib/gerbilcharts/models/round_range.rb

@@ -63,12 +63,17 @@ private
   # round_max (ceiling)
   def round_max(raw)
        last_pre=1
-       if raw > PRESETS.last[0]
+       if raw.abs  > PRESETS.last[0]
           return raw
        else
          PRESETS.reverse_each do |pre|
-            break if pre[0] < raw
-            last_pre=pre[0]
+		 	if raw >= 0
+					break if pre[0] < raw.abs
+					last_pre=pre[0]
+			else
+					last_pre=-pre[0]
+					break if pre[0] < raw.abs
+			end
          end
        end
        return last_pre
@@ -78,8 +83,13 @@ private
   def round_min(raw)
      last_pre=0
      PRESETS.each do |pre|
-        break if pre[0] > raw
-        last_pre=pre[0]
+	 	if raw >=0 
+			break if pre[0]  > raw
+			last_pre=pre[0]
+		else
+			last_pre=-pre[0]
+			break if pre[0]  > raw.abs
+		end
      end
      return last_pre
    end

data/lib/gerbilcharts/public/brushmetal.css

@@ -203,22 +203,25 @@
 }
 .trackerpanel
 {
-    fill: yellow;
-    fill-opacity: 0.5;
+    fill: white;
+    fill-opacity: 0.01;
 }
 .trackerrect
 {
     fill: red;
-    fill-opacity: 0.2;
+    fill-opacity: 0.4;
 }
 .trackertextinterval
 {
-    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-    font-size: 14px;
+    font-family: courier;
+    font-size: 11px;
+	fill: black;
+	stroke: none;
 }
-                                                                                                        209,1         97%
 .trackertextfromts
 {
-    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-    font-size: 10px;
+    font-family: courier;
+    font-size: 9px;
+	fill: black;
+	stroke: none;
 }

data/lib/gerbilcharts/public/gerbil.js

@@ -1,327 +1,334 @@
-var SVGDocument = null;
-var SVGRoot = null;
-var SVGViewBox = null;
-var svgns = 'http://www.w3.org/2000/svg';
-var xlinkns = 'http://www.w3.org/1999/xlink';
-var toolTip = null;
-var TrueCoords = null;
-var tipBox = null;
-var tipText = null;
-var tipTitle = null;
-var tipDesc = null;
-var ajaxPE = null;
-var lastElement = null;
-var titleText = '';
-var titleDesc = '';
-   
-function OpacityDown(mouseover_evt)
-{
-	var obj=mouseover_evt.target;
-	obj.style.setProperty("opacity","0.5","");
-}
-
-
-function OpacityUp(mouseout_evt)
-{
-	var obj=mouseout_evt.target;
-	obj.style.setProperty("opacity","1.0","");
-}
-
-function GerbilNavigate()
-{
-	window.top.location='/dashboard/show';
-}
-
-function parseXMLFromString(text) 
-{
-    if (typeof DOMParser != "undefined") 
-	{ 
-        // Mozilla, Firefox, and related browsers 
-        return (new DOMParser()).parseFromString(text, "application/xml"); 
-    } 
-    else if (typeof ActiveXObject != "undefined") 
-	{ 
-        // Internet Explorer. 
-		var xmlDOM = new ActiveXObject("Microsoft.XMLDOM"); 
-        var doc = xmlDOM.newDocument();  
-        doc.loadXML(text);            
-        return doc.documentElement;                   
-    } 
-	return null;
-}
-	
-
-function TestUpdates1(evt)
-{
-	var tnode=SVGDocument.getElementById("graphtitle");
-	tnode.firstChild.nodeValue="Changed by Ajax2";
-}
-
-function TestAjaxUpdates()
-{
-	var gerbilAjaxBlock=SVGDocument.getElementById("GerbilAjaxBlock");
-	var gerbilAjaxOptions=SVGDocument.getElementById("GerbilAjaxOptions");
-	var gerbilAjaxContext=SVGDocument.getElementById("GerbilAjaxContext");
-
-	// extract the URL & other ajax options from the Gerbil Ajax Block
-	var url   = gerbilAjaxOptions.attributes.getNamedItem('axurl').nodeValue;
-	var freq  = gerbilAjaxOptions.attributes.getNamedItem('axfrequency').nodeValue;
-	var decay = gerbilAjaxOptions.attributes.getNamedItem('axdecay').nodeValue;
-
-	// return the entire ajax context in request
-	var	aa = $A(gerbilAjaxContext.attributes);
-	var hContext = new Hash();
-	aa.each(function (at){
-		hContext[at.localName]=at.nodeValue;
-	});
-	
-	// console.log ("URL =  "+ url );
-	
-	new Ajax.Request(url, {
-	  method: 'get',
-	  parameters: hContext,
-	  onSuccess: function(transport) {
-          		updateSVG(transport.responseXML)
-		     }
-	});
-
-}
-///////////////////////////////////////////////////////////////////////////////
-// Squirell Release 1.0 - uses Gerbil Charts that donot yet do delta replace !
-///////////////////////////////////////////////////////////////////////////////
-function updateSVG(node)
-{
-  var cmd = '';
-  
-  cmd = node.documentElement.getAttribute("command")
-  
-  if (cmd == "noop")
-  {
-	// do nothing (we got a noop ajax response)
-  }
-  else if (cmd=="full_replace")
-  {
-      var newnode = node.documentElement.childNodes[1];
-	  var currnode = SVGDocument.getElementById('GerbilSVGGraph');
-	  var par = currnode.parentNode;
-	  var newLayer = SVGDocument.importNode(newnode,true);
-	  par.appendChild(newLayer); 
-	  par.removeChild(currnode);
-	  
-	  // move tooltip to top of rendering stack
-	  par.removeChild(toolTip);
-	  par.appendChild(toolTip);
-  }
-}
-
-function Init(evt)
-{
-	 SVGDocument = evt.target.ownerDocument;
-	 SVGRoot = SVGDocument.documentElement;
-	 TrueCoords = SVGRoot.createSVGPoint();
-	
-	 toolTip = SVGDocument.getElementById('ToolTip');
-	 tipBox = SVGDocument.getElementById('tipbox');
-	 tipText = SVGDocument.getElementById('tipText');
-	 tipTitle = SVGDocument.getElementById('tipTitle');
-	 tipDesc = SVGDocument.getElementById('tipDesc');
-	 //window.status = (TrueCoords);
-	
-	 //create event for object
-	 SVGRoot.addEventListener('mousemove', ShowTooltip, false);
-	 SVGRoot.addEventListener('mouseout', HideTooltip, false);
-	 
-	 // periodical executor
-  	 var gerbilAjaxOptions=SVGDocument.getElementById("GerbilAjaxOptions");
-	 if (gerbilAjaxOptions!=null)
-	 {
-	 	var ajaxInterval = gerbilAjaxOptions.getAttribute('axfrequency')
-	 	ajaxPE = new PeriodicalExecuter(TestAjaxUpdates,parseInt(ajaxInterval))
-   		// for Adobe SVG later setTimeout("TestAjaxUpdates()",3)
-	 }
-};
-
-
-function GetTrueCoords(evt)
-{
-	 // zoom / pan adjustment
-	 var newScale = SVGRoot.currentScale;
-	 var translation = SVGRoot.currentTranslate;
-	 TrueCoords.x = (evt.clientX - translation.x)/newScale;
-	 TrueCoords.y = (evt.clientY - translation.y)/newScale;
-};
-
-
-function HideTooltip( evt )
-{
-	 toolTip.setAttributeNS(null, 'visibility', 'hidden');
-};
-
-
-function ShowTooltip( evt )
-{
-	// bail out early, if same target
-	var targetElement = evt.target;
-	if ( lastElement == targetElement )
-	{
-		return
-	}
-	
-	// bail out early, if no 'gerbiltooltipX' tags
-	// tooltip1 is the heading  (appears in bold face)
-	// tooltip2 is the tip text 
-	var tooltip1 = '';
-	var tooltip2 = '';
-	tooltip1 = targetElement.getAttributeNS(null, 'gerbiltooltip1');
-	tooltip2 = targetElement.getAttributeNS(null, 'gerbiltooltip2');
-	if (tooltip1=='' && tooltip2 == '')		
-	{
-		return;
-	}
-
-	// Positon the tooltip box relative to the mouse pos
-	GetTrueCoords( evt );
-	var tipScale = 1/SVGRoot.currentScale;
-	var textWidth = 0;
-	var tspanWidth = 0;
-	var boxHeight = 20;
-	tipBox.setAttributeNS(null, 'transform', 'scale(' + tipScale + ',' + tipScale + ')' );
-	tipText.setAttributeNS(null, 'transform', 'scale(' + tipScale + ',' + tipScale + ')' );
-
-	// Values for tooltip text
-	tipTitle.firstChild.nodeValue = tooltip1;
-	tipTitle.setAttributeNS(null, 'display', 'inline' );
-	tipDesc.firstChild.nodeValue = tooltip2;
-	tipDesc.setAttributeNS(null, 'display', 'inline' );
-
-
-	// Box size
-    var outline = tipText.getBBox();
-    tipBox.setAttributeNS(null, 'width', Number(outline.width) + 10);
-    tipBox.setAttributeNS(null, 'height', Number(outline.height));
-	
-
-    // Update position (keep tooltip inside client area ! )
- 	var yPos = TrueCoords.y + (10 * tipScale);
- 	if (yPos+Number(outline.height)>SVGRoot.height.baseVal.value)
-	{
-		yPos = SVGRoot.height.baseVal.value - Number(outline.height)
-	}
-    var xPos = TrueCoords.x + (10 * tipScale);
-	if (xPos+Number(outline.width)>SVGRoot.width.baseVal.value)
-	{
-		xPos = SVGRoot.width.baseVal.value - Number(outline.width)
-	}
-	
-    toolTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos + ')');
-    toolTip.setAttributeNS(null, 'visibility', 'visible');
-}
-
-
-
-//////////////////////////////////////
-// Tracker - for SVG
-var fTracking=0;
-var nTrackBegin=0;
-var nTrackEnd=0;
-var nTrackCurrent=0;
-var pGTrackingRect=null;    
-var pTrackingRect=null;
-var pTrackFromTS=null;
-var nTrackScale=0;
-var pTrackTextFromTS=null;
-var pTrackTextInterval=null;
-var pTrackerData=null;
-
-function TrackerMouseDown( evt )
-{
-    fTracking=1;
-    nTrackBegin=evt.clientX;
-    nTrackCurrent=evt.clientX;
-    
-    SVGDocument = evt.target.ownerDocument;
-
-    pGTrackingRect= SVGDocument.getElementById('gtrackerrect');
-    pTrackingRect= SVGDocument.getElementById('trackerrect');
-    pTrackingRect.setAttributeNS(null,"x",nTrackCurrent);
-    pTrackingRect.setAttributeNS(null,"width",1);
-    
-    pTrackingText= SVGDocument.getElementById('gtrackertext');
-    pTrackingText.setAttributeNS(null,"transform","translate(" + nTrackBegin + ',' + 150 + ')');
-    
-    // compute begin state
-    pTrackerData = SVGDocument.getElementById('gtrackerdata');
-    nTrackScale =  parseInt(pTrackerData.getAttributeNS(null,"gerb_scale"));
-    var from_secs = parseInt(pTrackerData.getAttributeNS(null,"gerb_fromts"));
-    
-    // clicked to time delta
-    var xbegin = parseInt(SVGDocument.getElementById('trackerpanel').getAttributeNS(null,"x"));
-    pTrackFromTS = new Date();
-    pTrackFromTS.setTime(1000* (from_secs + (nTrackBegin-xbegin)*nTrackScale));
-            
-    // text svg elements
-    pTrackTextFromTS=SVGDocument.getElementById('trackertextfromts');
-    pTrackTextInterval=SVGDocument.getElementById('trackertextinterval');
-    
-    // visibility off (move 5-10 pixels to turn it on)
-    pGTrackingRect.setAttributeNS(null,"visibility","hidden");
-    pTrackingText.setAttributeNS(null,"visibility","hidden");
-
-}
-
-function TrackerMouseMove(evt)
-{
-    if (fTracking==2 && evt.clientX > nTrackBegin)
-    {
-        var delta = nTrackCurrent-nTrackBegin;
-        var mid = nTrackBegin+(delta)/2;
-        nTrackCurrent=evt.clientX;
-        pTrackingRect.setAttributeNS(null,"width",delta);
-        pTrackingText.setAttributeNS(null,"transform","translate(" + mid + ')');
-        
-        // text box
-        var szwin = FormatSecs(delta*nTrackScale)
-        var szbegin = "Starting : " + pTrackFromTS.toLocaleString();
-        pTrackTextInterval.firstChild.nodeValue = szwin;
-        pTrackTextFromTS.firstChild.nodeValue = szbegin;
-    }
-    else if (fTracking==1 && (evt.clientX-nTrackBegin) > 5 )
-    {
-        // we need to move atleast 5 pixels to turn on tracking
-        fTracking=2;
-        
-        // visibility on 
-        pGTrackingRect.setAttributeNS(null,"visibility","visible");
-        pTrackingText.setAttributeNS(null,"visibility","visible");
-    }
-}
-function TrackerMouseUp(evt)
-{
-    if (fTracking==2)
-    {
-        pTrackingRect=null;
-        nTrackEnd=evt.clientX;
-        
-        pTrackerData.setAttributeNS(null,"gerb_selsecs",(nTrackEnd-nTrackBegin)*nTrackScale);
-        pTrackerData.setAttributeNS(null,"gerb_selts", pTrackFromTS.getTime()/1000);
-
-    }
-    fTracking=0;
-}
-
-function FormatSecs(secs)
-{
-    if (secs>86400)
-    {
-        return "" + Math.round(secs/86400) + " Days" + (secs%86400)/3600 + " Hrs" + Math.round((secs%3600)/60) + " Mins";    
-    }
-    else if (secs>3600)
-    {
-        return "" + Math.round(secs/3600) + " Hrs  " + Math.round((secs%3600)/60) + " Mins";    
-    }
-    else if (secs>60)
-    {
-        return "" + Math.round(secs/60) + " Mins  " + secs%60 + " Secs";    
-    }
-    return "" + secs + " Secs";
-}
+var SVGDocument = null;
+var SVGRoot = null;
+var SVGViewBox = null;
+var svgns = 'http://www.w3.org/2000/svg';
+var xlinkns = 'http://www.w3.org/1999/xlink';
+var toolTip = null;
+var TrueCoords = null;
+var tipBox = null;
+var tipText = null;
+var tipTitle = null;
+var tipDesc = null;
+var ajaxPE = null;
+var lastElement = null;
+var titleText = '';
+var titleDesc = '';
+   
+function OpacityDown(mouseover_evt)
+{
+	var obj=mouseover_evt.target;
+	obj.style.setProperty("opacity","0.5","");
+}
+
+
+function OpacityUp(mouseout_evt)
+{
+	var obj=mouseout_evt.target;
+	obj.style.setProperty("opacity","1.0","");
+}
+
+function GerbilNavigate()
+{
+	window.top.location='/dashboard/show';
+}
+
+function parseXMLFromString(text) 
+{
+    if (typeof DOMParser != "undefined") 
+	{ 
+        // Mozilla, Firefox, and related browsers 
+        return (new DOMParser()).parseFromString(text, "application/xml"); 
+    } 
+    else if (typeof ActiveXObject != "undefined") 
+	{ 
+        // Internet Explorer. 
+		var xmlDOM = new ActiveXObject("Microsoft.XMLDOM"); 
+        var doc = xmlDOM.newDocument();  
+        doc.loadXML(text);            
+        return doc.documentElement;                   
+    } 
+	return null;
+}
+	
+
+function TestUpdates1(evt)
+{
+	var tnode=SVGDocument.getElementById("graphtitle");
+	tnode.firstChild.nodeValue="Changed by Ajax2";
+}
+
+function TestAjaxUpdates()
+{
+	var gerbilAjaxBlock=SVGDocument.getElementById("GerbilAjaxBlock");
+	var gerbilAjaxOptions=SVGDocument.getElementById("GerbilAjaxOptions");
+	var gerbilAjaxContext=SVGDocument.getElementById("GerbilAjaxContext");
+
+	// extract the URL & other ajax options from the Gerbil Ajax Block
+	var url   = gerbilAjaxOptions.attributes.getNamedItem('axurl').nodeValue;
+	var freq  = gerbilAjaxOptions.attributes.getNamedItem('axfrequency').nodeValue;
+	var decay = gerbilAjaxOptions.attributes.getNamedItem('axdecay').nodeValue;
+
+	// return the entire ajax context in request
+	var	aa = $A(gerbilAjaxContext.attributes);
+	var hContext = new Hash();
+	aa.each(function (at){
+		hContext[at.localName]=at.nodeValue;
+	});
+	
+	// console.log ("URL =  "+ url );
+	
+	new Ajax.Request(url, {
+	  method: 'get',
+	  parameters: hContext,
+	  onSuccess: function(transport) {
+          		updateSVG(transport.responseXML)
+		     }
+	});
+
+}
+///////////////////////////////////////////////////////////////////////////////
+// Squirell Release 1.0 - uses Gerbil Charts that donot yet do delta replace !
+///////////////////////////////////////////////////////////////////////////////
+function updateSVG(node)
+{
+  var cmd = '';
+  
+  cmd = node.documentElement.getAttribute("command")
+  
+  if (cmd == "noop")
+  {
+	// do nothing (we got a noop ajax response)
+  }
+  else if (cmd=="full_replace")
+  {
+      var newnode = node.documentElement.childNodes[1];
+	  var currnode = SVGDocument.getElementById('GerbilSVGGraph');
+	  var par = currnode.parentNode;
+	  var newLayer = SVGDocument.importNode(newnode,true);
+	  par.appendChild(newLayer); 
+	  par.removeChild(currnode);
+	  
+	  // move tooltip to top of rendering stack
+	  par.removeChild(toolTip);
+	  par.appendChild(toolTip);
+  }
+}
+
+function Init(evt)
+{
+	 SVGDocument = evt.target.ownerDocument;
+	 SVGRoot = SVGDocument.documentElement;
+	 TrueCoords = SVGRoot.createSVGPoint();
+	
+	 toolTip = SVGDocument.getElementById('ToolTip');
+	 tipBox = SVGDocument.getElementById('tipbox');
+	 tipText = SVGDocument.getElementById('tipText');
+	 tipTitle = SVGDocument.getElementById('tipTitle');
+	 tipDesc = SVGDocument.getElementById('tipDesc');
+	 //window.status = (TrueCoords);
+	
+	 //create event for object
+	 SVGRoot.addEventListener('mousemove', ShowTooltip, false);
+	 SVGRoot.addEventListener('mouseout', HideTooltip, false);
+	 
+	 // periodical executor
+  	 var gerbilAjaxOptions=SVGDocument.getElementById("GerbilAjaxOptions");
+	 if (gerbilAjaxOptions!=null)
+	 {
+	 	var ajaxInterval = gerbilAjaxOptions.getAttribute('axfrequency')
+	 	ajaxPE = new PeriodicalExecuter(TestAjaxUpdates,parseInt(ajaxInterval))
+   		// for Adobe SVG later setTimeout("TestAjaxUpdates()",3)
+	 }
+};
+
+
+function GetTrueCoords(evt)
+{
+	 // zoom / pan adjustment
+	 var newScale = SVGRoot.currentScale;
+	 var translation = SVGRoot.currentTranslate;
+	 TrueCoords.x = (evt.clientX - translation.x)/newScale;
+	 TrueCoords.y = (evt.clientY - translation.y)/newScale;
+};
+
+
+function HideTooltip( evt )
+{
+	 toolTip.setAttributeNS(null, 'visibility', 'hidden');
+};
+
+
+function ShowTooltip( evt )
+{
+	// bail out early, if same target
+	var targetElement = evt.target;
+	if ( lastElement == targetElement )
+	{
+		return
+	}
+	
+	// bail out early, if no 'gerbiltooltipX' tags
+	// tooltip1 is the heading  (appears in bold face)
+	// tooltip2 is the tip text 
+	var tooltip1 = '';
+	var tooltip2 = '';
+	tooltip1 = targetElement.getAttributeNS(null, 'gerbiltooltip1');
+	tooltip2 = targetElement.getAttributeNS(null, 'gerbiltooltip2');
+	if (tooltip1=='' && tooltip2 == '')		
+	{
+		return;
+	}
+
+	// Positon the tooltip box relative to the mouse pos
+	GetTrueCoords( evt );
+	var tipScale = 1/SVGRoot.currentScale;
+	var textWidth = 0;
+	var tspanWidth = 0;
+	var boxHeight = 20;
+	tipBox.setAttributeNS(null, 'transform', 'scale(' + tipScale + ',' + tipScale + ')' );
+	tipText.setAttributeNS(null, 'transform', 'scale(' + tipScale + ',' + tipScale + ')' );
+
+	// Values for tooltip text
+	tipTitle.firstChild.nodeValue = tooltip1;
+	tipTitle.setAttributeNS(null, 'display', 'inline' );
+	tipDesc.firstChild.nodeValue = tooltip2;
+	tipDesc.setAttributeNS(null, 'display', 'inline' );
+
+
+	// Box size
+    var outline = tipText.getBBox();
+    tipBox.setAttributeNS(null, 'width', Number(outline.width) + 10);
+    tipBox.setAttributeNS(null, 'height', Number(outline.height));
+	
+
+    // Update position (keep tooltip inside client area ! )
+ 	var yPos = TrueCoords.y + (10 * tipScale);
+ 	if (yPos+Number(outline.height)>SVGRoot.height.baseVal.value)
+	{
+		yPos = SVGRoot.height.baseVal.value - Number(outline.height)
+	}
+    var xPos = TrueCoords.x + (10 * tipScale);
+	if (xPos+Number(outline.width)>SVGRoot.width.baseVal.value)
+	{
+		xPos = SVGRoot.width.baseVal.value - Number(outline.width)
+	}
+	
+    toolTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos + ')');
+    toolTip.setAttributeNS(null, 'visibility', 'visible');
+}
+
+
+
+//////////////////////////////////////
+// Tracker - for SVG
+var fTracking=0;
+var nTrackBegin=0;
+var nTrackEnd=0;
+var nTrackCurrent=0;
+var pGTrackingRect=null;    
+var pTrackingRect=null;
+var pTrackFromTS=null;
+var nTrackScale=0;
+var pTrackTextFromTS=null;
+var pTrackTextInterval=null;
+var pTrackerData=null;
+
+function TrackerMouseDown( evt )
+{
+    fTracking=1;
+    nTrackBegin=evt.clientX;
+    nTrackCurrent=evt.clientX;
+    
+    SVGDocument = evt.target.ownerDocument;
+
+    pGTrackingRect= SVGDocument.getElementById('gtrackerrect');
+    pTrackingRect= SVGDocument.getElementById('trackerrect');
+    pTrackingRect.setAttributeNS(null,"x",nTrackCurrent);
+    pTrackingRect.setAttributeNS(null,"width",1);
+    
+    pTrackingText= SVGDocument.getElementById('gtrackertext');
+    pTrackingText.setAttributeNS(null,"transform","translate(" + nTrackBegin + ',' + 150 + ')');
+    
+    // compute begin state
+    pTrackerData = SVGDocument.getElementById('gtrackerdata');
+    nTrackScale =  parseFloat(pTrackerData.getAttributeNS(null,"gerb_scale"));
+    var from_secs = parseInt(pTrackerData.getAttributeNS(null,"gerb_fromts"));
+    
+    // clicked to time delta
+    var xbegin = parseFloat(SVGDocument.getElementById('trackerpanel').getAttributeNS(null,"x"));
+    pTrackFromTS = new Date();
+    pTrackFromTS.setTime(1000* (from_secs + (nTrackBegin-xbegin)*nTrackScale));
+            
+    // text svg elements
+    pTrackTextFromTS=SVGDocument.getElementById('trackertextfromts');
+    pTrackTextInterval=SVGDocument.getElementById('trackertextinterval');
+    
+    // visibility off (move 5-10 pixels to turn it on)
+    pGTrackingRect.setAttributeNS(null,"visibility","hidden");
+    pTrackingText.setAttributeNS(null,"visibility","hidden");
+
+}
+
+function TrackerMouseMove(evt)
+{
+    if (fTracking==2)
+    {
+		var fSelectAfter = evt.clientX > nTrackBegin;
+        var delta = nTrackCurrent-nTrackBegin;
+        var mid = nTrackBegin+(delta)/2;
+        nTrackCurrent=evt.clientX;
+        pTrackingRect.setAttributeNS(null,"width",Math.abs(delta));
+        pTrackingText.setAttributeNS(null,"transform","translate(" + mid + ')');
+
+		// negative
+		pTrackingRect.setAttribute("transform","translate(" + (fSelectAfter?0:delta) + ',0)');
+        
+        // text box
+        var szwin = FormatSecs(Math.round(Math.abs(delta)*nTrackScale))
+        var szbegin = fSelectAfter?"After ":"Before ";
+		szbegin +=  pTrackFromTS.toLocaleString();
+        pTrackTextInterval.firstChild.nodeValue = szwin;
+        pTrackTextFromTS.firstChild.nodeValue = szbegin;
+    }
+    else if (fTracking==1 && Math.abs(evt.clientX-nTrackBegin) > 3 )
+    {
+        // we need to move atleast 3 pixels tracking
+        fTracking=2;
+        
+        // visibility on 
+        pGTrackingRect.setAttributeNS(null,"visibility","visible");
+        pTrackingText.setAttributeNS(null,"visibility","visible");
+    }
+}
+function TrackerMouseUp(evt)
+{
+    if (fTracking==2)
+    {
+        pTrackingRect=null;
+        nTrackEnd=evt.clientX;
+        
+        pTrackerData.setAttributeNS(null,"gerb_selsecs",(nTrackEnd-nTrackBegin)*nTrackScale);
+        pTrackerData.setAttributeNS(null,"gerb_selts", pTrackFromTS.getTime()/1000);
+
+		console.log("Selts  = " + pTrackerData.getAttributeNS(null,"gerb_selts"));
+		console.log("Selwin = " + pTrackerData.getAttributeNS(null,"gerb_selsecs"));
+    }
+    fTracking=0;
+}
+
+function FormatSecs(secs)
+{
+    if (secs>86400)
+    {
+        return "" + Math.round(secs/86400) + " Days" + (secs%86400)/3600 + " Hrs" + Math.round((secs%3600)/60) + " Mins";    
+    }
+    else if (secs>3600)
+    {
+        return "" + Math.round(secs/3600) + " Hrs  " + Math.round((secs%3600)/60) + " Mins";    
+    }
+    else if (secs>60)
+    {
+        return "" + Math.round(secs/60) + " Mins  " + secs%60 + " Secs";    
+    }
+    return "" + secs + " Secs";
+}