rgraph-rails 1.0.4 → 1.0.5

data/vendor/assets/javascripts/RGraph.fuel.js

@@ -1,4 +1,4 @@
-// version: 2016-02-06
+// version: 2016-06-04
     /**
     * o--------------------------------------------------------------------------------o
     * | This file is part of the RGraph package - you can learn more at:               |
@@ -7,7 +7,7 @@
     * |                                                                                |
     * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
     * | v2.0 license and a commercial license which means that you're not bound by     |
-    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | the terms of the GPL. The commercial license is just 99 GBP and you can     |
     * | read about it here:                                                            |
     * |                      http://www.rgraph.net/license                             |
     * o--------------------------------------------------------------------------------o
@@ -91,7 +91,10 @@
             'chart.gutter.bottom':            5,
             'chart.text.size':                12,
             'chart.text.color':               'black', // Does not support gradients
-            'chart.text.font':                'Arial',
+            'chart.text.font':                'Segoe UI, Arial, Verdana, sans-serif',
+            'chart.text.accessible':               true,
+            'chart.text.accessible.overflow':      'visible',
+            'chart.text.accessible.pointerevents': false,
             'chart.contextmenu':              null,
             'chart.annotatable':              false,
             'chart.annotate.color':           'black',
@@ -125,7 +128,8 @@
             'chart.scale.visible':            false,
             'chart.scale.decimals':           0,
             'chart.units.pre':                '',
-            'chart.units.post':               ''
+            'chart.units.post':               '',
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
         
         /**
@@ -155,7 +159,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -206,10 +209,9 @@
 
 
             // Convert uppercase letters to dot+lower case letter
-            name = name.replace(/([A-Z])/g, function (str)
-            {
-                return '.' + String(RegExp.$1).toLowerCase();
-            });
+            while(name.match(/([A-Z])/)) {
+                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
+            }
 
 
 

data/vendor/assets/javascripts/RGraph.funnel.js

@@ -1,4 +1,4 @@
-// version: 2016-02-06
+// version: 2016-06-04
     /**
     * o--------------------------------------------------------------------------------o
     * | This file is part of the RGraph package - you can learn more at:               |
@@ -7,7 +7,7 @@
     * |                                                                                |
     * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
     * | v2.0 license and a commercial license which means that you're not bound by     |
-    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | the terms of the GPL. The commercial license is just 99 GBP and you can     |
     * | read about it here:                                                            |
     * |                      http://www.rgraph.net/license                             |
     * o--------------------------------------------------------------------------------o
@@ -57,11 +57,6 @@
         this.firstDraw         = true; // After the first draw this will be false
 
 
-        /**
-        * Compatibility with older browsers
-        */
-        //RGraph.OldBrowserCompat(this.context);
-
 
         // Check for support
         if (!this.canvas) {
@@ -109,7 +104,10 @@
             'chart.text.boxed':            true,
             'chart.text.halign':           'left',
             'chart.text.color':            'black',
-            'chart.text.font':             'Arial',
+            'chart.text.font':             'Segoe UI, Arial, Verdana, sans-serif',
+            'chart.text.accessible':               true,
+            'chart.text.accessible.overflow':      'visible',
+            'chart.text.accessible.pointerevents': false,
             'chart.contextmenu':           null,
             'chart.shadow':                false,
             'chart.shadow.color':          '#666',
@@ -161,10 +159,14 @@
             'chart.zoom.action':            'zoom',
             'chart.resizable':              false,
             'chart.events.click':           null,
-            'chart.events.mousemove':       null
+            'chart.events.mousemove':       null,
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
         // Store the data
+        for (var i=0; i<data.length; ++i) {
+            data[i] = parseFloat(data[i]);
+        }
         this.data = data;
 
 
@@ -194,7 +196,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -247,10 +248,9 @@
 
 
             // Convert uppercase letters to dot+lower case letter
-            name = name.replace(/([A-Z])/g, function (str)
-            {
-                return '.' + String(RegExp.$1).toLowerCase();
-            });
+            while(name.match(/([A-Z])/)) {
+                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
+            }
 
 
 
@@ -680,21 +680,26 @@
         this.Highlight = function (shape)
         {
             if (prop['chart.tooltips.highlight']) {
-                // Add the new highlight
+            
+                if (typeof prop['chart.highlight.style'] === 'function') {
+                    (prop['chart.highlight.style'])(shape);
+                    return;
+                }
+
+
+
                 var coords = shape['coords'];
                 
-                co.beginPath();
-                    co.strokeStyle = prop['chart.highlight.stroke'];
-                    co.fillStyle   = prop['chart.highlight.fill'];
-        
-                    co.moveTo(coords[0], coords[1]);
-                    co.lineTo(coords[2], coords[3]);
-                    co.lineTo(coords[4], coords[5]);
-                    co.lineTo(coords[6], coords[7]);
-                co.closePath();
-                
-                co.stroke();
-                co.fill();
+                pa2(
+                    co,
+                    'b m % % l % % l % % l % % c s % f %',
+                    coords[0], coords[1],
+                    coords[2], coords[3],
+                    coords[4], coords[5],
+                    coords[6], coords[7],
+                    prop['chart.highlight.stroke'],
+                    prop['chart.highlight.fill']
+                );
             }
         };
 
@@ -750,6 +755,7 @@
             var coordW     = x2 - x1;
             var coordX     = x1 + (coordW / 2);
             var canvasXY   = RG.getCanvasXY(ca);
+            var mouseXY    = RG.getMouseXY(window.event);
             var gutterLeft = prop['chart.gutter.left'];
             var gutterTop  = prop['chart.gutter.top'];
             var width      = tooltip.offsetWidth;
@@ -757,35 +763,26 @@
     
             // Set the top position
             tooltip.style.left = 0;
-            tooltip.style.top  = canvasXY[1] + y1 + ((y3 - y2) / 2) - height - 7 + 'px';
+            tooltip.style.top  = window.event.pageY - height - 5 + 'px';
             
             // By default any overflow is hidden
             tooltip.style.overflow = '';
     
-            // The arrow
-            var img = new Image();
-                img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';
-                img.style.position = 'absolute';
-                img.id = '__rgraph_tooltip_pointer__';
-                img.style.top = (tooltip.offsetHeight - 2) + 'px';
-            tooltip.appendChild(img);
+
             
             // Reposition the tooltip if at the edges:
     
             // LEFT edge
-            if ((canvasXY[0] + coordX - (width / 2)) < 5) {
-                tooltip.style.left = (canvasXY[0] + coordX - (width * 0.1)) + 'px';
-                img.style.left = ((width * 0.1) - 8.5) + 'px';
+            if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.1) + 'px';
     
             // RIGHT edge
-            } else if ((canvasXY[0] + coordX + (width / 2)) > document.body.offsetWidth) {
-                tooltip.style.left = canvasXY[0] + coordX - (width * 0.9) + 'px';
-                img.style.left = ((width * 0.9) - 8.5) + 'px';
+            } else if (canvasXY[0] + mouseXY[0]  + (width / 2) > doc.body.offsetWidth) {
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.9) + 'px';
     
             // Default positioning - CENTERED
             } else {
-                tooltip.style.left = (canvasXY[0] + coordX - (width / 2)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
             }
         };
 

data/vendor/assets/javascripts/RGraph.gantt.js

@@ -1,4 +1,4 @@
-// version: 2016-02-06
+// version: 2016-06-04
     /**
     * o--------------------------------------------------------------------------------o
     * | This file is part of the RGraph package - you can learn more at:               |
@@ -7,7 +7,7 @@
     * |                                                                                |
     * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
     * | v2.0 license and a commercial license which means that you're not bound by     |
-    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | the terms of the GPL. The commercial license is just 99 GBP and you can     |
     * | read about it here:                                                            |
     * |                      http://www.rgraph.net/license                             |
     * o--------------------------------------------------------------------------------o
@@ -59,10 +59,6 @@
         this.firstDraw         = true; // After the first draw this will be false
 
 
-        /**
-        * Compatibility with older browsers
-        */
-        //RGraph.OldBrowserCompat(this.context);
 
         
         // Set some defaults
@@ -85,8 +81,11 @@
             'chart.vbars':                  [],
             'chart.hbars':                  [],
             'chart.text.size':              12,
-            'chart.text.font':              'Arial',
+            'chart.text.font':              'Segoe UI, Arial, Verdana, sans-serif',
             'chart.text.color':             'black',
+            'chart.text.accessible':               true,
+            'chart.text.accessible.overflow':      'visible',
+            'chart.text.accessible.pointerevents': false,
             'chart.gutter.left':            75,
             'chart.gutter.right':           25,
             'chart.gutter.top':             35,
@@ -99,7 +98,7 @@
             'chart.labels.inbar.bgcolor':   null,
             'chart.labels.inbar.align':     'left',
             'chart.labels.inbar.size':      10,
-            'chart.labels.inbar.font':      'Arial',
+            'chart.labels.inbar.font':      'Segoe UI, Arial, Verdana, sans-serif',
             'chart.labels.inbar.above':     false,
             'chart.labels.percent':         true,
             'chart.vmargin':                 2,
@@ -153,7 +152,8 @@
             'chart.resize.handle.background': null,
             'chart.adjustable':             false,
             'chart.events.click':           null,
-            'chart.events.mousemove':       null
+            'chart.events.mousemove':       null,
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
 
@@ -162,11 +162,19 @@
         */
         if (!data) {
             alert('[GANTT] The Gantt chart event data is now supplied as the second argument to the constructor - please update your code');
+        } else {
+            // Go through the data converting relevant args to numbers
+            for (var i=0,idx=0; i<data.length; ++i) {
+                if (typeof data[i][0] === 'string') data[i][0] = parseFloat(data[i][0]);
+                if (typeof data[i][1] === 'string') data[i][1] = parseFloat(data[i][1]);
+                if (typeof data[i][2] === 'string') data[i][2] = parseFloat(data[i][2]);
+                if (typeof data[i][7] === 'string') data[i][7] = parseFloat(data[i][7]);
+            }
         }
         
-        // Linearize the data (DON'T use RGraph.array_linearize() here)
+        // Linearize the data (DON'T use RGraph.arrayLinearize() here)
         for (var i=0,idx=0; i<data.length; ++i) {
-            if (RGraph.is_array(this.data[i][0])) {
+            if (RGraph.isArray(this.data[i][0])) {
                 for (var j=0; j<this.data[i].length; ++j) {
                     this['$' + (idx++)] = {};
                 }
@@ -195,7 +203,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -248,10 +255,9 @@
 
 
             // Convert uppercase letters to dot+lower case letter
-            name = name.replace(/([A-Z])/g, function (str)
-            {
-                return '.' + String(RegExp.$1).toLowerCase();
-            });
+            while(name.match(/([A-Z])/)) {
+                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
+            }
     
             if (name == 'chart.margin') {
                 name = 'chart.vmargin'
@@ -765,8 +771,11 @@
         this.highlight =
         this.Highlight = function (shape)
         {
-            // Add the new highlight
-            RG.Highlight.Rect(this, shape);
+            if (typeof prop['chart.highlight.style'] === 'function') {
+                (prop['chart.highlight.style'])(shape);
+            } else {
+                RG.Highlight.Rect(this, shape);
+            }
         };
 
 
@@ -887,38 +896,29 @@
             var gutterTop  = obj.gutterTop;
             var width      = tooltip.offsetWidth;
             var height     = tooltip.offsetHeight;
+            var mouseXY    = RG.getMouseXY(window.event);
     
             // Set the top position
             tooltip.style.left = 0;
-            tooltip.style.top  = canvasXY[1] + coordY - height - 7 + 'px';
+            tooltip.style.top  = window.event.pageY - height - 5 + 'px';
             
             // By default any overflow is hidden
             tooltip.style.overflow = '';
     
-            // The arrow
-            var img = new Image();
-                img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';
-                img.style.position = 'absolute';
-                img.id = '__rgraph_tooltip_pointer__';
-                img.style.top = (tooltip.offsetHeight - 2) + 'px';
-            tooltip.appendChild(img);
             
             // Reposition the tooltip if at the edges:
             
             // LEFT edge
-            if ((canvasXY[0] + coordX - (width / 2)) < 10) {
-                tooltip.style.left = (canvasXY[0] + coordX - (width * 0.1)) + (coordW / 2) + 'px';
-                img.style.left = ((width * 0.1) - 8.5) + 'px';
+            if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.1) + 'px';
     
             // RIGHT edge
-            } else if ((canvasXY[0] + coordX + (width / 2)) > document.body.offsetWidth) {
-                tooltip.style.left = canvasXY[0] + coordX - (width * 0.9) + (coordW / 2) + 'px';
-                img.style.left = ((width * 0.9) - 8.5) + 'px';
+            } else if (canvasXY[0] + mouseXY[0]  + (width / 2) > doc.body.offsetWidth) {
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.9) + 'px';
     
             // Default positioning - CENTERED
             } else {
-                tooltip.style.left = (canvasXY[0] + coordX + (coordW / 2) - (width * 0.5)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
             }
         };
 

data/vendor/assets/javascripts/RGraph.gauge.js

@@ -1,4 +1,4 @@
-// version: 2016-02-06
+// version: 2016-06-04
     /**
     * o--------------------------------------------------------------------------------o
     * | This file is part of the RGraph package - you can learn more at:               |
@@ -7,7 +7,7 @@
     * |                                                                                |
     * | RGraph is dual licensed under the Open Source GPL (General Public License)     |
     * | v2.0 license and a commercial license which means that you're not bound by     |
-    * | the terms of the GPL. The commercial license is just �99 (GBP) and you can     |
+    * | the terms of the GPL. The commercial license is just 99 GBP and you can     |
     * | read about it here:                                                            |
     * |                      http://www.rgraph.net/license                             |
     * o--------------------------------------------------------------------------------o
@@ -99,20 +99,23 @@
             'chart.gutter.bottom': 15,
             'chart.border.width':  10,
             'chart.title.top':     '',
-            'chart.title.top.font':'Arial',
+            'chart.title.top.font':'Segoe UI, Arial, Verdana, sans-serif',
             'chart.title.top.size':14,
             'chart.title.top.color':'#333',
             'chart.title.top.bold':false,
             'chart.title.top.pos': null,
             'chart.title.bottom':  '',
-            'chart.title.bottom.font':'Arial',
+            'chart.title.bottom.font':'Segoe UI, Arial, Verdana, sans-serif',
             'chart.title.bottom.size':14,
             'chart.title.bottom.color':'#333',
             'chart.title.bottom.bold':false,
             'chart.title.bottom.pos':null,
-            'chart.text.font':    'Arial',
+            'chart.text.font':    'Segoe UI, Arial, Verdana, sans-serif',
             'chart.text.color':     '#666',
             'chart.text.size':      12,
+            'chart.text.accessible':               true,
+            'chart.text.accessible.overflow':      'visible',
+            'chart.text.accessible.pointerevents': false,
             'chart.background.color': 'white',
             'chart.background.gradient': false,
             'chart.scale.decimals': 0,
@@ -132,14 +135,18 @@
 
             'chart.red.start':      0.9 * this.max,
             'chart.red.color':      '#DC3912',
+            'chart.red.width':      10,
             'chart.yellow.color':   '#FF9900',
+            'chart.yellow.width':   10,
             'chart.green.end':      0.7 * this.max,
             'chart.green.color':    'rgba(0,0,0,0)',
+            'chart.green.width':    10,
             'chart.colors.ranges':  null,
             'chart.needle.size':    null,
             'chart.needle.tail':    false,
             'chart.needle.colors':   ['#D5604D', 'red', 'green', 'yellow'],
             'chart.needle.type':     'triangle',
+            'chart.needle.width':     7,
             'chart.border.outer':     '#ccc',
             'chart.border.inner':     '#f1f1f1',
             'chart.border.outline':   'black',
@@ -162,7 +169,8 @@
             'chart.shadow.color':     'gray',
             'chart.shadow.offsetx':   0,
             'chart.shadow.offsety':   0,
-            'chart.shadow.blur':      15
+            'chart.shadow.blur':      15,
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
 
@@ -187,7 +195,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -240,10 +247,9 @@
 
 
             // Convert uppercase letters to dot+lower case letter
-            name = name.replace(/([A-Z])/g, function (str)
-            {
-                return '.' + String(RegExp.$1).toLowerCase();
-            });
+            while(name.match(/([A-Z])/)) {
+                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
+            }
 
 
 
@@ -664,47 +670,50 @@
             var font = prop['chart.text.font'];
             var size = prop['chart.text.size'];
             var num  = prop['chart.labels.specific'] ? (prop['chart.labels.specific'].length - 1) : prop['chart.labels.count'];
-    
+
             co.beginPath();
-                for (var i=0; i<=num; ++i) {
-                    var hyp = (this.radius - 25 - prop['chart.border.width']) - prop['chart.labels.offset'];
-                    var a   = (this.endAngle - this.startAngle) / num
-                        a   = this.startAngle + (i * a);
-                        a  -= RG.HALFPI;
-    
-                    var x = this.centerx - (Math.sin(a) * hyp);
-                    var y = this.centery + (Math.cos(a) * hyp);
-    
-                    var hAlign = x > this.centerx ? 'right' : 'left';
-                    var vAlign = y > this.centery ? 'bottom' : 'top';
-                    
-                    // This handles the label alignment when the label is on a PI/HALFPI boundary
-                    if (a == RG.HALFPI) {
-                        vAlign = 'center';
-                    } else if (a == RG.PI) {
-                        hAlign = 'center';
-                    } else if (a == (RG.HALFPI + RG.PI) ) {
-                        vAlign = 'center';
-                    }
-                    
-                    /**
-                    * Can now force center alignment
-                    */
-                    if (prop['chart.labels.centered']) {
-                        hAlign = 'center';
-                        vAlign = 'center';
+                if (num) {
+                    for (var i=0; i<=num; ++i) {
+                        var hyp = (this.radius - 25 - prop['chart.border.width']) - prop['chart.labels.offset'];
+                        var a   = (this.endAngle - this.startAngle) / num
+                            a   = this.startAngle + (i * a);
+                            a  -= RG.HALFPI;
+        
+                        var x = this.centerx - (ma.sin(a) * hyp);
+                        var y = this.centery + (ma.cos(a) * hyp);
+        
+                        var hAlign = x > this.centerx ? 'right' : 'left';
+                        var vAlign = y > this.centery ? 'bottom' : 'top';
+                        
+                        // This handles the label alignment when the label is on a PI/HALFPI boundary
+                        if (a == RG.HALFPI) {
+                            vAlign = 'center';
+                        } else if (a == RG.PI) {
+                            hAlign = 'center';
+                        } else if (a == (RG.HALFPI + RG.PI) ) {
+                            vAlign = 'center';
+                        }
+                        
+                        /**
+                        * Can now force center alignment
+                        */
+                        if (prop['chart.labels.centered']) {
+                            hAlign = 'center';
+                            vAlign = 'center';
+                        }
+        
+        
+                        RG.Text2(this, {
+                            'font':font,
+                            'size':size,
+                            'x':x,
+                            'y':y,
+                            'text':prop['chart.labels.specific'] ? prop['chart.labels.specific'][i] : RG.number_format(this, (((this.max - this.min) * (i / num)) + this.min).toFixed(prop['chart.scale.decimals']), prop['chart.units.pre'], prop['chart.units.post']),
+                            'halign':hAlign,
+                            'valign':vAlign,
+                            'tag': prop['chart.labels.specific'] ? 'labels.specific' : 'labels'
+                        });
                     }
-    
-    
-                    RG.Text2(this, {'font':font,
-                                    'size':size,
-                                    'x':x,
-                                    'y':y,
-                                    'text':prop['chart.labels.specific'] ? prop['chart.labels.specific'][i] : RG.number_format(this, (((this.max - this.min) * (i / num)) + this.min).toFixed(prop['chart.scale.decimals']), prop['chart.units.pre'], prop['chart.units.post']),
-                                    'halign':hAlign,
-                                    'valign':vAlign,
-                                    'tag': prop['chart.labels.specific'] ? 'labels.specific' : 'labels'
-                                   });
                 }
             co.fill();
     
@@ -731,7 +740,7 @@
                     'size':size + 2,
                     'x':x,
                     'y':y,
-                    'text':RG.number_format(this, this.value.toFixed(prop['chart.scale.decimals']), units_pre, units_post),
+                    'text':RG.numberFormat(this, this.value.toFixed(prop['chart.value.text.decimals']), units_pre, units_post),
                     'halign':'center',
                     'valign':'center',
                     'bounding':bounding,
@@ -848,7 +857,7 @@
     
                 co.beginPath();
                 
-                    co.lineWidth = 7;
+                    co.lineWidth = prop['chart.needle.width'];
                     co.strokeStyle = color;
                     
                     co.arc(this.centerx,
@@ -944,7 +953,7 @@
     
             co.beginPath();
                 co.arc(this.centerx, this.centery, this.radius - 10 - prop['chart.border.width'], greenStart, greenEnd, false);
-                co.arc(this.centerx, this.centery, this.radius - 20 - prop['chart.border.width'], greenEnd, greenStart, true);
+                co.arc(this.centerx, this.centery, this.radius - (10 + prop['chart.green.width']) - prop['chart.border.width'], greenEnd, greenStart, true);
             co.fill();
     
     
@@ -962,7 +971,7 @@
     
             co.beginPath();
                 co.arc(this.centerx, this.centery, this.radius - 10 - prop['chart.border.width'], yellowStart, yellowEnd, false);
-                co.arc(this.centerx, this.centery, this.radius - 20 - prop['chart.border.width'], yellowEnd, yellowStart, true);
+                co.arc(this.centerx, this.centery, this.radius - (10 + prop['chart.yellow.width']) - prop['chart.border.width'], yellowEnd, yellowStart, true);
             co.fill();
     
     
@@ -980,7 +989,7 @@
     
             co.beginPath();
                 co.arc(this.centerx, this.centery, this.radius - 10 - prop['chart.border.width'], redStart, redEnd, false);
-                co.arc(this.centerx, this.centery, this.radius - 20 - prop['chart.border.width'], redEnd, redStart, true);
+                co.arc(this.centerx, this.centery, this.radius - (10 + prop['chart.red.width']) - prop['chart.border.width'], redEnd, redStart, true);
             co.fill();
         };