flot-rails 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/flot/rails/version.rb +2 -2
- data/vendor/assets/javascripts/excanvas.js +1428 -1428
- data/vendor/assets/javascripts/excanvas.min.js +0 -0
- data/vendor/assets/javascripts/jquery.colorhelpers.js +179 -179
- data/vendor/assets/javascripts/jquery.colorhelpers.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.canvas.js +345 -317
- data/vendor/assets/javascripts/jquery.flot.canvas.min.js +1 -1
- data/vendor/assets/javascripts/jquery.flot.categories.js +190 -190
- data/vendor/assets/javascripts/jquery.flot.categories.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.crosshair.js +176 -176
- data/vendor/assets/javascripts/jquery.flot.crosshair.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.errorbars.js +353 -353
- data/vendor/assets/javascripts/jquery.flot.errorbars.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.fillbetween.js +226 -226
- data/vendor/assets/javascripts/jquery.flot.fillbetween.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.image.js +241 -241
- data/vendor/assets/javascripts/jquery.flot.image.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.js +3061 -2980
- data/vendor/assets/javascripts/jquery.flot.min.js +5 -4
- data/vendor/assets/javascripts/jquery.flot.navigate.js +346 -345
- data/vendor/assets/javascripts/jquery.flot.navigate.min.js +86 -96
- data/vendor/assets/javascripts/jquery.flot.pie.js +817 -812
- data/vendor/assets/javascripts/jquery.flot.pie.min.js +1 -1
- data/vendor/assets/javascripts/jquery.flot.resize.js +60 -60
- data/vendor/assets/javascripts/jquery.flot.resize.min.js +19 -21
- data/vendor/assets/javascripts/jquery.flot.selection.js +360 -360
- data/vendor/assets/javascripts/jquery.flot.selection.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.stack.js +188 -188
- data/vendor/assets/javascripts/jquery.flot.stack.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.symbol.js +71 -71
- data/vendor/assets/javascripts/jquery.flot.symbol.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.threshold.js +142 -142
- data/vendor/assets/javascripts/jquery.flot.threshold.min.js +0 -0
- data/vendor/assets/javascripts/jquery.flot.time.js +431 -424
- data/vendor/assets/javascripts/jquery.flot.time.min.js +1 -1
- metadata +5 -3
@@ -1,96 +1,86 @@
|
|
1
|
-
/* Flot plugin for adding the ability to pan and zoom the plot.
|
2
|
-
|
3
|
-
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
-
Licensed under the MIT license.
|
5
|
-
|
6
|
-
The default behaviour is double click and scrollwheel up/down to zoom in, drag
|
7
|
-
to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
|
8
|
-
plot.pan( offset ) so you easily can add custom controls. It also fires
|
9
|
-
"plotpan" and "plotzoom" events, useful for synchronizing plots.
|
10
|
-
|
11
|
-
The plugin supports these options:
|
12
|
-
|
13
|
-
zoom: {
|
14
|
-
interactive: false
|
15
|
-
trigger: "dblclick" // or "click" for single click
|
16
|
-
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
17
|
-
}
|
18
|
-
|
19
|
-
pan: {
|
20
|
-
interactive: false
|
21
|
-
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
|
22
|
-
frameRate: 20
|
23
|
-
}
|
24
|
-
|
25
|
-
xaxis, yaxis, x2axis, y2axis: {
|
26
|
-
zoomRange: null // or [ number, number ] (min range, max range) or false
|
27
|
-
panRange: null // or [ number, number ] (min, max) or false
|
28
|
-
}
|
29
|
-
|
30
|
-
"interactive" enables the built-in drag/click behaviour. If you enable
|
31
|
-
interactive for pan, then you'll have a basic plot that supports moving
|
32
|
-
around; the same for zoom.
|
33
|
-
|
34
|
-
"amount" specifies the default amount to zoom in (so 1.5 = 150%) relative to
|
35
|
-
the current viewport.
|
36
|
-
|
37
|
-
"cursor" is a standard CSS mouse cursor string used for visual feedback to the
|
38
|
-
user when dragging.
|
39
|
-
|
40
|
-
"frameRate" specifies the maximum number of times per second the plot will
|
41
|
-
update itself while the user is panning around on it (set to null to disable
|
42
|
-
intermediate pans, the plot will then not update until the mouse button is
|
43
|
-
released).
|
44
|
-
|
45
|
-
"zoomRange" is the interval in which zooming can happen, e.g. with zoomRange:
|
46
|
-
[1, 100] the zoom will never scale the axis so that the difference between min
|
47
|
-
and max is smaller than 1 or larger than 100. You can set either end to null
|
48
|
-
to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis
|
49
|
-
will be disabled.
|
50
|
-
|
51
|
-
"panRange" confines the panning to stay within a range, e.g. with panRange:
|
52
|
-
[-10, 20] panning stops at -10 in one end and at 20 in the other. Either can
|
53
|
-
be null, e.g. [-10, null]. If you set panRange to false, panning on that axis
|
54
|
-
will be disabled.
|
55
|
-
|
56
|
-
Example API usage:
|
57
|
-
|
58
|
-
plot = $.plot(...);
|
59
|
-
|
60
|
-
// zoom default amount in on the pixel ( 10, 20 )
|
61
|
-
plot.zoom({ center: { left: 10, top: 20 } });
|
62
|
-
|
63
|
-
// zoom out again
|
64
|
-
plot.zoomOut({ center: { left: 10, top: 20 } });
|
65
|
-
|
66
|
-
// zoom 200% in on the pixel (10, 20)
|
67
|
-
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
68
|
-
|
69
|
-
// pan 100 pixels to the left and 20 down
|
70
|
-
plot.pan({ left: -100, top: 20 })
|
71
|
-
|
72
|
-
Here, "center" specifies where the center of the zooming should happen. Note
|
73
|
-
that this is defined in pixel space, not the space of the data points (you can
|
74
|
-
use the p2c helpers on the axes in Flot to help you convert between these).
|
75
|
-
|
76
|
-
"amount" is the amount to zoom the viewport relative to the current range, so
|
77
|
-
1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
|
78
|
-
can set the default in the options.
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
*
|
87
|
-
* Licensed under the MIT License (LICENSE.txt).
|
88
|
-
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
89
|
-
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
90
|
-
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
91
|
-
*
|
92
|
-
* Version: 3.0.6
|
93
|
-
*
|
94
|
-
* Requires: 1.2.2+
|
95
|
-
*/(function(d){function e(a){var b=a||window.event,c=[].slice.call(arguments,1),f=0,e=0,g=0,a=d.event.fix(b);a.type="mousewheel";b.wheelDelta&&(f=b.wheelDelta/120);b.detail&&(f=-b.detail/3);g=f;void 0!==b.axis&&b.axis===b.HORIZONTAL_AXIS&&(g=0,e=-1*f);void 0!==b.wheelDeltaY&&(g=b.wheelDeltaY/120);void 0!==b.wheelDeltaX&&(e=-1*b.wheelDeltaX/120);c.unshift(a,f,e,g);return(d.event.dispatch||d.event.handle).apply(this,c)}var c=["DOMMouseScroll","mousewheel"];if(d.event.fixHooks)for(var h=c.length;h;)d.event.fixHooks[c[--h]]=d.event.mouseHooks;d.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=c.length;a;)this.addEventListener(c[--a],e,!1);else this.onmousewheel=e},teardown:function(){if(this.removeEventListener)for(var a=c.length;a;)this.removeEventListener(c[--a],e,!1);else this.onmousewheel=null}};d.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery);
|
96
|
-
(function(e){function n(t){function n(e,n){var r=t.offset();r.left=e.pageX-r.left,r.top=e.pageY-r.top,n?t.zoomOut({center:r}):t.zoom({center:r})}function r(e,t){return n(e,t<0),!1}function a(e){if(e.which!=1)return!1;var n=t.getPlaceholder().css("cursor");n&&(i=n),t.getPlaceholder().css("cursor",t.getOptions().pan.cursor),s=e.pageX,o=e.pageY}function f(e){var n=t.getOptions().pan.frameRate;if(u||!n)return;u=setTimeout(function(){t.pan({left:s-e.pageX,top:o-e.pageY}),s=e.pageX,o=e.pageY,u=null},1/n*1e3)}function l(e){u&&(clearTimeout(u),u=null),t.getPlaceholder().css("cursor",i),t.pan({left:s-e.pageX,top:o-e.pageY})}function c(e,t){var i=e.getOptions();i.zoom.interactive&&(t[i.zoom.trigger](n),t.mousewheel(r)),i.pan.interactive&&(t.bind("dragstart",{distance:10},a),t.bind("drag",f),t.bind("dragend",l))}function h(e,t){t.unbind(e.getOptions().zoom.trigger,n),t.unbind("mousewheel",r),t.unbind("dragstart",a),t.unbind("drag",f),t.unbind("dragend",l),u&&clearTimeout(u)}var i="default",s=0,o=0,u=null;t.zoomOut=function(e){e||(e={}),e.amount||(e.amount=t.getOptions().zoom.amount),e.amount=1/e.amount,t.zoom(e)},t.zoom=function(n){n||(n={});var r=n.center,i=n.amount||t.getOptions().zoom.amount,s=t.width(),o=t.height();r||(r={left:s/2,top:o/2});var u=r.left/s,a=r.top/o,f={x:{min:r.left-u*s/i,max:r.left+(1-u)*s/i},y:{min:r.top-a*o/i,max:r.top+(1-a)*o/i}};e.each(t.getAxes(),function(e,t){var n=t.options,r=f[t.direction].min,i=f[t.direction].max,s=n.zoomRange,o=n.panRange;if(s===!1)return;r=t.c2p(r),i=t.c2p(i);if(r>i){var u=r;r=i,i=u}o&&(o[0]!=null&&r<o[0]&&(r=o[0]),o[1]!=null&&i>o[1]&&(i=o[1]));var a=i-r;if(s&&(s[0]!=null&&a<s[0]||s[1]!=null&&a>s[1]))return;n.min=r,n.max=i}),t.setupGrid(),t.draw(),n.preventEvent||t.getPlaceholder().trigger("plotzoom",[t,n])},t.pan=function(n){var r={x:+n.left,y:+n.top};isNaN(r.x)&&(r.x=0),isNaN(r.y)&&(r.y=0),e.each(t.getAxes(),function(e,t){var n=t.options,i,s,o=r[t.direction];i=t.c2p(t.p2c(t.min)+o),s=t.c2p(t.p2c(t.max)+o);var u=n.panRange;if(u===!1)return;u&&(u[0]!=null&&u[0]>i&&(o=u[0]-i,i+=o,s+=o),u[1]!=null&&u[1]<s&&(o=u[1]-s,i+=o,s+=o)),n.min=i,n.max=s}),t.setupGrid(),t.draw(),n.preventEvent||t.getPlaceholder().trigger("plotpan",[t,n])},t.hooks.bindEvents.push(c),t.hooks.shutdown.push(h)}var t={xaxis:{zoomRange:null,panRange:null},zoom:{interactive:!1,trigger:"dblclick",amount:1.5},pan:{interactive:!1,cursor:"move",frameRate:20}};e.plot.plugins.push({init:n,options:t,name:"navigate",version:"1.3"})})(jQuery);
|
1
|
+
/* Flot plugin for adding the ability to pan and zoom the plot.
|
2
|
+
|
3
|
+
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
+
Licensed under the MIT license.
|
5
|
+
|
6
|
+
The default behaviour is double click and scrollwheel up/down to zoom in, drag
|
7
|
+
to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
|
8
|
+
plot.pan( offset ) so you easily can add custom controls. It also fires
|
9
|
+
"plotpan" and "plotzoom" events, useful for synchronizing plots.
|
10
|
+
|
11
|
+
The plugin supports these options:
|
12
|
+
|
13
|
+
zoom: {
|
14
|
+
interactive: false
|
15
|
+
trigger: "dblclick" // or "click" for single click
|
16
|
+
amount: 1.5 // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
17
|
+
}
|
18
|
+
|
19
|
+
pan: {
|
20
|
+
interactive: false
|
21
|
+
cursor: "move" // CSS mouse cursor value used when dragging, e.g. "pointer"
|
22
|
+
frameRate: 20
|
23
|
+
}
|
24
|
+
|
25
|
+
xaxis, yaxis, x2axis, y2axis: {
|
26
|
+
zoomRange: null // or [ number, number ] (min range, max range) or false
|
27
|
+
panRange: null // or [ number, number ] (min, max) or false
|
28
|
+
}
|
29
|
+
|
30
|
+
"interactive" enables the built-in drag/click behaviour. If you enable
|
31
|
+
interactive for pan, then you'll have a basic plot that supports moving
|
32
|
+
around; the same for zoom.
|
33
|
+
|
34
|
+
"amount" specifies the default amount to zoom in (so 1.5 = 150%) relative to
|
35
|
+
the current viewport.
|
36
|
+
|
37
|
+
"cursor" is a standard CSS mouse cursor string used for visual feedback to the
|
38
|
+
user when dragging.
|
39
|
+
|
40
|
+
"frameRate" specifies the maximum number of times per second the plot will
|
41
|
+
update itself while the user is panning around on it (set to null to disable
|
42
|
+
intermediate pans, the plot will then not update until the mouse button is
|
43
|
+
released).
|
44
|
+
|
45
|
+
"zoomRange" is the interval in which zooming can happen, e.g. with zoomRange:
|
46
|
+
[1, 100] the zoom will never scale the axis so that the difference between min
|
47
|
+
and max is smaller than 1 or larger than 100. You can set either end to null
|
48
|
+
to ignore, e.g. [1, null]. If you set zoomRange to false, zooming on that axis
|
49
|
+
will be disabled.
|
50
|
+
|
51
|
+
"panRange" confines the panning to stay within a range, e.g. with panRange:
|
52
|
+
[-10, 20] panning stops at -10 in one end and at 20 in the other. Either can
|
53
|
+
be null, e.g. [-10, null]. If you set panRange to false, panning on that axis
|
54
|
+
will be disabled.
|
55
|
+
|
56
|
+
Example API usage:
|
57
|
+
|
58
|
+
plot = $.plot(...);
|
59
|
+
|
60
|
+
// zoom default amount in on the pixel ( 10, 20 )
|
61
|
+
plot.zoom({ center: { left: 10, top: 20 } });
|
62
|
+
|
63
|
+
// zoom out again
|
64
|
+
plot.zoomOut({ center: { left: 10, top: 20 } });
|
65
|
+
|
66
|
+
// zoom 200% in on the pixel (10, 20)
|
67
|
+
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
68
|
+
|
69
|
+
// pan 100 pixels to the left and 20 down
|
70
|
+
plot.pan({ left: -100, top: 20 })
|
71
|
+
|
72
|
+
Here, "center" specifies where the center of the zooming should happen. Note
|
73
|
+
that this is defined in pixel space, not the space of the data points (you can
|
74
|
+
use the p2c helpers on the axes in Flot to help you convert between these).
|
75
|
+
|
76
|
+
"amount" is the amount to zoom the viewport relative to the current range, so
|
77
|
+
1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
|
78
|
+
can set the default in the options.
|
79
|
+
|
80
|
+
*/// First two dependencies, jquery.event.drag.js and
|
81
|
+
// jquery.mousewheel.js, we put them inline here to save people the
|
82
|
+
// effort of downloading them.
|
83
|
+
/*
|
84
|
+
jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
|
85
|
+
Licensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt
|
86
|
+
*/(function(e){function t(i){var l,h=this,p=i.data||{};if(p.elem)h=i.dragTarget=p.elem,i.dragProxy=a.proxy||h,i.cursorOffsetX=p.pageX-p.left,i.cursorOffsetY=p.pageY-p.top,i.offsetX=i.pageX-i.cursorOffsetX,i.offsetY=i.pageY-i.cursorOffsetY;else if(a.dragging||p.which>0&&i.which!=p.which||e(i.target).is(p.not))return;switch(i.type){case"mousedown":return e.extend(p,e(h).offset(),{elem:h,target:i.target,pageX:i.pageX,pageY:i.pageY}),o.add(document,"mousemove mouseup",t,p),s(h,!1),a.dragging=null,!1;case!a.dragging&&"mousemove":if(r(i.pageX-p.pageX)+r(i.pageY-p.pageY)<p.distance)break;i.target=p.target,l=n(i,"dragstart",h),l!==!1&&(a.dragging=h,a.proxy=i.dragProxy=e(l||h)[0]);case"mousemove":if(a.dragging){if(l=n(i,"drag",h),u.drop&&(u.drop.allowed=l!==!1,u.drop.handler(i)),l!==!1)break;i.type="mouseup"};case"mouseup":o.remove(document,"mousemove mouseup",t),a.dragging&&(u.drop&&u.drop.handler(i),n(i,"dragend",h)),s(h,!0),a.dragging=a.proxy=p.elem=!1}return!0}function n(t,n,r){t.type=n;var i=e.event.dispatch.call(r,t);return i===!1?!1:i||t.result}function r(e){return Math.pow(e,2)}function i(){return a.dragging===!1}function s(e,t){e&&(e.unselectable=t?"off":"on",e.onselectstart=function(){return t},e.style&&(e.style.MozUserSelect=t?"":"none"))}e.fn.drag=function(e,t,n){return t&&this.bind("dragstart",e),n&&this.bind("dragend",n),e?this.bind("drag",t?t:e):this.trigger("drag")};var o=e.event,u=o.special,a=u.drag={not:":input",distance:0,which:1,dragging:!1,setup:function(n){n=e.extend({distance:a.distance,which:a.which,not:a.not},n||{}),n.distance=r(n.distance),o.add(this,"mousedown",t,n),this.attachEvent&&this.attachEvent("ondragstart",i)},teardown:function(){o.remove(this,"mousedown",t),this===a.dragging&&(a.dragging=a.proxy=!1),s(this,!0),this.detachEvent&&this.detachEvent("ondragstart",i)}};u.dragstart=u.dragend={setup:function(){},teardown:function(){}}})(jQuery),function(e){function t(t){var n=t||window.event,r=[].slice.call(arguments,1),i=0,s=0,o=0,t=e.event.fix(n);return t.type="mousewheel",n.wheelDelta&&(i=n.wheelDelta/120),n.detail&&(i=-n.detail/3),o=i,void 0!==n.axis&&n.axis===n.HORIZONTAL_AXIS&&(o=0,s=-1*i),void 0!==n.wheelDeltaY&&(o=n.wheelDeltaY/120),void 0!==n.wheelDeltaX&&(s=-1*n.wheelDeltaX/120),r.unshift(t,i,s,o),(e.event.dispatch||e.event.handle).apply(this,r)}var n=["DOMMouseScroll","mousewheel"];if(e.event.fixHooks)for(var r=n.length;r;)e.event.fixHooks[n[--r]]=e.event.mouseHooks;e.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var e=n.length;e;)this.addEventListener(n[--e],t,!1);else this.onmousewheel=t},teardown:function(){if(this.removeEventListener)for(var e=n.length;e;)this.removeEventListener(n[--e],t,!1);else this.onmousewheel=null}},e.fn.extend({mousewheel:function(e){return e?this.bind("mousewheel",e):this.trigger("mousewheel")},unmousewheel:function(e){return this.unbind("mousewheel",e)}})}(jQuery),function(e){function n(t){function n(e,n){var r=t.offset();r.left=e.pageX-r.left,r.top=e.pageY-r.top,n?t.zoomOut({center:r}):t.zoom({center:r})}function r(e,t){return e.preventDefault(),n(e,t<0),!1}function a(e){if(e.which!=1)return!1;var n=t.getPlaceholder().css("cursor");n&&(i=n),t.getPlaceholder().css("cursor",t.getOptions().pan.cursor),s=e.pageX,o=e.pageY}function f(e){var n=t.getOptions().pan.frameRate;if(u||!n)return;u=setTimeout(function(){t.pan({left:s-e.pageX,top:o-e.pageY}),s=e.pageX,o=e.pageY,u=null},1/n*1e3)}function l(e){u&&(clearTimeout(u),u=null),t.getPlaceholder().css("cursor",i),t.pan({left:s-e.pageX,top:o-e.pageY})}function c(e,t){var i=e.getOptions();i.zoom.interactive&&(t[i.zoom.trigger](n),t.mousewheel(r)),i.pan.interactive&&(t.bind("dragstart",{distance:10},a),t.bind("drag",f),t.bind("dragend",l))}function h(e,t){t.unbind(e.getOptions().zoom.trigger,n),t.unbind("mousewheel",r),t.unbind("dragstart",a),t.unbind("drag",f),t.unbind("dragend",l),u&&clearTimeout(u)}var i="default",s=0,o=0,u=null;t.zoomOut=function(e){e||(e={}),e.amount||(e.amount=t.getOptions().zoom.amount),e.amount=1/e.amount,t.zoom(e)},t.zoom=function(n){n||(n={});var r=n.center,i=n.amount||t.getOptions().zoom.amount,s=t.width(),o=t.height();r||(r={left:s/2,top:o/2});var u=r.left/s,a=r.top/o,f={x:{min:r.left-u*s/i,max:r.left+(1-u)*s/i},y:{min:r.top-a*o/i,max:r.top+(1-a)*o/i}};e.each(t.getAxes(),function(e,t){var n=t.options,r=f[t.direction].min,i=f[t.direction].max,s=n.zoomRange,o=n.panRange;if(s===!1)return;r=t.c2p(r),i=t.c2p(i);if(r>i){var u=r;r=i,i=u}o&&(o[0]!=null&&r<o[0]&&(r=o[0]),o[1]!=null&&i>o[1]&&(i=o[1]));var a=i-r;if(s&&(s[0]!=null&&a<s[0]||s[1]!=null&&a>s[1]))return;n.min=r,n.max=i}),t.setupGrid(),t.draw(),n.preventEvent||t.getPlaceholder().trigger("plotzoom",[t,n])},t.pan=function(n){var r={x:+n.left,y:+n.top};isNaN(r.x)&&(r.x=0),isNaN(r.y)&&(r.y=0),e.each(t.getAxes(),function(e,t){var n=t.options,i,s,o=r[t.direction];i=t.c2p(t.p2c(t.min)+o),s=t.c2p(t.p2c(t.max)+o);var u=n.panRange;if(u===!1)return;u&&(u[0]!=null&&u[0]>i&&(o=u[0]-i,i+=o,s+=o),u[1]!=null&&u[1]<s&&(o=u[1]-s,i+=o,s+=o)),n.min=i,n.max=s}),t.setupGrid(),t.draw(),n.preventEvent||t.getPlaceholder().trigger("plotpan",[t,n])},t.hooks.bindEvents.push(c),t.hooks.shutdown.push(h)}var t={xaxis:{zoomRange:null,panRange:null},zoom:{interactive:!1,trigger:"dblclick",amount:1.5},pan:{interactive:!1,cursor:"move",frameRate:20}};e.plot.plugins.push({init:n,options:t,name:"navigate",version:"1.3"})}(jQuery);
|
@@ -1,812 +1,817 @@
|
|
1
|
-
/* Flot plugin for rendering pie charts.
|
2
|
-
|
3
|
-
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
-
Licensed under the MIT license.
|
5
|
-
|
6
|
-
The plugin assumes that each series has a single data value, and that each
|
7
|
-
value is a positive integer or zero. Negative numbers don't make sense for a
|
8
|
-
pie chart, and have unpredictable results. The values do NOT need to be
|
9
|
-
passed in as percentages; the plugin will calculate the total and per-slice
|
10
|
-
percentages internally.
|
11
|
-
|
12
|
-
* Created by Brian Medendorp
|
13
|
-
|
14
|
-
* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
|
15
|
-
|
16
|
-
The plugin supports these options:
|
17
|
-
|
18
|
-
series: {
|
19
|
-
pie: {
|
20
|
-
show: true/false
|
21
|
-
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
|
22
|
-
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
|
23
|
-
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
|
24
|
-
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
|
25
|
-
offset: {
|
26
|
-
top: integer value to move the pie up or down
|
27
|
-
left: integer value to move the pie left or right, or 'auto'
|
28
|
-
},
|
29
|
-
stroke: {
|
30
|
-
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
|
31
|
-
width: integer pixel width of the stroke
|
32
|
-
},
|
33
|
-
label: {
|
34
|
-
show: true/false, or 'auto'
|
35
|
-
formatter: a user-defined function that modifies the text/style of the label text
|
36
|
-
radius: 0-1 for percentage of fullsize, or a specified pixel length
|
37
|
-
background: {
|
38
|
-
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
|
39
|
-
opacity: 0-1
|
40
|
-
},
|
41
|
-
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
|
42
|
-
},
|
43
|
-
combine: {
|
44
|
-
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
|
45
|
-
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
|
46
|
-
label: any text value of what the combined slice should be labeled
|
47
|
-
}
|
48
|
-
highlight: {
|
49
|
-
opacity: 0-1
|
50
|
-
}
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
More detail and specific examples can be found in the included HTML file.
|
55
|
-
|
56
|
-
*/
|
57
|
-
|
58
|
-
(function($) {
|
59
|
-
|
60
|
-
// Maximum redraw attempts when fitting labels within the plot
|
61
|
-
|
62
|
-
var REDRAW_ATTEMPTS = 10;
|
63
|
-
|
64
|
-
// Factor by which to shrink the pie when fitting labels within the plot
|
65
|
-
|
66
|
-
var REDRAW_SHRINK = 0.95;
|
67
|
-
|
68
|
-
function init(plot) {
|
69
|
-
|
70
|
-
var canvas = null,
|
71
|
-
target = null,
|
72
|
-
maxRadius = null,
|
73
|
-
centerLeft = null,
|
74
|
-
centerTop = null,
|
75
|
-
processed = false,
|
76
|
-
ctx = null;
|
77
|
-
|
78
|
-
// interactive variables
|
79
|
-
|
80
|
-
var highlights = [];
|
81
|
-
|
82
|
-
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
83
|
-
|
84
|
-
plot.hooks.processOptions.push(function(plot, options) {
|
85
|
-
if (options.series.pie.show) {
|
86
|
-
|
87
|
-
options.grid.show = false;
|
88
|
-
|
89
|
-
// set labels.show
|
90
|
-
|
91
|
-
if (options.series.pie.label.show == "auto") {
|
92
|
-
if (options.legend.show) {
|
93
|
-
options.series.pie.label.show = false;
|
94
|
-
} else {
|
95
|
-
options.series.pie.label.show = true;
|
96
|
-
}
|
97
|
-
}
|
98
|
-
|
99
|
-
// set radius
|
100
|
-
|
101
|
-
if (options.series.pie.radius == "auto") {
|
102
|
-
if (options.series.pie.label.show) {
|
103
|
-
options.series.pie.radius = 3/4;
|
104
|
-
} else {
|
105
|
-
options.series.pie.radius = 1;
|
106
|
-
}
|
107
|
-
}
|
108
|
-
|
109
|
-
// ensure sane tilt
|
110
|
-
|
111
|
-
if (options.series.pie.tilt > 1) {
|
112
|
-
options.series.pie.tilt = 1;
|
113
|
-
} else if (options.series.pie.tilt < 0) {
|
114
|
-
options.series.pie.tilt = 0;
|
115
|
-
}
|
116
|
-
}
|
117
|
-
});
|
118
|
-
|
119
|
-
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
120
|
-
var options = plot.getOptions();
|
121
|
-
if (options.series.pie.show) {
|
122
|
-
if (options.grid.hoverable) {
|
123
|
-
eventHolder.unbind("mousemove").mousemove(onMouseMove);
|
124
|
-
}
|
125
|
-
if (options.grid.clickable) {
|
126
|
-
eventHolder.unbind("click").click(onClick);
|
127
|
-
}
|
128
|
-
}
|
129
|
-
});
|
130
|
-
|
131
|
-
plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
|
132
|
-
var options = plot.getOptions();
|
133
|
-
if (options.series.pie.show) {
|
134
|
-
processDatapoints(plot, series, data, datapoints);
|
135
|
-
}
|
136
|
-
});
|
137
|
-
|
138
|
-
plot.hooks.drawOverlay.push(function(plot, octx) {
|
139
|
-
var options = plot.getOptions();
|
140
|
-
if (options.series.pie.show) {
|
141
|
-
drawOverlay(plot, octx);
|
142
|
-
}
|
143
|
-
});
|
144
|
-
|
145
|
-
plot.hooks.draw.push(function(plot, newCtx) {
|
146
|
-
var options = plot.getOptions();
|
147
|
-
if (options.series.pie.show) {
|
148
|
-
draw(plot, newCtx);
|
149
|
-
}
|
150
|
-
});
|
151
|
-
|
152
|
-
function processDatapoints(plot, series, datapoints) {
|
153
|
-
if (!processed) {
|
154
|
-
processed = true;
|
155
|
-
canvas = plot.getCanvas();
|
156
|
-
target = $(canvas).parent();
|
157
|
-
options = plot.getOptions();
|
158
|
-
plot.setData(combine(plot.getData()));
|
159
|
-
}
|
160
|
-
}
|
161
|
-
|
162
|
-
function combine(data) {
|
163
|
-
|
164
|
-
var total = 0,
|
165
|
-
combined = 0,
|
166
|
-
numCombined = 0,
|
167
|
-
color = options.series.pie.combine.color,
|
168
|
-
newdata = [];
|
169
|
-
|
170
|
-
// Fix up the raw data from Flot, ensuring the data is numeric
|
171
|
-
|
172
|
-
for (var i = 0; i < data.length; ++i) {
|
173
|
-
|
174
|
-
var value = data[i].data;
|
175
|
-
|
176
|
-
// If the data is an array, we'll assume that it's a standard
|
177
|
-
// Flot x-y pair, and are concerned only with the second value.
|
178
|
-
|
179
|
-
// Note how we use the original array, rather than creating a
|
180
|
-
// new one; this is more efficient and preserves any extra data
|
181
|
-
// that the user may have stored in higher indexes.
|
182
|
-
|
183
|
-
if ($.isArray(value)) {
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
//
|
262
|
-
|
263
|
-
|
264
|
-
//
|
265
|
-
//
|
266
|
-
// processDatapoints
|
267
|
-
|
268
|
-
|
269
|
-
//
|
270
|
-
|
271
|
-
//
|
272
|
-
|
273
|
-
//
|
274
|
-
//
|
275
|
-
|
276
|
-
|
277
|
-
processed
|
278
|
-
|
279
|
-
//
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
if (
|
314
|
-
|
315
|
-
}
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
}
|
322
|
-
|
323
|
-
if (
|
324
|
-
|
325
|
-
|
326
|
-
}
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
function
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
ctx.
|
355
|
-
ctx.
|
356
|
-
|
357
|
-
//
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
//
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
ctx.
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
ctx.
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
ctx.
|
431
|
-
}
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
var
|
491
|
-
|
492
|
-
var
|
493
|
-
|
494
|
-
|
495
|
-
label.
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
layer.
|
538
|
-
|
539
|
-
layer.
|
540
|
-
layer.
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
layer.
|
545
|
-
layer.
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
layer.
|
550
|
-
layer.
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
583
|
-
|
584
|
-
ctx.
|
585
|
-
ctx.
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
|
656
|
-
|
657
|
-
|
658
|
-
|
659
|
-
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
|
666
|
-
|
667
|
-
|
668
|
-
|
669
|
-
|
670
|
-
|
671
|
-
|
672
|
-
|
673
|
-
|
674
|
-
|
675
|
-
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
|
683
|
-
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
702
|
-
|
703
|
-
|
704
|
-
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
octx.
|
750
|
-
octx.
|
751
|
-
|
752
|
-
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
773
|
-
|
774
|
-
|
775
|
-
|
776
|
-
|
777
|
-
|
778
|
-
|
779
|
-
|
780
|
-
|
781
|
-
|
782
|
-
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
},
|
790
|
-
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
},
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
|
803
|
-
|
804
|
-
|
805
|
-
|
806
|
-
|
807
|
-
|
808
|
-
|
809
|
-
|
810
|
-
|
811
|
-
|
812
|
-
|
1
|
+
/* Flot plugin for rendering pie charts.
|
2
|
+
|
3
|
+
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
4
|
+
Licensed under the MIT license.
|
5
|
+
|
6
|
+
The plugin assumes that each series has a single data value, and that each
|
7
|
+
value is a positive integer or zero. Negative numbers don't make sense for a
|
8
|
+
pie chart, and have unpredictable results. The values do NOT need to be
|
9
|
+
passed in as percentages; the plugin will calculate the total and per-slice
|
10
|
+
percentages internally.
|
11
|
+
|
12
|
+
* Created by Brian Medendorp
|
13
|
+
|
14
|
+
* Updated with contributions from btburnett3, Anthony Aragues and Xavi Ivars
|
15
|
+
|
16
|
+
The plugin supports these options:
|
17
|
+
|
18
|
+
series: {
|
19
|
+
pie: {
|
20
|
+
show: true/false
|
21
|
+
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
|
22
|
+
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
|
23
|
+
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
|
24
|
+
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
|
25
|
+
offset: {
|
26
|
+
top: integer value to move the pie up or down
|
27
|
+
left: integer value to move the pie left or right, or 'auto'
|
28
|
+
},
|
29
|
+
stroke: {
|
30
|
+
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
|
31
|
+
width: integer pixel width of the stroke
|
32
|
+
},
|
33
|
+
label: {
|
34
|
+
show: true/false, or 'auto'
|
35
|
+
formatter: a user-defined function that modifies the text/style of the label text
|
36
|
+
radius: 0-1 for percentage of fullsize, or a specified pixel length
|
37
|
+
background: {
|
38
|
+
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
|
39
|
+
opacity: 0-1
|
40
|
+
},
|
41
|
+
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
|
42
|
+
},
|
43
|
+
combine: {
|
44
|
+
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
|
45
|
+
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
|
46
|
+
label: any text value of what the combined slice should be labeled
|
47
|
+
}
|
48
|
+
highlight: {
|
49
|
+
opacity: 0-1
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
More detail and specific examples can be found in the included HTML file.
|
55
|
+
|
56
|
+
*/
|
57
|
+
|
58
|
+
(function($) {
|
59
|
+
|
60
|
+
// Maximum redraw attempts when fitting labels within the plot
|
61
|
+
|
62
|
+
var REDRAW_ATTEMPTS = 10;
|
63
|
+
|
64
|
+
// Factor by which to shrink the pie when fitting labels within the plot
|
65
|
+
|
66
|
+
var REDRAW_SHRINK = 0.95;
|
67
|
+
|
68
|
+
function init(plot) {
|
69
|
+
|
70
|
+
var canvas = null,
|
71
|
+
target = null,
|
72
|
+
maxRadius = null,
|
73
|
+
centerLeft = null,
|
74
|
+
centerTop = null,
|
75
|
+
processed = false,
|
76
|
+
ctx = null;
|
77
|
+
|
78
|
+
// interactive variables
|
79
|
+
|
80
|
+
var highlights = [];
|
81
|
+
|
82
|
+
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
83
|
+
|
84
|
+
plot.hooks.processOptions.push(function(plot, options) {
|
85
|
+
if (options.series.pie.show) {
|
86
|
+
|
87
|
+
options.grid.show = false;
|
88
|
+
|
89
|
+
// set labels.show
|
90
|
+
|
91
|
+
if (options.series.pie.label.show == "auto") {
|
92
|
+
if (options.legend.show) {
|
93
|
+
options.series.pie.label.show = false;
|
94
|
+
} else {
|
95
|
+
options.series.pie.label.show = true;
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
// set radius
|
100
|
+
|
101
|
+
if (options.series.pie.radius == "auto") {
|
102
|
+
if (options.series.pie.label.show) {
|
103
|
+
options.series.pie.radius = 3/4;
|
104
|
+
} else {
|
105
|
+
options.series.pie.radius = 1;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
// ensure sane tilt
|
110
|
+
|
111
|
+
if (options.series.pie.tilt > 1) {
|
112
|
+
options.series.pie.tilt = 1;
|
113
|
+
} else if (options.series.pie.tilt < 0) {
|
114
|
+
options.series.pie.tilt = 0;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
});
|
118
|
+
|
119
|
+
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
120
|
+
var options = plot.getOptions();
|
121
|
+
if (options.series.pie.show) {
|
122
|
+
if (options.grid.hoverable) {
|
123
|
+
eventHolder.unbind("mousemove").mousemove(onMouseMove);
|
124
|
+
}
|
125
|
+
if (options.grid.clickable) {
|
126
|
+
eventHolder.unbind("click").click(onClick);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
});
|
130
|
+
|
131
|
+
plot.hooks.processDatapoints.push(function(plot, series, data, datapoints) {
|
132
|
+
var options = plot.getOptions();
|
133
|
+
if (options.series.pie.show) {
|
134
|
+
processDatapoints(plot, series, data, datapoints);
|
135
|
+
}
|
136
|
+
});
|
137
|
+
|
138
|
+
plot.hooks.drawOverlay.push(function(plot, octx) {
|
139
|
+
var options = plot.getOptions();
|
140
|
+
if (options.series.pie.show) {
|
141
|
+
drawOverlay(plot, octx);
|
142
|
+
}
|
143
|
+
});
|
144
|
+
|
145
|
+
plot.hooks.draw.push(function(plot, newCtx) {
|
146
|
+
var options = plot.getOptions();
|
147
|
+
if (options.series.pie.show) {
|
148
|
+
draw(plot, newCtx);
|
149
|
+
}
|
150
|
+
});
|
151
|
+
|
152
|
+
function processDatapoints(plot, series, datapoints) {
|
153
|
+
if (!processed) {
|
154
|
+
processed = true;
|
155
|
+
canvas = plot.getCanvas();
|
156
|
+
target = $(canvas).parent();
|
157
|
+
options = plot.getOptions();
|
158
|
+
plot.setData(combine(plot.getData()));
|
159
|
+
}
|
160
|
+
}
|
161
|
+
|
162
|
+
function combine(data) {
|
163
|
+
|
164
|
+
var total = 0,
|
165
|
+
combined = 0,
|
166
|
+
numCombined = 0,
|
167
|
+
color = options.series.pie.combine.color,
|
168
|
+
newdata = [];
|
169
|
+
|
170
|
+
// Fix up the raw data from Flot, ensuring the data is numeric
|
171
|
+
|
172
|
+
for (var i = 0; i < data.length; ++i) {
|
173
|
+
|
174
|
+
var value = data[i].data;
|
175
|
+
|
176
|
+
// If the data is an array, we'll assume that it's a standard
|
177
|
+
// Flot x-y pair, and are concerned only with the second value.
|
178
|
+
|
179
|
+
// Note how we use the original array, rather than creating a
|
180
|
+
// new one; this is more efficient and preserves any extra data
|
181
|
+
// that the user may have stored in higher indexes.
|
182
|
+
|
183
|
+
if ($.isArray(value) && value.length == 1) {
|
184
|
+
value = value[0];
|
185
|
+
}
|
186
|
+
|
187
|
+
if ($.isArray(value)) {
|
188
|
+
// Equivalent to $.isNumeric() but compatible with jQuery < 1.7
|
189
|
+
if (!isNaN(parseFloat(value[1])) && isFinite(value[1])) {
|
190
|
+
value[1] = +value[1];
|
191
|
+
} else {
|
192
|
+
value[1] = 0;
|
193
|
+
}
|
194
|
+
} else if (!isNaN(parseFloat(value)) && isFinite(value)) {
|
195
|
+
value = [1, +value];
|
196
|
+
} else {
|
197
|
+
value = [1, 0];
|
198
|
+
}
|
199
|
+
|
200
|
+
data[i].data = [value];
|
201
|
+
}
|
202
|
+
|
203
|
+
// Sum up all the slices, so we can calculate percentages for each
|
204
|
+
|
205
|
+
for (var i = 0; i < data.length; ++i) {
|
206
|
+
total += data[i].data[0][1];
|
207
|
+
}
|
208
|
+
|
209
|
+
// Count the number of slices with percentages below the combine
|
210
|
+
// threshold; if it turns out to be just one, we won't combine.
|
211
|
+
|
212
|
+
for (var i = 0; i < data.length; ++i) {
|
213
|
+
var value = data[i].data[0][1];
|
214
|
+
if (value / total <= options.series.pie.combine.threshold) {
|
215
|
+
combined += value;
|
216
|
+
numCombined++;
|
217
|
+
if (!color) {
|
218
|
+
color = data[i].color;
|
219
|
+
}
|
220
|
+
}
|
221
|
+
}
|
222
|
+
|
223
|
+
for (var i = 0; i < data.length; ++i) {
|
224
|
+
var value = data[i].data[0][1];
|
225
|
+
if (numCombined < 2 || value / total > options.series.pie.combine.threshold) {
|
226
|
+
newdata.push({
|
227
|
+
data: [[1, value]],
|
228
|
+
color: data[i].color,
|
229
|
+
label: data[i].label,
|
230
|
+
angle: value * Math.PI * 2 / total,
|
231
|
+
percent: value / (total / 100)
|
232
|
+
});
|
233
|
+
}
|
234
|
+
}
|
235
|
+
|
236
|
+
if (numCombined > 1) {
|
237
|
+
newdata.push({
|
238
|
+
data: [[1, combined]],
|
239
|
+
color: color,
|
240
|
+
label: options.series.pie.combine.label,
|
241
|
+
angle: combined * Math.PI * 2 / total,
|
242
|
+
percent: combined / (total / 100)
|
243
|
+
});
|
244
|
+
}
|
245
|
+
|
246
|
+
return newdata;
|
247
|
+
}
|
248
|
+
|
249
|
+
function draw(plot, newCtx) {
|
250
|
+
|
251
|
+
if (!target) {
|
252
|
+
return; // if no series were passed
|
253
|
+
}
|
254
|
+
|
255
|
+
var canvasWidth = plot.getPlaceholder().width(),
|
256
|
+
canvasHeight = plot.getPlaceholder().height(),
|
257
|
+
legendWidth = target.children().filter(".legend").children().width() || 0;
|
258
|
+
|
259
|
+
ctx = newCtx;
|
260
|
+
|
261
|
+
// WARNING: HACK! REWRITE THIS CODE AS SOON AS POSSIBLE!
|
262
|
+
|
263
|
+
// When combining smaller slices into an 'other' slice, we need to
|
264
|
+
// add a new series. Since Flot gives plugins no way to modify the
|
265
|
+
// list of series, the pie plugin uses a hack where the first call
|
266
|
+
// to processDatapoints results in a call to setData with the new
|
267
|
+
// list of series, then subsequent processDatapoints do nothing.
|
268
|
+
|
269
|
+
// The plugin-global 'processed' flag is used to control this hack;
|
270
|
+
// it starts out false, and is set to true after the first call to
|
271
|
+
// processDatapoints.
|
272
|
+
|
273
|
+
// Unfortunately this turns future setData calls into no-ops; they
|
274
|
+
// call processDatapoints, the flag is true, and nothing happens.
|
275
|
+
|
276
|
+
// To fix this we'll set the flag back to false here in draw, when
|
277
|
+
// all series have been processed, so the next sequence of calls to
|
278
|
+
// processDatapoints once again starts out with a slice-combine.
|
279
|
+
// This is really a hack; in 0.9 we need to give plugins a proper
|
280
|
+
// way to modify series before any processing begins.
|
281
|
+
|
282
|
+
processed = false;
|
283
|
+
|
284
|
+
// calculate maximum radius and center point
|
285
|
+
|
286
|
+
maxRadius = Math.min(canvasWidth, canvasHeight / options.series.pie.tilt) / 2;
|
287
|
+
centerTop = canvasHeight / 2 + options.series.pie.offset.top;
|
288
|
+
centerLeft = canvasWidth / 2;
|
289
|
+
|
290
|
+
if (options.series.pie.offset.left == "auto") {
|
291
|
+
if (options.legend.position.match("w")) {
|
292
|
+
centerLeft += legendWidth / 2;
|
293
|
+
} else {
|
294
|
+
centerLeft -= legendWidth / 2;
|
295
|
+
}
|
296
|
+
} else {
|
297
|
+
centerLeft += options.series.pie.offset.left;
|
298
|
+
}
|
299
|
+
|
300
|
+
if (centerLeft < maxRadius) {
|
301
|
+
centerLeft = maxRadius;
|
302
|
+
} else if (centerLeft > canvasWidth - maxRadius) {
|
303
|
+
centerLeft = canvasWidth - maxRadius;
|
304
|
+
}
|
305
|
+
|
306
|
+
var slices = plot.getData(),
|
307
|
+
attempts = 0;
|
308
|
+
|
309
|
+
// Keep shrinking the pie's radius until drawPie returns true,
|
310
|
+
// indicating that all the labels fit, or we try too many times.
|
311
|
+
|
312
|
+
do {
|
313
|
+
if (attempts > 0) {
|
314
|
+
maxRadius *= REDRAW_SHRINK;
|
315
|
+
}
|
316
|
+
attempts += 1;
|
317
|
+
clear();
|
318
|
+
if (options.series.pie.tilt <= 0.8) {
|
319
|
+
drawShadow();
|
320
|
+
}
|
321
|
+
} while (!drawPie() && attempts < REDRAW_ATTEMPTS)
|
322
|
+
|
323
|
+
if (attempts >= REDRAW_ATTEMPTS) {
|
324
|
+
clear();
|
325
|
+
target.prepend("<div class='error'>Could not draw pie with labels contained inside canvas</div>");
|
326
|
+
}
|
327
|
+
|
328
|
+
if (plot.setSeries && plot.insertLegend) {
|
329
|
+
plot.setSeries(slices);
|
330
|
+
plot.insertLegend();
|
331
|
+
}
|
332
|
+
|
333
|
+
// we're actually done at this point, just defining internal functions at this point
|
334
|
+
|
335
|
+
function clear() {
|
336
|
+
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
337
|
+
target.children().filter(".pieLabel, .pieLabelBackground").remove();
|
338
|
+
}
|
339
|
+
|
340
|
+
function drawShadow() {
|
341
|
+
|
342
|
+
var shadowLeft = options.series.pie.shadow.left;
|
343
|
+
var shadowTop = options.series.pie.shadow.top;
|
344
|
+
var edge = 10;
|
345
|
+
var alpha = options.series.pie.shadow.alpha;
|
346
|
+
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
347
|
+
|
348
|
+
if (radius >= canvasWidth / 2 - shadowLeft || radius * options.series.pie.tilt >= canvasHeight / 2 - shadowTop || radius <= edge) {
|
349
|
+
return; // shadow would be outside canvas, so don't draw it
|
350
|
+
}
|
351
|
+
|
352
|
+
ctx.save();
|
353
|
+
ctx.translate(shadowLeft,shadowTop);
|
354
|
+
ctx.globalAlpha = alpha;
|
355
|
+
ctx.fillStyle = "#000";
|
356
|
+
|
357
|
+
// center and rotate to starting position
|
358
|
+
|
359
|
+
ctx.translate(centerLeft,centerTop);
|
360
|
+
ctx.scale(1, options.series.pie.tilt);
|
361
|
+
|
362
|
+
//radius -= edge;
|
363
|
+
|
364
|
+
for (var i = 1; i <= edge; i++) {
|
365
|
+
ctx.beginPath();
|
366
|
+
ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
|
367
|
+
ctx.fill();
|
368
|
+
radius -= i;
|
369
|
+
}
|
370
|
+
|
371
|
+
ctx.restore();
|
372
|
+
}
|
373
|
+
|
374
|
+
function drawPie() {
|
375
|
+
|
376
|
+
var startAngle = Math.PI * options.series.pie.startAngle;
|
377
|
+
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
378
|
+
|
379
|
+
// center and rotate to starting position
|
380
|
+
|
381
|
+
ctx.save();
|
382
|
+
ctx.translate(centerLeft,centerTop);
|
383
|
+
ctx.scale(1, options.series.pie.tilt);
|
384
|
+
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
385
|
+
|
386
|
+
// draw slices
|
387
|
+
|
388
|
+
ctx.save();
|
389
|
+
var currentAngle = startAngle;
|
390
|
+
for (var i = 0; i < slices.length; ++i) {
|
391
|
+
slices[i].startAngle = currentAngle;
|
392
|
+
drawSlice(slices[i].angle, slices[i].color, true);
|
393
|
+
}
|
394
|
+
ctx.restore();
|
395
|
+
|
396
|
+
// draw slice outlines
|
397
|
+
|
398
|
+
if (options.series.pie.stroke.width > 0) {
|
399
|
+
ctx.save();
|
400
|
+
ctx.lineWidth = options.series.pie.stroke.width;
|
401
|
+
currentAngle = startAngle;
|
402
|
+
for (var i = 0; i < slices.length; ++i) {
|
403
|
+
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
|
404
|
+
}
|
405
|
+
ctx.restore();
|
406
|
+
}
|
407
|
+
|
408
|
+
// draw donut hole
|
409
|
+
|
410
|
+
drawDonutHole(ctx);
|
411
|
+
|
412
|
+
ctx.restore();
|
413
|
+
|
414
|
+
// Draw the labels, returning true if they fit within the plot
|
415
|
+
|
416
|
+
if (options.series.pie.label.show) {
|
417
|
+
return drawLabels();
|
418
|
+
} else return true;
|
419
|
+
|
420
|
+
function drawSlice(angle, color, fill) {
|
421
|
+
|
422
|
+
if (angle <= 0 || isNaN(angle)) {
|
423
|
+
return;
|
424
|
+
}
|
425
|
+
|
426
|
+
if (fill) {
|
427
|
+
ctx.fillStyle = color;
|
428
|
+
} else {
|
429
|
+
ctx.strokeStyle = color;
|
430
|
+
ctx.lineJoin = "round";
|
431
|
+
}
|
432
|
+
|
433
|
+
ctx.beginPath();
|
434
|
+
if (Math.abs(angle - Math.PI * 2) > 0.000000001) {
|
435
|
+
ctx.moveTo(0, 0); // Center of the pie
|
436
|
+
}
|
437
|
+
|
438
|
+
//ctx.arc(0, 0, radius, 0, angle, false); // This doesn't work properly in Opera
|
439
|
+
ctx.arc(0, 0, radius,currentAngle, currentAngle + angle / 2, false);
|
440
|
+
ctx.arc(0, 0, radius,currentAngle + angle / 2, currentAngle + angle, false);
|
441
|
+
ctx.closePath();
|
442
|
+
//ctx.rotate(angle); // This doesn't work properly in Opera
|
443
|
+
currentAngle += angle;
|
444
|
+
|
445
|
+
if (fill) {
|
446
|
+
ctx.fill();
|
447
|
+
} else {
|
448
|
+
ctx.stroke();
|
449
|
+
}
|
450
|
+
}
|
451
|
+
|
452
|
+
function drawLabels() {
|
453
|
+
|
454
|
+
var currentAngle = startAngle;
|
455
|
+
var radius = options.series.pie.label.radius > 1 ? options.series.pie.label.radius : maxRadius * options.series.pie.label.radius;
|
456
|
+
|
457
|
+
for (var i = 0; i < slices.length; ++i) {
|
458
|
+
if (slices[i].percent >= options.series.pie.label.threshold * 100) {
|
459
|
+
if (!drawLabel(slices[i], currentAngle, i)) {
|
460
|
+
return false;
|
461
|
+
}
|
462
|
+
}
|
463
|
+
currentAngle += slices[i].angle;
|
464
|
+
}
|
465
|
+
|
466
|
+
return true;
|
467
|
+
|
468
|
+
function drawLabel(slice, startAngle, index) {
|
469
|
+
|
470
|
+
if (slice.data[0][1] == 0) {
|
471
|
+
return true;
|
472
|
+
}
|
473
|
+
|
474
|
+
// format label text
|
475
|
+
|
476
|
+
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
|
477
|
+
|
478
|
+
if (lf) {
|
479
|
+
text = lf(slice.label, slice);
|
480
|
+
} else {
|
481
|
+
text = slice.label;
|
482
|
+
}
|
483
|
+
|
484
|
+
if (plf) {
|
485
|
+
text = plf(text, slice);
|
486
|
+
}
|
487
|
+
|
488
|
+
var halfAngle = ((startAngle + slice.angle) + startAngle) / 2;
|
489
|
+
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
|
490
|
+
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
|
491
|
+
|
492
|
+
var html = "<span class='pieLabel' id='pieLabel" + index + "' style='position:absolute;top:" + y + "px;left:" + x + "px;'>" + text + "</span>";
|
493
|
+
target.append(html);
|
494
|
+
|
495
|
+
var label = target.children("#pieLabel" + index);
|
496
|
+
var labelTop = (y - label.height() / 2);
|
497
|
+
var labelLeft = (x - label.width() / 2);
|
498
|
+
|
499
|
+
label.css("top", labelTop);
|
500
|
+
label.css("left", labelLeft);
|
501
|
+
|
502
|
+
// check to make sure that the label is not outside the canvas
|
503
|
+
|
504
|
+
if (0 - labelTop > 0 || 0 - labelLeft > 0 || canvasHeight - (labelTop + label.height()) < 0 || canvasWidth - (labelLeft + label.width()) < 0) {
|
505
|
+
return false;
|
506
|
+
}
|
507
|
+
|
508
|
+
if (options.series.pie.label.background.opacity != 0) {
|
509
|
+
|
510
|
+
// put in the transparent background separately to avoid blended labels and label boxes
|
511
|
+
|
512
|
+
var c = options.series.pie.label.background.color;
|
513
|
+
|
514
|
+
if (c == null) {
|
515
|
+
c = slice.color;
|
516
|
+
}
|
517
|
+
|
518
|
+
var pos = "top:" + labelTop + "px;left:" + labelLeft + "px;";
|
519
|
+
$("<div class='pieLabelBackground' style='position:absolute;width:" + label.width() + "px;height:" + label.height() + "px;" + pos + "background-color:" + c + ";'></div>")
|
520
|
+
.css("opacity", options.series.pie.label.background.opacity)
|
521
|
+
.insertBefore(label);
|
522
|
+
}
|
523
|
+
|
524
|
+
return true;
|
525
|
+
} // end individual label function
|
526
|
+
} // end drawLabels function
|
527
|
+
} // end drawPie function
|
528
|
+
} // end draw function
|
529
|
+
|
530
|
+
// Placed here because it needs to be accessed from multiple locations
|
531
|
+
|
532
|
+
function drawDonutHole(layer) {
|
533
|
+
if (options.series.pie.innerRadius > 0) {
|
534
|
+
|
535
|
+
// subtract the center
|
536
|
+
|
537
|
+
layer.save();
|
538
|
+
var innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
|
539
|
+
layer.globalCompositeOperation = "destination-out"; // this does not work with excanvas, but it will fall back to using the stroke color
|
540
|
+
layer.beginPath();
|
541
|
+
layer.fillStyle = options.series.pie.stroke.color;
|
542
|
+
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
|
543
|
+
layer.fill();
|
544
|
+
layer.closePath();
|
545
|
+
layer.restore();
|
546
|
+
|
547
|
+
// add inner stroke
|
548
|
+
|
549
|
+
layer.save();
|
550
|
+
layer.beginPath();
|
551
|
+
layer.strokeStyle = options.series.pie.stroke.color;
|
552
|
+
layer.arc(0, 0, innerRadius, 0, Math.PI * 2, false);
|
553
|
+
layer.stroke();
|
554
|
+
layer.closePath();
|
555
|
+
layer.restore();
|
556
|
+
|
557
|
+
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
|
558
|
+
}
|
559
|
+
}
|
560
|
+
|
561
|
+
//-- Additional Interactive related functions --
|
562
|
+
|
563
|
+
function isPointInPoly(poly, pt) {
|
564
|
+
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
|
565
|
+
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
|
566
|
+
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
|
567
|
+
&& (c = !c);
|
568
|
+
return c;
|
569
|
+
}
|
570
|
+
|
571
|
+
function findNearbySlice(mouseX, mouseY) {
|
572
|
+
|
573
|
+
var slices = plot.getData(),
|
574
|
+
options = plot.getOptions(),
|
575
|
+
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius,
|
576
|
+
x, y;
|
577
|
+
|
578
|
+
for (var i = 0; i < slices.length; ++i) {
|
579
|
+
|
580
|
+
var s = slices[i];
|
581
|
+
|
582
|
+
if (s.pie.show) {
|
583
|
+
|
584
|
+
ctx.save();
|
585
|
+
ctx.beginPath();
|
586
|
+
ctx.moveTo(0, 0); // Center of the pie
|
587
|
+
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
|
588
|
+
ctx.arc(0, 0, radius, s.startAngle, s.startAngle + s.angle / 2, false);
|
589
|
+
ctx.arc(0, 0, radius, s.startAngle + s.angle / 2, s.startAngle + s.angle, false);
|
590
|
+
ctx.closePath();
|
591
|
+
x = mouseX - centerLeft;
|
592
|
+
y = mouseY - centerTop;
|
593
|
+
|
594
|
+
if (ctx.isPointInPath) {
|
595
|
+
if (ctx.isPointInPath(mouseX - centerLeft, mouseY - centerTop)) {
|
596
|
+
ctx.restore();
|
597
|
+
return {
|
598
|
+
datapoint: [s.percent, s.data],
|
599
|
+
dataIndex: 0,
|
600
|
+
series: s,
|
601
|
+
seriesIndex: i
|
602
|
+
};
|
603
|
+
}
|
604
|
+
} else {
|
605
|
+
|
606
|
+
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
|
607
|
+
|
608
|
+
var p1X = radius * Math.cos(s.startAngle),
|
609
|
+
p1Y = radius * Math.sin(s.startAngle),
|
610
|
+
p2X = radius * Math.cos(s.startAngle + s.angle / 4),
|
611
|
+
p2Y = radius * Math.sin(s.startAngle + s.angle / 4),
|
612
|
+
p3X = radius * Math.cos(s.startAngle + s.angle / 2),
|
613
|
+
p3Y = radius * Math.sin(s.startAngle + s.angle / 2),
|
614
|
+
p4X = radius * Math.cos(s.startAngle + s.angle / 1.5),
|
615
|
+
p4Y = radius * Math.sin(s.startAngle + s.angle / 1.5),
|
616
|
+
p5X = radius * Math.cos(s.startAngle + s.angle),
|
617
|
+
p5Y = radius * Math.sin(s.startAngle + s.angle),
|
618
|
+
arrPoly = [[0, 0], [p1X, p1Y], [p2X, p2Y], [p3X, p3Y], [p4X, p4Y], [p5X, p5Y]],
|
619
|
+
arrPoint = [x, y];
|
620
|
+
|
621
|
+
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
|
622
|
+
|
623
|
+
if (isPointInPoly(arrPoly, arrPoint)) {
|
624
|
+
ctx.restore();
|
625
|
+
return {
|
626
|
+
datapoint: [s.percent, s.data],
|
627
|
+
dataIndex: 0,
|
628
|
+
series: s,
|
629
|
+
seriesIndex: i
|
630
|
+
};
|
631
|
+
}
|
632
|
+
}
|
633
|
+
|
634
|
+
ctx.restore();
|
635
|
+
}
|
636
|
+
}
|
637
|
+
|
638
|
+
return null;
|
639
|
+
}
|
640
|
+
|
641
|
+
function onMouseMove(e) {
|
642
|
+
triggerClickHoverEvent("plothover", e);
|
643
|
+
}
|
644
|
+
|
645
|
+
function onClick(e) {
|
646
|
+
triggerClickHoverEvent("plotclick", e);
|
647
|
+
}
|
648
|
+
|
649
|
+
// trigger click or hover event (they send the same parameters so we share their code)
|
650
|
+
|
651
|
+
function triggerClickHoverEvent(eventname, e) {
|
652
|
+
|
653
|
+
var offset = plot.offset();
|
654
|
+
var canvasX = parseInt(e.pageX - offset.left);
|
655
|
+
var canvasY = parseInt(e.pageY - offset.top);
|
656
|
+
var item = findNearbySlice(canvasX, canvasY);
|
657
|
+
|
658
|
+
if (options.grid.autoHighlight) {
|
659
|
+
|
660
|
+
// clear auto-highlights
|
661
|
+
|
662
|
+
for (var i = 0; i < highlights.length; ++i) {
|
663
|
+
var h = highlights[i];
|
664
|
+
if (h.auto == eventname && !(item && h.series == item.series)) {
|
665
|
+
unhighlight(h.series);
|
666
|
+
}
|
667
|
+
}
|
668
|
+
}
|
669
|
+
|
670
|
+
// highlight the slice
|
671
|
+
|
672
|
+
if (item) {
|
673
|
+
highlight(item.series, eventname);
|
674
|
+
}
|
675
|
+
|
676
|
+
// trigger any hover bind events
|
677
|
+
|
678
|
+
var pos = { pageX: e.pageX, pageY: e.pageY };
|
679
|
+
target.trigger(eventname, [pos, item]);
|
680
|
+
}
|
681
|
+
|
682
|
+
function highlight(s, auto) {
|
683
|
+
//if (typeof s == "number") {
|
684
|
+
// s = series[s];
|
685
|
+
//}
|
686
|
+
|
687
|
+
var i = indexOfHighlight(s);
|
688
|
+
|
689
|
+
if (i == -1) {
|
690
|
+
highlights.push({ series: s, auto: auto });
|
691
|
+
plot.triggerRedrawOverlay();
|
692
|
+
} else if (!auto) {
|
693
|
+
highlights[i].auto = false;
|
694
|
+
}
|
695
|
+
}
|
696
|
+
|
697
|
+
function unhighlight(s) {
|
698
|
+
if (s == null) {
|
699
|
+
highlights = [];
|
700
|
+
plot.triggerRedrawOverlay();
|
701
|
+
}
|
702
|
+
|
703
|
+
//if (typeof s == "number") {
|
704
|
+
// s = series[s];
|
705
|
+
//}
|
706
|
+
|
707
|
+
var i = indexOfHighlight(s);
|
708
|
+
|
709
|
+
if (i != -1) {
|
710
|
+
highlights.splice(i, 1);
|
711
|
+
plot.triggerRedrawOverlay();
|
712
|
+
}
|
713
|
+
}
|
714
|
+
|
715
|
+
function indexOfHighlight(s) {
|
716
|
+
for (var i = 0; i < highlights.length; ++i) {
|
717
|
+
var h = highlights[i];
|
718
|
+
if (h.series == s)
|
719
|
+
return i;
|
720
|
+
}
|
721
|
+
return -1;
|
722
|
+
}
|
723
|
+
|
724
|
+
function drawOverlay(plot, octx) {
|
725
|
+
|
726
|
+
var options = plot.getOptions();
|
727
|
+
|
728
|
+
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
729
|
+
|
730
|
+
octx.save();
|
731
|
+
octx.translate(centerLeft, centerTop);
|
732
|
+
octx.scale(1, options.series.pie.tilt);
|
733
|
+
|
734
|
+
for (var i = 0; i < highlights.length; ++i) {
|
735
|
+
drawHighlight(highlights[i].series);
|
736
|
+
}
|
737
|
+
|
738
|
+
drawDonutHole(octx);
|
739
|
+
|
740
|
+
octx.restore();
|
741
|
+
|
742
|
+
function drawHighlight(series) {
|
743
|
+
|
744
|
+
if (series.angle <= 0 || isNaN(series.angle)) {
|
745
|
+
return;
|
746
|
+
}
|
747
|
+
|
748
|
+
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
|
749
|
+
octx.fillStyle = "rgba(255, 255, 255, " + options.series.pie.highlight.opacity + ")"; // this is temporary until we have access to parseColor
|
750
|
+
octx.beginPath();
|
751
|
+
if (Math.abs(series.angle - Math.PI * 2) > 0.000000001) {
|
752
|
+
octx.moveTo(0, 0); // Center of the pie
|
753
|
+
}
|
754
|
+
octx.arc(0, 0, radius, series.startAngle, series.startAngle + series.angle / 2, false);
|
755
|
+
octx.arc(0, 0, radius, series.startAngle + series.angle / 2, series.startAngle + series.angle, false);
|
756
|
+
octx.closePath();
|
757
|
+
octx.fill();
|
758
|
+
}
|
759
|
+
}
|
760
|
+
} // end init (plugin body)
|
761
|
+
|
762
|
+
// define pie specific options and their default values
|
763
|
+
|
764
|
+
var options = {
|
765
|
+
series: {
|
766
|
+
pie: {
|
767
|
+
show: false,
|
768
|
+
radius: "auto", // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
|
769
|
+
innerRadius: 0, /* for donut */
|
770
|
+
startAngle: 3/2,
|
771
|
+
tilt: 1,
|
772
|
+
shadow: {
|
773
|
+
left: 5, // shadow left offset
|
774
|
+
top: 15, // shadow top offset
|
775
|
+
alpha: 0.02 // shadow alpha
|
776
|
+
},
|
777
|
+
offset: {
|
778
|
+
top: 0,
|
779
|
+
left: "auto"
|
780
|
+
},
|
781
|
+
stroke: {
|
782
|
+
color: "#fff",
|
783
|
+
width: 1
|
784
|
+
},
|
785
|
+
label: {
|
786
|
+
show: "auto",
|
787
|
+
formatter: function(label, slice) {
|
788
|
+
return "<div style='font-size:x-small;text-align:center;padding:2px;color:" + slice.color + ";'>" + label + "<br/>" + Math.round(slice.percent) + "%</div>";
|
789
|
+
}, // formatter function
|
790
|
+
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
|
791
|
+
background: {
|
792
|
+
color: null,
|
793
|
+
opacity: 0
|
794
|
+
},
|
795
|
+
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
|
796
|
+
},
|
797
|
+
combine: {
|
798
|
+
threshold: -1, // percentage at which to combine little slices into one larger slice
|
799
|
+
color: null, // color to give the new slice (auto-generated if null)
|
800
|
+
label: "Other" // label to give the new slice
|
801
|
+
},
|
802
|
+
highlight: {
|
803
|
+
//color: "#fff", // will add this functionality once parseColor is available
|
804
|
+
opacity: 0.5
|
805
|
+
}
|
806
|
+
}
|
807
|
+
}
|
808
|
+
};
|
809
|
+
|
810
|
+
$.plot.plugins.push({
|
811
|
+
init: init,
|
812
|
+
options: options,
|
813
|
+
name: "pie",
|
814
|
+
version: "1.1"
|
815
|
+
});
|
816
|
+
|
817
|
+
})(jQuery);
|