Commits

Anonymous committed 8bca236

Fix to pie positioning when using slice margin.

Comments (0)

Files changed (3)

examples/pieTest4.html

     ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]], 
     {
       title: ' ', 
-      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { sliceMargin: 4, showDataLabels: true } }, 
+      seriesDefaults: {shadow: false, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { startAngle: 180, sliceMargin: 4, showDataLabels: true } }, 
       legend: { show:true }
     }
   );
       legend: { show:true }
     }
   );
-
-  
 });
 </script>
 
       legend: { show:true }
     }
   );
+});
+</script>
 
-  
+<script class="code" type="text/javascript">$(document).ready(function(){
+  jQuery.jqplot.config.enablePlugins = true;
+  plot7 = jQuery.jqplot('chart7', 
+    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot8 = jQuery.jqplot('chart8', 
+    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  jQuery.jqplot.config.enablePlugins = true;
+  plot9 = jQuery.jqplot('chart9', 
+    [[['Verwerkende industrie', 9],['Retail', 8], ['Primaire producent', 7], 
+    ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { fill: false, sliceMargin: 4, showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
+});
+</script>
+
+<script class="code" type="text/javascript">$(document).ready(function(){
+  plot10 = jQuery.jqplot('chart10', 
+    [[['Verwerkende industrie', 100],['Retail', 0], ['Primaire producent', 0], 
+    ['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 0], ['Bewerkende industrie', 1]]], 
+    {
+      title: ' ', 
+      seriesDefaults: {shadow: true, renderer: jQuery.jqplot.PieRenderer, rendererOptions: { fill: false, sliceMargin: 4, showDataLabels: true } }, 
+      legend: { show:true }
+    }
+  );
 });
 </script>
 
 
     <div id="chart6" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
     <pre class="code"></pre>
+
+    <div id="chart7" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+
+    <div id="chart8" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+
+    <div id="chart9" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
+
+    <div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div>
+    <pre class="code"></pre>
   </body>
 </html>

src/jqplot.core.js

                 return window.G_vmlCanvasManager.initElement(canvas);
             }
             return canvas;
-        }
+        };
 
         this.freeAllCanvases = function() {
             for (var i = 0, l=myCanvases.length; i < l; i++) {

src/plugins/jqplot.pieRenderer.js

     function calcRadiusAdjustment(ang) {
         return Math.sin((ang - (ang-Math.PI) / 8 / Math.PI )/2.0);
     }
+
+    function calcRPrime(ang1, ang2, sliceMargin, fill, lineWidth) {
+        var rprime = 0;
+        var ang = ang2 - ang1;
+        var absang = Math.abs(ang);
+        var sm = sliceMargin;
+        if (fill == false) {
+            sm += lineWidth;
+        }
+
+        if (sm > 0 && absang > 0.01 && absang < 6.282) {
+            rprime = parseFloat(sm) / 2.0 / calcRadiusAdjustment(ang);
+        }
+
+        return rprime;
+    }
     
     $.jqplot.PieRenderer.prototype.drawSlice = function (ctx, ang1, ang2, color, isShadow) {
         if (this._drawData) {
-            var r = this._diameter / 2.0;
+            var r = this._radius;
             var fill = this.fill;
             var lineWidth = this.lineWidth;
             var sm = this.sliceMargin;
             }
             ctx.save();
             ctx.translate(this._center[0], this._center[1]);
-            var rprime = 0;
-            var ang = ang2 - ang1;
-            var absang = Math.abs(ang);
-            if (this.sliceMargin > 0 && absang > 0.01 && absang < 6.282) {
-                rprime = parseFloat(sm) / 2.0 / calcRadiusAdjustment(ang);
-            }
+            
+            var rprime = calcRPrime(ang1, ang2, this.sliceMargin, this.fill, this.lineWidth);
 
             var transx = rprime * Math.cos((ang1 + ang2) / 2.0);
             var transy = rprime * Math.sin((ang1 + ang2) / 2.0);
             ctx.translate(transx, transy);
             
             if (isShadow) {
-                for (var i=0; i<this.shadowDepth; i++) {
+                for (var i=0, l=this.shadowDepth; i<l; i++) {
                     ctx.save();
                     ctx.translate(this.shadowOffset*Math.cos(this.shadowAngle/180*Math.PI), this.shadowOffset*Math.sin(this.shadowAngle/180*Math.PI));
                     doDraw(r);
                 }
+                for (var i=0, l=this.shadowDepth; i<l; i++) {
+                    ctx.restore();
+                }
             }
     
             else {
                 doDraw(r);
             }
+            ctx.restore();
         }
     
         function doDraw (rad) {
                 ctx.stroke();
             }
         }
-        
-        if (isShadow) {
-            for (var i=0; i<this.shadowDepth; i++) {
-                ctx.restore();
-            }
-        }
-        
-        ctx.restore();
     };
     
     // called with scope of series
         }
         
         var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow;
-        var showLine = (opts.showLine != undefined) ? opts.showLine : this.showLine;
         var fill = (opts.fill != undefined) ? opts.fill : this.fill;
         var cw = ctx.canvas.width;
         var ch = ctx.canvas.height;
         var h = ch - offy - 2 * this.padding;
         var mindim = Math.min(w,h);
         var d = mindim;
-        this._center = [(cw - trans * offx)/2 + trans * offx, (ch - trans*offy)/2 + trans * offy];
         
         // Fixes issue #272.  Thanks hugwijst!
         // reset slice angles array.
             sm += this.lineWidth;
         }
         
-        var rprime = 0;
+        var rprime;
         var maxrprime = 0;
 
         var ang, ang1, ang2, shadowColor;
 
             this._sliceAngles.push([ang1, ang2]);
 
-            var ang = ang2 - ang1;
-            var absang = Math.abs(ang);
+            rprime = calcRPrime(ang1, ang2, this.sliceMargin, this.fill, this.lineWidth);
 
-            if (this.sliceMargin > 0 && absang > 0.01 && absang < 6.282) {
-                rprime = parseFloat(sm) / 2.0 / calcRadiusAdjustment(ang);
-            }
-
-
-            if (absang > Math.PI) {
+            if (Math.abs(ang2-ang1) > Math.PI) {
                 maxrprime = Math.max(rprime, maxrprime);  
             }
         }
 
         var r = this._radius = this._diameter/2;
 
+        this._center = [(cw - trans * offx)/2 + trans * offx + maxrprime * Math.cos(sa), (ch - trans*offy)/2 + trans * offy + maxrprime * Math.sin(sa)];
+
         if (this.shadow) {
             for (var i=0, l=gd.length; i<l; i++) {
                 shadowColor = 'rgba(0,0,0,'+this.shadowAlpha+')';
                 y = Math.round(y);
                 labelelem.css({left: x, top: y});
             }
-        }
-               
+        }            
     };
     
     $.jqplot.PieAxisRenderer = function() {