rgraph-rails 1.0.4 → 1.0.5

data/vendor/assets/javascripts/RGraph.common.zoom.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 starts at just �99 (GBP) and      |
+    * | the terms of the GPL. The commercial license starts at just 99 GBP and      |
     * | you can read about it here:                                                    |
     * |                                                                                |
     * |                      http://www.rgraph.net/license                             |

data/vendor/assets/javascripts/RGraph.drawing.background.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 starts at just �99 (GBP) and      |
+    * | the terms of the GPL. The commercial license starts at just 99 GBP and      |
     * | you can read about it here:                                                    |
     * |                                                                                |
     * |                      http://www.rgraph.net/license                             |
@@ -120,8 +120,10 @@
 
             'chart.text.color':         'black', // Gradients aren't supported for this color
             'chart.text.size':          12,
-            '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.events.click':       null,
             'chart.events.mousemove':   null,
 
@@ -163,6 +165,7 @@
             'chart.title.yaxis.x':          null,
             'chart.title.yaxis.y':          null,
             'chart.title.yaxis.pos':        null,
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
         /**
@@ -252,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());
+            }
 
 
             prop[name] = value;
@@ -437,52 +439,29 @@
             var height     = tooltip.offsetHeight;
             var tooltipX   = RG.getCanvasXY(obj.canvas)[0] + ((obj.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
             var tooltipY   = RG.getCanvasXY(obj.canvas)[1] + ((obj.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
+            var mouseXY    = RG.getMouseXY(window.event);
     
             // Set the top position
             tooltip.style.left = 0;
-            tooltip.style.top  = tooltipY - 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 ( (tooltipX - (width / 2)) < 10) {
-                tooltip.style.left = (tooltipX - (width * 0.1)) + 'px';
-                img.style.left = ((width * 0.1) - 8.5) + 'px';
-            
-            // RIGHT EDGE
-            } else if ( (tooltipX + (width / 2)) > doc.body.offsetWidth) {
-                tooltip.style.left = (tooltipX - (width * 0.9)) + 'px';
-                img.style.left = ((width * 0.9) - 8.5) + 'px';
-
-            
-            // CENTERED
-            } else {
-                tooltip.style.left = (tooltipX - (width * 0.5)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
-            }
-                //tooltip.style.left = (canvasXY[0] + this.centerx - (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] + obj.canvas.width + (width / 2)) > doc.body.offsetWidth) {
-            //    tooltip.style.left = canvasXY[0] + this.centerx - (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] + obj.gutterLeft ((obj.canvas.width - obj.gutterLeft - obj.gutterRight) / 2) - (width * 0.5)) + 'px';
-            //    img.style.left = ((width * 0.5) - 8.5) + 'px';
+            } else {
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
+            }
         };
 
 
@@ -497,12 +476,17 @@
         this.Highlight = function (shape)
         {
             if (prop['chart.tooltips.highlight']) {
-                pa(co, ['b',
-                        'r', prop['chart.gutter.left'],
-                             prop['chart.gutter.top'],
-                             ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'],
-                             ca.height - prop['chart.gutter.top'] - prop['chart.gutter.bottom'],
-                        'f',prop['chart.highlight.fill'],'s',prop['chart.highlight.stroke']]);
+                if (typeof prop['chart.highlight.style'] === 'function') {
+                    (prop['chart.highlight.style'])(shape);
+                } else {
+                    pa2(co, [
+                        'b',
+                        'r', prop['chart.gutter.left'], prop['chart.gutter.top'], ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'],ca.height - prop['chart.gutter.top'] - prop['chart.gutter.bottom'],
+                        'f',prop['chart.highlight.fill'],
+                        's',prop['chart.highlight.stroke']
+                    ]);
+                            
+                }
             }
         };
 

data/vendor/assets/javascripts/RGraph.drawing.circle.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 starts at just �99 (GBP) and      |
+    * | the terms of the GPL. The commercial license starts at just 99 GBP and      |
     * | you can read about it here:                                                    |
     * |                                                                                |
     * |                      http://www.rgraph.net/license                             |
@@ -123,7 +123,8 @@
             'chart.tooltips':           null,
             'chart.tooltips.highlight': true,
             'chart.tooltips.event':     'onclick',
-            'chart.linewidth':          2
+            'chart.linewidth':          2,
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
         /**
@@ -165,7 +166,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -218,10 +218,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());
+            }
 
 
 
@@ -286,13 +285,13 @@
                 this.colorsParsed = true;
             }
 
-            pa(co, ['b', 'lw',prop['chart.linewidth']]);
+            pa2(co, ['b', 'lw',prop['chart.linewidth']]);
     
             if (prop['chart.shadow']) {
                 RG.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
             }
 
-            pa(co, ['a',this.coords[0][0], this.coords[0][1], this.radius, 0, RGraph.TWOPI, false,'f',prop['chart.fillstyle'],'s', prop['chart.strokestyle']]);
+            pa2(co, ['a',this.coords[0][0], this.coords[0][1], this.radius, 0, RGraph.TWOPI, false,'f',prop['chart.fillstyle'],'s', prop['chart.strokestyle']]);
             
             // Must turn the shadow off before the fill is done
             RG.NoShadow(this);
@@ -388,7 +387,7 @@
         * @param obj object    The chart object
         * @param int x         The X coordinate specified for the tooltip
         * @param int y         The Y coordinate specified for the tooltip
-        * @param objec tooltip The tooltips DIV element
+        * @param object tooltip The tooltips DIV element
         */
         this.positionTooltip = function (obj, x, y, tooltip, idx)
         {
@@ -396,38 +395,32 @@
             var width      = tooltip.offsetWidth;
             var height     = tooltip.offsetHeight;
             var radius     = this.radius;
+            var mouseXY    = RG.getMouseXY(window.event);
     
             // Set the top position
             tooltip.style.left = 0;
-            tooltip.style.top  = canvasXY[1] + obj.centery - height - 7 + 'px';
-            
+            tooltip.style.top  = canvasXY[1] + this.coords[0][1] - (height / 2) - this.radius + 'px';
+    
+            // Set the top position
+            tooltip.style.left = 0;
+            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] + obj.centerx - (width / 2)) < 10) {
-                tooltip.style.left = (canvasXY[0] + this.centerx - (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] + obj.centerx + (width / 2)) > doc.body.offsetWidth) {
-                tooltip.style.left = canvasXY[0] + this.centerx - (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] + this.centerx - (width * 0.5)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
             }
         };
 
@@ -443,7 +436,11 @@
         this.Highlight = function (shape)
         {
             if (prop['chart.tooltips.highlight']) {
-                pa(co, ['b','a',this.centerx, this.centery, this.radius + 0.5, 0, RGraph.TWOPI, false,'f',prop['chart.highlight.fill'],'s',prop['chart.highlight.stroke']]);
+                if (typeof prop['chart.highlight.style'] === 'function') {
+                    (prop['chart.highlight.style'])(shape);
+                } else {
+                    pa2(co, ['b','a',this.centerx, this.centery, this.radius + 0.5, 0, RGraph.TWOPI, false,'f',prop['chart.highlight.fill'],'s',prop['chart.highlight.stroke']]);
+                }
             }
         };
 

data/vendor/assets/javascripts/RGraph.drawing.image.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 starts at just �99 (GBP) and      |
+    * | the terms of the GPL. The commercial license starts at just 99 GBP and      |
     * | you can read about it here:                                                    |
     * |                                                                                |
     * |                      http://www.rgraph.net/license                             |
@@ -138,7 +138,8 @@
             'chart.border.color':         'black',
             'chart.border.linewidth':     1,
             'chart.border.radius':        0,
-            'chart.background.color':     'rgba(0,0,0,0)'
+            'chart.background.color':     'rgba(0,0,0,0)',
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
         /**
@@ -179,7 +180,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -232,10 +232,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());
+            }
 
 
 
@@ -588,38 +587,32 @@
             var canvasXY   = RG.getCanvasXY(obj.canvas);
             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] + this.coords[0][1] - (height / 2) - this.radius + 'px';
     
             // Set the top position
             tooltip.style.left = 0;
-            tooltip.style.top  = canvasXY[1] - height - 7 + this.coords[0][1] + (obj.coords[0][3] / 2) + '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] + obj.coords[0][0] + (obj.coords[0][2] / 2) - (width / 2)) < 10) {
-                tooltip.style.left = (canvasXY[0] + this.coords[0][0] + (this.coords[0][2] / 2) - (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] + this.coords[0][0] + (this.coords[0][2] / 2) + (width / 2)) > doc.body.offsetWidth) {
-                tooltip.style.left = (canvasXY[0] + this.coords[0][0] + (this.coords[0][2] / 2) - (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] + this.coords[0][0] + (this.coords[0][2] / 2) - (width * 0.5)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
             }
         };
 
@@ -635,7 +628,11 @@
         this.Highlight = function (shape)
         {
             if (prop['chart.tooltips.highlight']) {
-                pa(co, ['b','r',this.coords[0][0],this.coords[0][1],this.coords[0][2],this.coords[0][3], 'f',prop['chart.highlight.fill'], 's', prop['chart.highlight.stroke']]);
+                if (typeof prop['chart.highlight.style'] === 'function') {
+                    (prop['chart.highlight.style'])(shape);
+                } else {
+                    pa2(co, ['b','r',this.coords[0][0],this.coords[0][1],this.coords[0][2],this.coords[0][3], 'f',prop['chart.highlight.fill'], 's', prop['chart.highlight.stroke']]);
+                }
             }
         };
 

data/vendor/assets/javascripts/RGraph.drawing.marker1.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 starts at just �99 (GBP) and      |
+    * | the terms of the GPL. The commercial license starts at just 99 GBP and      |
     * | you can read about it here:                                                    |
     * |                                                                                |
     * |                      http://www.rgraph.net/license                             |
@@ -119,7 +119,10 @@
             'chart.linewidth':          2,
             'chart.text.color':         'black',
             'chart.text.size':          12,
-            '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.events.click':       null,
             'chart.events.mousemove':   null,
             'chart.shadow':             true,
@@ -132,7 +135,8 @@
             'chart.tooltips':           null,
             'chart.tooltips.highlight': true,
             'chart.tooltips.event':     'onclick',
-            'chart.align':              'center'
+            'chart.align':              'center',
+            'chart.clearto':   'rgba(0,0,0,0)'
         }
 
         /**
@@ -177,7 +181,6 @@
             ca   = this.canvas,
             co   = ca.getContext('2d'),
             prop = this.properties,
-            pa   = RG.Path,
             pa2  = RG.path2,
             win  = window,
             doc  = document,
@@ -230,10 +233,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());
+            }
 
 
 
@@ -328,14 +330,14 @@
             /**
             * DRAW THE MARKER HERE
             */
-            pa(co, ['b','lw',prop['chart.linewidth']]);
+            pa2(co, ['b','lw',prop['chart.linewidth']]);
 
             if (prop['chart.shadow']) {
                 RG.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
             }
             this.DrawMarker();
             
-            pa(co, ['c','s',prop['chart.strokestyle'],'f',prop['chart.fillstyle']]);
+            pa2(co, ['c','s',prop['chart.strokestyle'],'f',prop['chart.fillstyle']]);
 
 
 
@@ -463,6 +465,7 @@
         this.positionTooltip = function (obj, x, y, tooltip, idx)
         {
             var canvasXY   = RG.getCanvasXY(obj.canvas);
+            var mouseXY    = RG.getMouseXY(window.event);
             var width      = tooltip.offsetWidth;
             var height     = tooltip.offsetHeight;
     
@@ -470,33 +473,26 @@
             tooltip.style.left = 0;
             tooltip.style.top  = canvasXY[1] + this.coords[0][1] - (height / 2) - this.radius + 'px';
     
+            // Set the top position
+            tooltip.style.left = 0;
+            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] + obj.coords[0][0] + (obj.coords[0][2] / 2) - (width / 2)) < 10) {
-                tooltip.style.left = canvasXY[0] + this.markerCenterx - (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] + this.coords[0][0] + (this.coords[0][2] / 2) + (width / 2)) > doc.body.offsetWidth) {
-                tooltip.style.left = canvasXY[0] + this.markerCenterx - (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] + this.markerCenterx - (width * 0.5)) + 'px';
-                img.style.left = ((width * 0.5) - 8.5) + 'px';
+                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
             }
         };
 
@@ -512,7 +508,18 @@
         this.Highlight = function (shape)
         {
             if (prop['chart.tooltips.highlight']) {
-                pa(this, ['b','fu',function (obj){obj.DrawMarker();},'c','s',prop['chart.highlight.stroke'],'f',prop['chart.highlight.fill']]);
+                if (typeof prop['chart.highlight.style'] === 'function') {
+                    (prop['chart.highlight.style'])(shape);
+                } else {
+                    
+                    co.beginPath(); 
+                    co.strokeStyle = prop['chart.highlight.stroke'];
+                    co.fillStyle   = prop['chart.highlight.fill'];
+                    this.drawMarker();
+                    co.closePath();
+                    co.stroke();
+                    co.fill();
+                }
             }
         };
 
@@ -533,32 +540,32 @@
                 var x = this.markerCenterx;
                 var y = this.markerCentery;
         
-                pa(co, ['a',x,y,r,RG.HALFPI,RG.TWOPI,false]);
+                pa2(co, ['a',x,y,r,RG.HALFPI,RG.TWOPI,false]);
                 
                // special case for MSIE 7/8
                 if (RG.ISOLD) {
-                    pa(co,['m',x + r + r,y+r+r,'qc',x + r,y + r,x + r + 1,y,'m',x + r + r,y+r+r]);
+                    pa2(co,['m',x + r + r,y+r+r,'qc',x + r,y + r,x + r + 1,y,'m',x + r + r,y+r+r]);
                 } else {
-                    pa(co, ['qc',x + r,y + r,x + r + r,y + r + r]);
+                    pa2(co, ['qc',x + r,y + r,x + r + r,y + r + r]);
                 }
                 
-                pa(co, ['qc',x + r,y + r,x,y + r + (RG.ISOLD ? 1 : 0)]);
+                pa2(co, ['qc',x + r,y + r,x,y + r + (RG.ISOLD ? 1 : 0)]);
 
             } else if (prop['chart.align'] == 'right') {
     
                 var x = this.markerCenterx;
                 var y = this.markerCentery;
 
-                pa(co, ['a',x,y,r,RG.HALFPI,RG.PI,true]);
+                pa2(co, ['a',x,y,r,RG.HALFPI,RG.PI,true]);
     
                // special case for MSIE 7/8
                 if (RG.ISOLD) {
-                    pa(co, ['m',x - r - r,y+r+r,'qc',x - r,y + r,x - r - 1,y,'m',x - r - r,y+r+r]);
+                    pa2(co, ['m',x - r - r,y+r+r,'qc',x - r,y + r,x - r - 1,y,'m',x - r - r,y+r+r]);
                 } else {
-                    pa(co, ['qc',x - r,y + r,x - r - r,y + r + r]);
+                    pa2(co, ['qc',x - r,y + r,x - r - r,y + r + r]);
                 }
     
-                pa(co, ['qc',x - r, y + r, x, y + r + (RG.ISOLD ? 1 : 0)]);
+                pa2(co, ['qc',x - r, y + r, x, y + r + (RG.ISOLD ? 1 : 0)]);
     
             // Default is center
             } else {
@@ -566,17 +573,17 @@
                 var x = this.markerCenterx;
                 var y = this.markerCentery;
     
-                pa(co, ['a',x, y, r, RG.HALFPI / 2, RG.PI - (RG.HALFPI / 2), true]);
+                pa2(co, ['a',x, y, r, RG.HALFPI / 2, RG.PI - (RG.HALFPI / 2), true]);
                 //co.arc(x, y, r, HALFPI / 2, PI - (HALFPI / 2), true);
                 
                 // special case for MSIE 7/8
                 if (RG.ISOLD) {
-                    pa(co, ['m',x,y+r+r-2,'qc',x,y + r + (r / 4),x - (Math.cos(RG.HALFPI / 2) * r),y + (Math.sin(RG.HALFPI / 2) * r),'m',x, y+r+r-2]);
+                    pa2(co, ['m',x,y+r+r-2,'qc',x,y + r + (r / 4),x - (Math.cos(RG.HALFPI / 2) * r),y + (Math.sin(RG.HALFPI / 2) * r),'m',x, y+r+r-2]);
                 } else {
-                    pa(co, ['qc',x,y + r + (r / 4),x,y + r + r - 2]);
+                    pa2(co, ['qc',x,y + r + (r / 4),x,y + r + r - 2]);
                 }
                 
-                pa(co, ['qc',x,y + r + (r / 4),x + (Math.cos(RG.HALFPI / 2) * r),y + (Math.sin(RG.HALFPI / 2) * r)]);
+                pa2(co, ['qc',x,y + r + (r / 4),x + (Math.cos(RG.HALFPI / 2) * r),y + (Math.sin(RG.HALFPI / 2) * r)]);
             }
 
             this.coords[0] = [x, y, r];