Charting with flask, rgraph and custom "timeseries database"

1 files changed, 739 insertions, 0 deletions

diff --git a/schall/static/RGraph/libraries/RGraph.radar.js b/schall/static/RGraph/libraries/RGraph.radar.js
new file mode 100644
index 0000000..fd63e8f
--- /dev/null
+++ b/schall/static/RGraph/libraries/RGraph.radar.js
@@ -0,0 +1,739 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+    
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The traditional radar chart constructor
+    * 
+    * @param string id   The ID of the canvas
+    * @param array  data An array of data to represent
+    */
+    RGraph.Radar = function (id, data)
+    {
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.size              = null;// Set in the .Draw() method
+        this.type              = 'radar';
+        this.coords            = [];
+        this.isRGraph          = true;
+        this.data              = [];
+        this.max               = 0;
+
+        for (var i=1; i<arguments.length; ++i) {
+            this.data.push(RGraph.array_clone(arguments[i]));
+            this.max = Math.max(this.max, RGraph.array_max(arguments[i]));
+        }
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+        
+        this.properties = {
+            'chart.strokestyle':           'black',
+            'chart.gutter.left':           25,
+            'chart.gutter.right':          25,
+            'chart.gutter.top':            25,
+            'chart.gutter.bottom':         25,
+            'chart.linewidth':             1,
+            'chart.colors':                ['red', 'green', 'blue'],
+            'chart.colors.alpha':          null,
+            'chart.circle':                0,
+            'chart.circle.fill':           'red',
+            'chart.circle.stroke':         'black',
+            'chart.labels':                [],
+            'chart.labels.offsetx':        10,
+            'chart.labels.offsety':        10,
+            'chart.background.circles':    true,
+            'chart.text.size':             10,
+            'chart.text.font':             'Verdana',
+            'chart.text.color':            'black',
+            'chart.title':                 '',
+            'chart.title.background':      null,
+            'chart.title.hpos':            null,
+            'chart.title.vpos':            null,
+            'chart.title.color':           'black',
+            'chart.title.bold':             true,
+            'chart.title.font':             null,
+            'chart.linewidth':             1,
+            
+            'chart.key':                   null,
+            'chart.key.background':        'white',
+            'chart.key.shadow':            false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position':          'graph',
+            'chart.key.halign':             'right',
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.key.linewidth':          1,
+
+            'chart.contextmenu':           null,
+            'chart.annotatable':           false,
+            'chart.annotate.color':        'black',
+            'chart.zoom.factor':           1.5,
+            'chart.zoom.fade.in':          true,
+            'chart.zoom.fade.out':         true,
+            'chart.zoom.hdir':             'right',
+            'chart.zoom.vdir':             'down',
+            'chart.zoom.frames':            25,
+            'chart.zoom.delay':             16.666,
+            'chart.zoom.shadow':           true,
+            'chart.zoom.mode':             'canvas',
+            'chart.zoom.thumbnail.width':  75,
+            'chart.zoom.thumbnail.height': 75,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.tooltips.effect':        'fade',
+            'chart.tooltips.css.class':      'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.highlight.stroke':       'gray',
+            'chart.highlight.fill':         'white',
+            'chart.resizable':              false,
+            'chart.resize.handle.adjust':   [0,0],
+            'chart.resize.handle.background': null,
+            'chart.labels.axes':            'nsew',
+            'chart.ymax':                   null
+        }
+        
+        // Must have at least 3 points
+        for (var dataset=0; dataset<this.data.length; ++dataset) {
+            if (this.data[dataset].length < 3) {
+                alert('[RADAR] You must specify at least 3 data points');
+                return;
+            }
+        }
+
+
+        /**
+        * Set the .getShape commonly named method
+        */
+        this.getShape = this.getPoint;
+    }
+
+
+    /**
+    * A simple setter
+    * 
+    * @param string name  The name of the property to set
+    * @param string value The value of the property
+    */
+    RGraph.Radar.prototype.Set = function (name, value)
+    {
+        this.properties[name] = value;
+
+        /**
+        * If the name is chart.color, set chart.colors too
+        */
+        if (name == 'chart.color') {
+            this.properties['chart.colors'] = [value];
+        }
+    }
+
+
+    /**
+    * A simple hetter
+    * 
+    * @param string name  The name of the property to get
+    */
+    RGraph.Radar.prototype.Get = function (name)
+    {
+        return this.properties[name];
+    }
+
+
+    /**
+    * The draw method which does all the brunt of the work
+    */
+    RGraph.Radar.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+        /**
+        * Clear all of this canvases event handlers (the ones installed by RGraph)
+        */
+        RGraph.ClearEventListeners(this.id);
+        
+        /**
+        * This is new in May 2011 and facilitates indiviual gutter settings,
+        * eg chart.gutter.left
+        */
+        this.gutterLeft   = this.Get('chart.gutter.left');
+        this.gutterRight  = this.Get('chart.gutter.right');
+        this.gutterTop    = this.Get('chart.gutter.top');
+        this.gutterBottom = this.Get('chart.gutter.bottom');
+
+        this.centerx  = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
+        this.centery  = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
+        this.size     = Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom);
+
+        // Work out the maximum value and the sum
+        if (!this.Get('chart.ymax')) {
+
+            // this.max is calculated in the constructor
+
+            this.scale = RGraph.getScale(this.max, this);
+            this.max = this.scale[4];
+        } else {
+            var ymax = this.Get('chart.ymax');
+
+            this.scale = [
+                          ymax * 0.2,
+                          ymax * 0.4,
+                          ymax * 0.6,
+                          ymax * 0.8,
+                          ymax * 1
+                         ];
+            this.max = this.scale[4];
+        }
+
+        this.DrawBackground();
+        this.DrawAxes();
+        this.DrawCircle();
+        this.DrawAxisLabels();
+        this.DrawChart();
+        this.DrawLabels();
+        
+        // Draw the title
+        if (this.Get('chart.title')) {
+            RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.title.size') ? this.Get('chart.title.size') : null)
+        }
+
+        // Draw the key if necessary
+        // obj, key, colors
+        if (this.Get('chart.key')) {
+            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
+        }
+
+        /**
+        * Show the context menu
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+        /**
+        * If the canvas is annotatable, do install the event handlers
+        */
+        if (this.Get('chart.annotatable')) {
+            RGraph.Annotate(this);
+        }
+
+        /**
+        * This bit shows the mini zoom window if requested
+        */
+        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
+            RGraph.ShowZoomWindow(this);
+        }
+
+        
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+
+        /**
+        * This function enables adjusting
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+
+    /**
+    * Draws the background circles
+    */
+    RGraph.Radar.prototype.DrawBackground = function ()
+    {
+        var color = '#ddd';
+
+        /**
+        * Draws the background circles
+        */
+        if (this.Get('chart.background.circles')) {
+
+           this.context.strokeStyle = color;
+           this.context.beginPath();
+
+           for (var r=5; r<(this.size / 2); r+=15) {
+
+                this.context.moveTo(this.centerx, this.centery);
+                this.context.arc(this.centerx, this.centery,r, 0, 6.28, 0);
+            }
+            
+            this.context.stroke();
+        }
+        
+        
+        /**
+        * Draw diagonals
+        */
+        this.context.strokeStyle = color;
+        for (var i=0; i<360; i+=15) {
+            this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, this.size / 2, (i / 360) * (2 * Math.PI), ((i+0.01) / 360) * (2 * Math.PI), 0); // The 0.01 avoids a bug in Chrome 6
+            this.context.lineTo(this.centerx, this.centery);
+            this.context.stroke();
+        }
+    }
+
+
+    /**
+    * Draws the axes
+    */
+    RGraph.Radar.prototype.DrawAxes = function ()
+    {
+        this.context.strokeStyle = 'black';
+
+        var halfsize = this.size / 2;
+
+        this.context.beginPath();
+
+        /**
+        * The Y axis
+        */
+            this.context.moveTo(this.centerx, this.centery + halfsize);
+            this.context.lineTo(this.centerx, this.centery - halfsize);
+            
+    
+            // Draw the bits at either end of the Y axis
+            this.context.moveTo(this.centerx - 5, this.centery + halfsize);
+            this.context.lineTo(this.centerx + 5, this.centery + halfsize);
+            this.context.moveTo(this.centerx - 5, this.centery - halfsize);
+            this.context.lineTo(this.centerx + 5, this.centery - halfsize);
+            
+            // Draw X axis tick marks
+            for (var y=(this.centery - halfsize); y<(this.centery + halfsize); y+=15) {
+                this.context.moveTo(this.centerx - 3, y);
+                this.context.lineTo(this.centerx + 3, y);
+            }
+
+        /**
+        * The X axis
+        */
+            this.context.moveTo(this.centerx - halfsize, this.centery);
+            this.context.lineTo(this.centerx + halfsize, this.centery);
+    
+            // Draw the bits at the end of the X axis
+            this.context.moveTo(this.centerx - halfsize, this.centery - 5);
+            this.context.lineTo(this.centerx - halfsize, this.centery + 5);
+            this.context.moveTo(this.centerx + halfsize, this.centery - 5);
+            this.context.lineTo(this.centerx + halfsize, this.centery + 5);
+
+            // Draw X axis tick marks
+            for (var x=(this.centerx - halfsize); x<(this.centerx + halfsize); x+=15) {
+                this.context.moveTo(x, this.centery - 3);
+                this.context.lineTo(x, this.centery + 3);
+            }
+
+        /**
+        * Finally draw it to the canvas
+        */
+        this.context.stroke();
+    }
+
+
+    /**
+    * The function which actually draws the radar chart
+    */
+    RGraph.Radar.prototype.DrawChart = function ()
+    {
+        var alpha = this.Get('chart.colors.alpha');
+
+        if (typeof(alpha) == 'number') {
+            var oldAlpha = this.context.globalAlpha;
+            this.context.globalAlpha = alpha;
+        }
+
+        for (var dataset=0; dataset<this.data.length; ++dataset) {
+
+            this.context.beginPath();
+            
+                this.coords[dataset] = [];
+    
+                for (var i=0; i<this.data[dataset].length; ++i) {
+                    this.coords[dataset][i] = this.GetCoordinates(dataset, i);
+                }
+    
+                /**
+                * Now go through the coords and draw the chart itself
+                */
+                this.context.strokeStyle = this.Get('chart.strokestyle');
+                this.context.fillStyle = this.Get('chart.colors')[dataset];
+                this.context.lineWidth = this.Get('chart.linewidth');
+
+                for (i=0; i<this.coords[dataset].length; ++i) {
+                    if (i == 0) {
+                        this.context.moveTo(this.coords[dataset][i][0], this.coords[dataset][i][1]);
+                    } else {
+                        this.context.lineTo(this.coords[dataset][i][0], this.coords[dataset][i][1]);
+                    }
+                }
+            
+            this.context.closePath();
+    
+            this.context.stroke();
+            this.context.fill();
+            
+            /**
+            * Can now handletooltips
+            */
+            if (this.Get('chart.tooltips')) {
+                
+                RGraph.Register(this);
+                
+                var canvas_onmousemove_func = function (e)
+                {
+                    e = RGraph.FixEventObject(e);
+                    
+                    var canvas      = e.target;
+                    var obj         = canvas.__object__;
+                    var overHotspot = false;
+                    var point = obj.getPoint(e);
+
+
+                    if (point) {
+
+                        var dataset = point[3];
+                        var idx     = point[4];
+
+                        if (   !RGraph.Registry.Get('chart.tooltip')
+                            || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ != dataset)
+                            || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset)
+                           ) {
+
+                            /**
+                            * Get the tooltip text
+                            */
+                            var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), idx);
+
+                            if (typeof(text) == 'string' && text.length) {
+                       
+                                overHotspot = true;
+                                obj.canvas.style.cursor = 'pointer';
+
+                                RGraph.Clear(obj.canvas);
+                                obj.Draw();
+                                
+                                if (obj.Get('chart.tooltips.highlight')) {
+                                    obj.context.beginPath();
+                                    obj.context.strokeStyle = obj.Get('chart.highlight.stroke');
+                                    obj.context.fillStyle   = obj.Get('chart.highlight.fill');
+                                    obj.context.arc(point[1], point[2], 2, 0, 6.28, 0);
+                                    obj.context.fill();
+                                    obj.context.stroke();
+                                }
+                                
+                                RGraph.Tooltip(obj.canvas, text, e.pageX, e.pageY, idx);
+                                
+                                // Set the data set value on the tooltip
+                                RGraph.Registry.Get('chart.tooltip').__index__   = idx;
+                                RGraph.Registry.Get('chart.tooltip').__dataset__ = dataset;
+
+
+                            }
+                        //} else if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset) {
+                        } else {
+                            overHotspot = true;
+                            obj.canvas.style.cursor = 'pointer';
+                        }
+                    }
+
+                    if (!overHotspot) {
+                        obj.canvas.style.cursor = 'default';
+                    }
+                }
+                this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
+                RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
+            }
+        }
+        
+        // Reset the globalAlpha
+        if (typeof(alpha) == 'number') {
+            this.context.globalAlpha = oldAlpha;
+        }
+    }
+
+
+    /**
+    * Gets the coordinates for a particular mark
+    * 
+    * @param  number i The index of the data (ie which one it is)
+    * @return array    A two element array of the coordinates
+    */
+    RGraph.Radar.prototype.GetCoordinates = function (dataset, index)
+    {
+        // The number  of data points
+        var len = this.data[dataset].length;
+
+        // The magnitude of the data (NOT the x/y coords)
+        var mag = (this.data[dataset][index] / this.max) * (this.size / 2);
+
+        /**
+        * Get the angle
+        */
+        var angle = (6.28 / len) * index; // In radians
+
+        /**
+        * Work out the X/Y coordinates
+        */
+        var x = Math.cos(angle) * mag;
+        var y = Math.sin(angle) * mag;
+
+        /**
+        * Put the coordinate in the right quadrant
+        */
+        x = this.centerx + x;
+        y = this.centery + (index == 0 ? 0 : y);
+        
+        return [x,y];
+    }
+    
+    
+    /**
+    * This function adds the labels to the chart
+    */
+    RGraph.Radar.prototype.DrawLabels = function ()
+    {
+        var labels = this.Get('chart.labels');
+
+        if (labels && labels.length > 0) {
+
+            this.context.lineWidth = 1;
+            this.context.fillStyle = this.Get('chart.text.color');
+            
+            var offsetx = this.Get('chart.labels.offsetx');
+            var offsety = this.Get('chart.labels.offsety');
+
+            for (var i=0; i<labels.length; ++i) {
+            
+                var ds = 0;
+            
+                for (var dataset=0; dataset<this.data.length; ++dataset) {
+                    if (this.data[dataset][i] > this.data[ds][i]) {
+                        ds = dataset;
+                    }
+                }
+
+                var x        = this.coords[ds][i][0];
+                var y        = this.coords[ds][i][1];
+                var text     = labels[i];
+                var hAlign   = 'center';
+                var vAlign   = 'center';
+                var quartile = (i / this.coords.length);
+
+                // ~Manually do labels on the right middle axis
+                if (i == 0) {
+                    hAlign = 'left';
+                    vAlign = 'center';
+                    x += offsetx;
+
+                } else {
+
+                    hAlign = (x < this.centerx) ? 'right' : 'left';
+                    vAlign = (y < this.centery) ? 'bottom' : 'top';
+                    x     += (x < this.centerx) ? (-1 * offsetx) : offsetx;
+                    y     += (y < this.centery) ? (-1 * offsety) : offsety;
+                    
+                    if (i / this.data.length == 0.25) { x -= offsetx; hAlign = 'center';
+                    } else if (i / this.data.length == 0.5) { y -= offsety; vAlign = 'center';
+                    } else if (i / this.data.length == 0.75) { x += offsetx; hAlign = 'center'; }
+                }
+
+                // context, font, size, x, y, text
+                RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, text, vAlign, hAlign, true, null, 'white');
+            }
+        }
+    }
+
+
+    /**
+    * Draws the circle. No arguments as it gets the information from the object properties.
+    */
+    RGraph.Radar.prototype.DrawCircle = function ()
+    {
+        var circle   = {};
+        circle.limit = this.Get('chart.circle');
+        circle.fill  = this.Get('chart.circle.fill');
+        circle.stroke  = this.Get('chart.circle.stroke');
+
+        if (circle.limit) {
+
+            var r = (circle.limit / this.max) * (this.size / 2);
+            
+            this.context.fillStyle = circle.fill;
+            this.context.strokeStyle = circle.stroke;
+
+            this.context.beginPath();
+            this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0);
+            this.context.fill();
+            this.context.stroke();
+        }
+    }
+
+
+    /**
+    * Unsuprisingly, draws the labels
+    */
+    RGraph.Radar.prototype.DrawAxisLabels = function ()
+    {
+        /**
+        * Draw specific axis labels
+        */
+        if (this.Get('chart.labels.specific')) {
+            this.DrawSpecificAxisLabels();
+            return;
+        }
+
+        this.context.lineWidth = 1;
+        
+        // Set the color to black
+        this.context.fillStyle = 'black';
+        this.context.strokeStyle = 'black';
+
+        var r         = (this.size/ 2);
+        var font_face = this.Get('chart.text.font');
+        var font_size = this.Get('chart.text.size');
+        var context   = this.context;
+        var axes      = this.Get('chart.labels.axes').toLowerCase();
+        var color     = 'rgba(255,255,255,0.8)';
+
+        // The "North" axis labels
+        if (axes.indexOf('n') > -1) {
+            RGraph.Text(context,font_face,font_size,this.centerx,this.centery - (r * 0.2),String(this.scale[0]),'center','center',true,false,color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "South" axis labels
+        if (axes.indexOf('s') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+        
+        // The "East" axis labels
+        if (axes.indexOf('e') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        // The "West" axis labels
+        if (axes.indexOf('w') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
+        }
+
+        RGraph.Text(context, font_face, font_size, this.centerx,  this.centery, '0', 'center', 'center', true, false, color);
+    }
+
+
+    /**
+    * Draws specific axis labels
+    */
+    RGraph.Radar.prototype.DrawSpecificAxisLabels = function ()
+    {
+        /**
+        * Specific Y labels
+        */
+        var labels  = this.Get('chart.labels.specific');
+        var context = this.context;
+        var font    = this.Get('chart.text.font');
+        var size    = this.Get('chart.text.size');
+        var axes    = this.Get('chart.labels.axes').toLowerCase();
+        var interval = this.size / (labels.length * 2);
+
+        for (var i=0; i<labels.length; ++i) {
+
+            if (axes.indexOf('n') > -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (i * interval),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)');
+            if (axes.indexOf('s') > -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (this.size / 2) + (i * interval) + interval,RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)');
+            if (axes.indexOf('w') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval),this.gutterTop + (this.size / 2),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)');
+            if (axes.indexOf('e') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval) + interval + (this.size / 2),this.gutterTop + (this.size / 2),RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)');
+        }
+    }
+
+
+    /**
+    * This method eases getting the focussed point (if any)
+    * 
+    * @param event e The event object
+    */
+    RGraph.Radar.prototype.getPoint = function (e)
+    {
+        var obj     = e.target.__object__;
+        var canvas  = obj.canvas;
+        var context = obj.context;
+
+        for(var dataset=0; dataset<obj.coords.length; ++dataset) {
+            for (var i=0; i<obj.coords[dataset].length; ++i) {
+            
+                var x           = obj.coords[dataset][i][0];
+                var y           = obj.coords[dataset][i][1];
+                var tooltips    = obj.Get('chart.tooltips');
+                var idx         = Number(i);
+                var mouseCoords = RGraph.getMouseXY(e);
+                var mouseX      = mouseCoords[0];
+                var mouseY      = mouseCoords[1];
+
+                if (
+                    (tooltips[i] || tooltips) // The order here is important due to short circuiting
+                    && mouseX < (x + 5)
+                    && mouseX > (x - 5)
+                    && mouseY > (y - 5)
+                    && mouseY < (y + 5)
+                   ) {
+
+                    // This accounts for the datasets and increases the index accordingly
+                    for(var j=0; j<dataset; j++) {
+                        if (typeof(obj.data[j]) == 'object') {
+                            i += obj.data[j].length;
+                        }
+                    }
+                    
+                    return [obj, x, y, dataset, i];
+                }
+            }
+        }
+    }
\ No newline at end of file