PHP/JavaScript webapp to analyse spending habits
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

jquery.flot.navigate.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. /*
  2. Flot plugin for adding panning and zooming capabilities to a plot.
  3. The default behaviour is double click and scrollwheel up/down to zoom
  4. in, drag to pan. The plugin defines plot.zoom({ center }),
  5. plot.zoomOut() and plot.pan(offset) so you easily can add custom
  6. controls. It also fires a "plotpan" and "plotzoom" event when
  7. something happens, useful for synchronizing plots.
  8. Example usage:
  9. plot = $.plot(...);
  10. // zoom default amount in on the pixel (100, 200)
  11. plot.zoom({ center: { left: 10, top: 20 } });
  12. // zoom out again
  13. plot.zoomOut({ center: { left: 10, top: 20 } });
  14. // pan 100 pixels to the left and 20 down
  15. plot.pan({ left: -100, top: 20 })
  16. Options:
  17. zoom: {
  18. interactive: false
  19. trigger: "dblclick" // or "click" for single click
  20. amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
  21. }
  22. pan: {
  23. interactive: false
  24. }
  25. xaxis, yaxis, x2axis, y2axis: {
  26. zoomRange: null // or [number, number] (min range, max range)
  27. panRange: null // or [number, number] (min, max)
  28. }
  29. "interactive" enables the built-in drag/click behaviour. "amount" is
  30. the amount to zoom the viewport relative to the current range, so 1 is
  31. 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out).
  32. "zoomRange" is the interval in which zooming can happen, e.g. with
  33. zoomRange: [1, 100] the zoom will never scale the axis so that the
  34. difference between min and max is smaller than 1 or larger than 100.
  35. You can set either of them to null to ignore.
  36. "panRange" confines the panning to stay within a range, e.g. with
  37. panRange: [-10, 20] panning stops at -10 in one end and at 20 in the
  38. other. Either can be null.
  39. */
  40. // First two dependencies, jquery.event.drag.js and
  41. // jquery.mousewheel.js, we put them inline here to save people the
  42. // effort of downloading them.
  43. /*
  44. jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
  45. Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
  46. */
  47. (function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
  48. /* jquery.mousewheel.min.js
  49. * Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
  50. * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  51. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  52. * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
  53. * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
  54. *
  55. * Version: 3.0.2
  56. *
  57. * Requires: 1.2.2+
  58. */
  59. (function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);
  60. (function ($) {
  61. var options = {
  62. xaxis: {
  63. zoomRange: null, // or [number, number] (min range, max range)
  64. panRange: null // or [number, number] (min, max)
  65. },
  66. zoom: {
  67. interactive: false,
  68. trigger: "dblclick", // or "click" for single click
  69. amount: 1.5 // how much to zoom relative to current position, 2 = 200% (zoom in), 0.5 = 50% (zoom out)
  70. },
  71. pan: {
  72. interactive: false
  73. }
  74. };
  75. function init(plot) {
  76. function bindEvents(plot, eventHolder) {
  77. var o = plot.getOptions();
  78. if (o.zoom.interactive) {
  79. function clickHandler(e, zoomOut) {
  80. var c = plot.offset();
  81. c.left = e.pageX - c.left;
  82. c.top = e.pageY - c.top;
  83. if (zoomOut)
  84. plot.zoomOut({ center: c });
  85. else
  86. plot.zoom({ center: c });
  87. }
  88. eventHolder[o.zoom.trigger](clickHandler);
  89. eventHolder.mousewheel(function (e, delta) {
  90. clickHandler(e, delta < 0);
  91. return false;
  92. });
  93. }
  94. if (o.pan.interactive) {
  95. var prevCursor = 'default', pageX = 0, pageY = 0;
  96. eventHolder.bind("dragstart", { distance: 10 }, function (e) {
  97. if (e.which != 1) // only accept left-click
  98. return false;
  99. eventHolderCursor = eventHolder.css('cursor');
  100. eventHolder.css('cursor', 'move');
  101. pageX = e.pageX;
  102. pageY = e.pageY;
  103. });
  104. eventHolder.bind("drag", function (e) {
  105. // unused at the moment, but we need it here to
  106. // trigger the dragstart/dragend events
  107. });
  108. eventHolder.bind("dragend", function (e) {
  109. eventHolder.css('cursor', prevCursor);
  110. plot.pan({ left: pageX - e.pageX,
  111. top: pageY - e.pageY });
  112. });
  113. }
  114. }
  115. plot.zoomOut = function (args) {
  116. if (!args)
  117. args = {};
  118. if (!args.amount)
  119. args.amount = plot.getOptions().zoom.amount
  120. args.amount = 1 / args.amount;
  121. plot.zoom(args);
  122. }
  123. plot.zoom = function (args) {
  124. if (!args)
  125. args = {};
  126. var axes = plot.getAxes(),
  127. options = plot.getOptions(),
  128. c = args.center,
  129. amount = args.amount ? args.amount : options.zoom.amount,
  130. w = plot.width(), h = plot.height();
  131. if (!c)
  132. c = { left: w / 2, top: h / 2 };
  133. var xf = c.left / w,
  134. x1 = c.left - xf * w / amount,
  135. x2 = c.left + (1 - xf) * w / amount,
  136. yf = c.top / h,
  137. y1 = c.top - yf * h / amount,
  138. y2 = c.top + (1 - yf) * h / amount;
  139. function scaleAxis(min, max, name) {
  140. var axis = axes[name],
  141. axisOptions = options[name];
  142. if (!axis.used)
  143. return;
  144. min = axis.c2p(min);
  145. max = axis.c2p(max);
  146. if (max < min) { // make sure min < max
  147. var tmp = min
  148. min = max;
  149. max = tmp;
  150. }
  151. var range = max - min, zr = axisOptions.zoomRange;
  152. if (zr &&
  153. ((zr[0] != null && range < zr[0]) ||
  154. (zr[1] != null && range > zr[1])))
  155. return;
  156. axisOptions.min = min;
  157. axisOptions.max = max;
  158. }
  159. scaleAxis(x1, x2, 'xaxis');
  160. scaleAxis(x1, x2, 'x2axis');
  161. scaleAxis(y1, y2, 'yaxis');
  162. scaleAxis(y1, y2, 'y2axis');
  163. plot.setupGrid();
  164. plot.draw();
  165. if (!args.preventEvent)
  166. plot.getPlaceholder().trigger("plotzoom", [ plot ]);
  167. }
  168. plot.pan = function (args) {
  169. var l = +args.left, t = +args.top,
  170. axes = plot.getAxes(), options = plot.getOptions();
  171. if (isNaN(l))
  172. l = 0;
  173. if (isNaN(t))
  174. t = 0;
  175. function panAxis(delta, name) {
  176. var axis = axes[name],
  177. axisOptions = options[name],
  178. min, max;
  179. if (!axis.used)
  180. return;
  181. min = axis.c2p(axis.p2c(axis.min) + delta),
  182. max = axis.c2p(axis.p2c(axis.max) + delta);
  183. var pr = axisOptions.panRange;
  184. if (pr) {
  185. // check whether we hit the wall
  186. if (pr[0] != null && pr[0] > min) {
  187. delta = pr[0] - min;
  188. min += delta;
  189. max += delta;
  190. }
  191. if (pr[1] != null && pr[1] < max) {
  192. delta = pr[1] - max;
  193. min += delta;
  194. max += delta;
  195. }
  196. }
  197. axisOptions.min = min;
  198. axisOptions.max = max;
  199. }
  200. panAxis(l, 'xaxis');
  201. panAxis(l, 'x2axis');
  202. panAxis(t, 'yaxis');
  203. panAxis(t, 'y2axis');
  204. plot.setupGrid();
  205. plot.draw();
  206. if (!args.preventEvent)
  207. plot.getPlaceholder().trigger("plotpan", [ plot ]);
  208. }
  209. plot.hooks.bindEvents.push(bindEvents);
  210. }
  211. $.plot.plugins.push({
  212. init: init,
  213. options: options,
  214. name: 'navigate',
  215. version: '1.1'
  216. });
  217. })(jQuery);