Commits

douglaz  committed ab6206b

Added Zoom Tooltip plugin

  • Participants
  • Parent commits e069b3a

Comments (0)

Files changed (2)

File src/plugins/jqplot.cursor.js

                 sel().collapse();
             }
             drawZoomBox.call(c);
+            plot.target.trigger('jqplotZoomMove', [plot, gridpos, datapos, c._zoom]);
         }
     }
     
         c._zoom.zooming = false;
         
         $(document).unbind('mousemove.jqplotCursor', handleZoomMove);
+        plot.target.trigger('jqplotZoomMoveFinished', [plot]);
         
         if (document.onselectstart != undefined && c._oldHandlers.onselectstart != null){
             document.onselectstart = c._oldHandlers.onselectstart;

File src/plugins/jqplot.zoomTooltip.js

+/**
+ * Copyright (c) 2009 Chris Leonello
+ * jqPlot is currently available for use in all personal or commercial projects 
+ * under both the MIT and GPL version 2.0 licenses. This means that you can 
+ * choose the license that best suits your project and use it accordingly. 
+ *
+ * The author would appreciate an email letting him know of any substantial
+ * use of jqPlot.  You can reach the author at: chris dot leonello at gmail 
+ * dot com or see http://www.jqplot.com/info.php .  This is, of course, 
+ * not required.
+ *
+ * If you are feeling kind and generous, consider supporting the project by
+ * making a donation at: http://www.jqplot.com/donate.php .
+ *
+ * Thanks for using jqPlot!
+ * 
+ */
+(function($) {
+    
+    /**
+     * Class: $.jqplot.ZoomTooltip
+     * Plugin which will add a tooltip to a zoom box.
+     * 
+     * To use this plugin, include the js
+     * file in your source:
+     * 
+     * > <script type="text/javascript" src="plugins/jqplot.zoomTooltip.js"></script>
+     */
+    $.jqplot.ZoomTooltip = function(options) {
+        // Group: Properties
+        //
+        //prop: show
+        // true to show the tooltip.
+        this.show = $.jqplot.config.enablePlugins;
+        //prop: getToolTipValue
+        // function which returns the value to be processed
+        this.getToolTipValue = $.jqplot.ZoomTooltip._getToolTipValue;
+        //prop: formatValue
+        // function which formats the value returned by getToolTipValue
+        this.formatValue = $.jqplot.ZoomTooltip._formatTimeStampDelta;
+
+        $.extend(true, this, options);
+    };
+    
+    // called with scope of plot
+    $.jqplot.ZoomTooltip.preInit = function (target, data, opts) {
+        var options = opts || {};
+        // add a zoomtooltip attribute to the plot
+        this.plugins.zoomtooltip = new $.jqplot.ZoomTooltip(options.zoomtooltip);
+    };
+    
+    // called with scope of plot
+    $.jqplot.ZoomTooltip.postInit = function (target, data, opts) {
+        this.target.bind('jqplotZoomMove', handleZoomMove);
+        this.target.bind('jqplotZoomMoveFinished', handleZoomMoveFinished);
+    };
+    
+    // called within context of plot
+    $.jqplot.ZoomTooltip.postPlotDraw = function() {
+        var c = this.plugins.cursor;
+        var zt = this.plugins.zoomtooltip;
+        
+        zt._zoomTooltipElem = $('<div class="jqplot-cursor-tooltip" style="position:absolute;display:none"></div>');
+        c.zoomCanvas._elem.before(zt._zoomTooltipElem);
+    };
+    
+    $.jqplot.ZoomTooltip._getToolTipValue = function(plot, gridpos, datapos, zoominfo) {
+        var delta = (datapos.xaxis - zoominfo.axes.start.xaxis)/1000;
+        return delta;
+    };
+    
+    $.jqplot.ZoomTooltip._formatTimeStampDelta = function(timestamp, extended) {
+        timestamp = timestamp || 0;
+        timestamp = Math.abs(timestamp);
+        var years = 0;
+        var months = 0;
+        var weeks = 0;
+        if (extended) {
+            years = Math.floor(Math.max(timestamp/(365*86400), 0));
+            months = Math.floor(Math.max((timestamp - years*365*86400)/(30*86400), 0));
+            weeks = Math.floor(Math.max((timestamp - years*365*86400 - months*30*86400)/(7*86400), 0));
+        }
+        var days = Math.floor(Math.max((timestamp - years*365*86400 - months*30*86400 - weeks*7*86400)/86400, 0));
+        var hours =  Math.floor(Math.max((timestamp - years*365*86400 - months*30*86400 - weeks*7*86400 - days*86400)/3600, 0));
+        var minutes = Math.floor(Math.max((timestamp - years*365*86400 - months*30*86400 - weeks*7*86400 - days*86400 - hours*3600)/60, 0));
+        
+        var output  = [
+        (years == 0) ? (''):(years+'y '),
+        (months == 0) ? (''):(months+'m '),
+        (weeks == 0) ? (''):(weeks+'w '),
+        (days == 0) ? (''):(days+'d '),
+        hours+'h ',
+        minutes+'m '];
+        
+        return output.join('');
+    };
+    
+    $.jqplot.preInitHooks.push($.jqplot.ZoomTooltip.preInit);
+    $.jqplot.postInitHooks.push($.jqplot.ZoomTooltip.postInit);
+    $.jqplot.postDrawHooks.push($.jqplot.ZoomTooltip.postPlotDraw);
+    
+    function handleZoomMove(ev, plot, gridpos, datapos, zoominfo) {
+        var zt = plot.plugins.zoomtooltip;
+        if (zt.show) {
+            zt._zoomTooltipElem.show();
+            updateZoomTooltip(plot, gridpos, datapos, zoominfo);
+            moveZoomTooltip(plot, gridpos, zoominfo);
+        }
+    }
+    
+    function updateZoomTooltip(plot, gridpos, datapos, zoominfo) {
+        var zt = plot.plugins.zoomtooltip;
+        var delta = zt.getToolTipValue(plot, gridpos, datapos, zoominfo);
+        zt._zoomTooltipElem.html(zt.formatValue(delta, true));
+    }
+    
+    function moveZoomTooltip(plot, gridpos, zoominfo) {
+        var zt = plot.plugins.zoomtooltip;
+        var y = (zoominfo.start[1] + zoominfo.end[1])/2;
+        var x = (zoominfo.start[0] + zoominfo.end[0])/2;
+        zt._zoomTooltipElem.css('left', x);
+        zt._zoomTooltipElem.css('top', y);
+    }
+    
+    function handleZoomMoveFinished(ev, plot) {
+        var zt = plot.plugins.zoomtooltip;
+        zt._zoomTooltipElem.hide();
+    }
+    
+})(jQuery);