Charting with flask, rgraph and custom "timeseries database"

1 files changed, 815 insertions, 0 deletions

diff --git a/schall/static/RGraph/libraries/RGraph.odo.js b/schall/static/RGraph/libraries/RGraph.odo.js
new file mode 100644
index 0000000..2da7fcd
--- /dev/null
+++ b/schall/static/RGraph/libraries/RGraph.odo.js
@@ -0,0 +1,815 @@
+    /**
+    * 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 odometer constructor. Pass it the ID of the canvas tag, the start value of the odo,
+    * the end value, and the value that the pointer should point to.
+    * 
+    * @param string id    The ID of the canvas tag
+    * @param int    start The start value of the Odo
+    * @param int    end   The end value of the odo
+    * @param int    value The indicated value (what the needle points to)
+    */
+    RGraph.Odometer = function (id, start, end, value)
+    {
+        this.id                = id
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.canvas.__object__ = this;
+        this.type              = 'odo';
+        this.isRGraph          = true;
+        this.start             = start;
+        this.end               = end;
+        this.value             = value;
+        this.currentValue      = null;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        this.properties = {
+            'chart.radius':                 null,
+            'chart.value.text':             false,
+            'chart.value.text.decimals':    0,
+            'chart.needle.color':           'black',
+            'chart.needle.width':           2,
+            'chart.needle.head':            true,
+            'chart.needle.tail':            true,
+            'chart.needle.type':            'pointer',
+            'chart.needle.extra':            [],
+            'chart.needle.triangle.border': '#aaa',
+            'chart.text.size':              10,
+            'chart.text.color':             'black',
+            'chart.text.font':              'Verdana',
+            'chart.green.max':              end * 0.75,
+            'chart.red.min':                end * 0.9,
+            'chart.green.color':            'green',
+            'chart.yellow.color':           'yellow',
+            'chart.red.color':              'red',
+            'chart.green.solid':            false,
+            'chart.yellow.solid':           false,
+            'chart.red.solid':              false,
+            'chart.label.area':             35,
+            'chart.gutter.left':            25,
+            'chart.gutter.right':           25,
+            'chart.gutter.top':             25,
+            'chart.gutter.bottom':          25,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.title.font':             null,
+            'chart.title.bold':             true,
+            'chart.contextmenu':            null,
+            'chart.linewidth':              1,
+            'chart.shadow.inner':           false,
+            'chart.shadow.inner.color':     'black',
+            'chart.shadow.inner.offsetx':   3,
+            'chart.shadow.inner.offsety':   3,
+            'chart.shadow.inner.blur':      6,
+            'chart.shadow.outer':           false,
+            'chart.shadow.outer.color':     '#666',
+            'chart.shadow.outer.offsetx':   0,
+            'chart.shadow.outer.offsety':   0,
+            'chart.shadow.outer.blur':      15,
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.scale.decimals':         0,
+            '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.resizable':              false,
+            'chart.resize.handle.adjust':   [0,0],
+            'chart.resize.handle.background': null,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.border':                 false,
+            'chart.border.color1':          '#BEBCB0',
+            'chart.border.color2':          '#F0EFEA',
+            'chart.border.color3':          '#BEBCB0',
+            'chart.tickmarks.highlighted':  false,
+            'chart.zerostart':              false,
+            'chart.labels':                 null,
+            'chart.units.pre':              '',
+            'chart.units.post':             '',
+            'chart.value.units.pre':        '',
+            'chart.value.units.post':       '',
+            'chart.key':                    [],
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            '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.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.halign':             'right',
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.key.text.size':          10,
+        }
+    }
+
+
+    /**
+    * A peudo setter
+    * 
+    * @param name  string The name of the property to set
+    * @param value mixed  The value of the property
+    */
+    RGraph.Odometer.prototype.Set = function (name, value)
+    {
+        if (name == 'chart.needle.style') {
+            alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color');
+        }
+
+        if (name == 'chart.needle.thickness') {
+            name = 'chart.needle.width';
+        }
+
+        if (name == 'chart.value') {
+            this.value = value;
+            return;
+        }
+
+        this.properties[name.toLowerCase()] = value;
+    }
+
+
+    /**
+    * A getter
+    * 
+    * @param name  string The name of the property to get
+    */
+    RGraph.Odometer.prototype.Get = function (name)
+    {
+        if (name == 'chart.value') {
+            return this.value;
+        }
+
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * Draws the odometer
+    */
+    RGraph.Odometer.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);
+        
+        /**
+        * Set the current value
+        */
+        this.currentValue = this.value;
+
+        /**
+        * No longer allow values outside the range of the Odo
+        */
+        if (this.value > this.end) {
+            this.value = this.end;
+        }
+
+        if (this.value < this.start) {
+            this.value = this.start;
+        }
+
+        /**
+        * 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');
+
+        // Work out a few things
+        this.radius   = Math.min((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2, (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2) - (this.Get('chart.border') ? 25 : 0);
+        this.diameter = 2 * this.radius;
+        this.centerx  = this.canvas.width / 2;
+        this.centery  = this.canvas.height / 2;
+        this.range    = this.end - this.start;
+
+        
+        if (typeof(this.Get('chart.radius')) == 'number') {
+            this.radius = this.Get('chart.radius');
+        }
+        
+        /**
+        * Move the centerx if the key is defined
+        */
+        if (this.Get('chart.key').length > 0 && this.canvas.width > this.canvas.height) {
+            this.centerx = 5 + this.radius;
+        }
+
+        this.context.lineWidth = this.Get('chart.linewidth');
+
+        // Draw the background
+        this.DrawBackground();
+
+        // And lastly, draw the labels
+        this.DrawLabels();
+
+        // Draw the needle
+        this.DrawNeedle(this.value, this.Get('chart.needle.color'));
+        
+        /**
+        * Draw any extra needles
+        */
+        if (this.Get('chart.needle.extra').length > 0) {
+            for (var i=0; i<this.Get('chart.needle.extra').length; ++i) {
+                var needle = this.Get('chart.needle.extra')[i];
+                this.DrawNeedle(needle[0], needle[1], needle[2]);
+            }
+        }
+        
+        /**
+        * Draw the key if requested
+        */
+        if (this.Get('chart.key').length > 0) {
+            // Build a colors array out of the needle colors
+            var colors = [this.Get('chart.needle.color')];
+            
+            if (this.Get('chart.needle.extra').length > 0) {
+                for (var i=0; i<this.Get('chart.needle.extra').length; ++i) {
+                    var needle = this.Get('chart.needle.extra')[i];
+                    colors.push(needle[1]);
+                }
+            }
+
+            RGraph.DrawKey(this, this.Get('chart.key'), colors);
+        }
+        
+        
+        /**
+        * Setup the context menu if required
+        */
+        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);
+        }
+        
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    /**
+    * Draws the background
+    */
+    RGraph.Odometer.prototype.DrawBackground = function ()
+    {
+        this.context.beginPath();
+
+        /**
+        * Turn on the shadow if need be
+        */
+        if (this.Get('chart.shadow.outer')) {
+            RGraph.SetShadow(this, this.Get('chart.shadow.outer.color'), this.Get('chart.shadow.outer.offsetx'), this.Get('chart.shadow.outer.offsety'), this.Get('chart.shadow.outer.blur'));
+        }
+
+        var backgroundColor = '#eee';
+
+        // Draw the grey border
+        this.context.fillStyle = backgroundColor;
+        this.context.arc(this.centerx, this.centery, this.radius, 0.0001, 6.28, false);
+        this.context.fill();
+
+        /**
+        * Turn off the shadow
+        */
+        RGraph.NoShadow(this);
+
+
+        // Draw a circle
+        this.context.strokeStyle = '#666';
+        this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false);
+
+        // Now draw a big white circle to make the lines appear as tick marks
+        // This is solely for Chrome
+        this.context.fillStyle = backgroundColor;
+        this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false);
+        this.context.fill();
+
+        /**
+        * Draw more tickmarks
+        */
+        this.context.beginPath();
+        this.context.strokeStyle = '#bbb';
+        
+        for (var i=0; i<=360; i+=3) {
+            this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false);
+            this.context.lineTo(this.centerx, this.centery);
+        }
+        this.context.stroke();
+
+        this.context.beginPath();
+        this.context.lineWidth = 1;
+        this.context.strokeStyle = 'black';
+
+        // Now draw a big white circle to make the lines appear as tick marks
+        this.context.fillStyle = backgroundColor;
+        this.context.strokeStyle = backgroundColor;
+        this.context.arc(this.centerx, this.centery, this.radius - 5, 0, 6.28, false);
+        this.context.fill();
+        this.context.stroke();
+
+        // Gray lines at 18 degree intervals
+        this.context.beginPath();
+        this.context.strokeStyle = '#ddd';
+        for (var i=0; i<360; i+=18) {
+            this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false);
+            this.context.lineTo(this.centerx, this.centery);
+        }
+        this.context.stroke();
+        
+        // Redraw the outer circle
+        this.context.beginPath();
+        this.context.strokeStyle = 'black';
+        this.context.arc(this.centerx, this.centery, this.radius, 0, 6.2830, false);
+        this.context.stroke();
+
+        /**
+        * Now draw the center bits shadow if need be
+        */
+        if (this.Get('chart.shadow.inner')) {
+            this.context.beginPath();
+            RGraph.SetShadow(this, this.Get('chart.shadow.inner.color'), this.Get('chart.shadow.inner.offsetx'), this.Get('chart.shadow.inner.offsety'), this.Get('chart.shadow.inner.blur'));
+            this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.label.area'), 0, 6.28, 0);
+            this.context.fill();
+            this.context.stroke();
+    
+            /**
+            * Turn off the shadow
+            */
+            RGraph.NoShadow(this);
+        }
+
+        /*******************************************************
+        * Draw the green area
+        *******************************************************/
+        if (this.Get('chart.green.solid')) {
+            var greengrad = this.Get('chart.green.color');
+
+        } else {
+            var greengrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius);
+            greengrad.addColorStop(0, 'white');
+            greengrad.addColorStop(1, this.Get('chart.green.color'));
+        }
+
+        // Draw the "tick highlight"
+        if (this.Get('chart.tickmarks.highlighted')) {
+            this.context.beginPath();
+            this.context.lineWidth = 5;
+            this.context.strokeStyle = greengrad;
+            this.context.arc(this.centerx, this.centery, this.radius - 2.5,
+            
+                -1.57,
+                (((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57,
+                0);
+
+            this.context.stroke();
+            
+            this.context.lineWidth = 1;
+        }
+
+        this.context.beginPath();
+            this.context.fillStyle = greengrad;
+            this.context.arc(
+                             this.centerx,
+                             this.centery,
+                             this.radius - this.Get('chart.label.area'),
+                             -1.57,
+                             (((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57,
+                             false
+                            );
+            this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.fill();
+
+
+        /*******************************************************
+        * Draw the yellow area
+        *******************************************************/
+        if (this.Get('chart.yellow.solid')) {
+            var yellowgrad = this.Get('chart.yellow.color');
+
+        } else {
+            var yellowgrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius);
+            yellowgrad.addColorStop(0, 'white');
+            yellowgrad.addColorStop(1, this.Get('chart.yellow.color'));
+        }
+
+        // Draw the "tick highlight"
+        if (this.Get('chart.tickmarks.highlighted')) {
+            this.context.beginPath();
+            this.context.lineWidth = 5;
+            this.context.strokeStyle = yellowgrad;
+            this.context.arc(this.centerx, this.centery, this.radius - 2.5, (
+            
+                ((this.Get('chart.green.max') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
+                (((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
+                0);
+
+            this.context.stroke();
+            
+            this.context.lineWidth = 1;
+        }
+
+        this.context.beginPath();
+            this.context.fillStyle = yellowgrad;
+            this.context.arc(
+                             this.centerx,
+                             this.centery,
+                             this.radius - this.Get('chart.label.area'),
+                             ( ((this.Get('chart.green.max') -this.start) / (this.end - this.start)) * 6.2830) - 1.57,
+                             ( ((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
+                             false
+                            );
+            this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.fill();
+
+        /*******************************************************
+        * Draw the red area
+        *******************************************************/
+        if (this.Get('chart.red.solid')) {
+            var redgrad = this.Get('chart.red.color');
+
+        } else {
+            var redgrad = this.context.createRadialGradient(this.centerx,
+                                                            this.centery,
+                                                            0,
+                                                            this.centerx,
+                                                            this.centery,
+                                                            this.radius);
+            redgrad.addColorStop(0, 'white');
+            redgrad.addColorStop(1, this.Get('chart.red.color'));
+        }
+
+
+        // Draw the "tick highlight"
+        if (this.Get('chart.tickmarks.highlighted')) {
+            this.context.beginPath();
+            this.context.lineWidth = 5;
+            this.context.strokeStyle = redgrad;
+            this.context.arc(this.centerx, this.centery, this.radius - 2.5,(((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,(2 * Math.PI) - (0.5 * Math.PI),0);
+            this.context.stroke();
+            
+            this.context.lineWidth = 1;
+        }
+
+        this.context.beginPath();
+            this.context.fillStyle = redgrad;
+            this.context.strokeStyle = redgrad;
+            this.context.arc(
+                             this.centerx,
+                             this.centery,
+                             this.radius - this.Get('chart.label.area'),
+                             (((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
+                             6.2830 - (0.25 * 6.2830),
+                             false
+                            );
+            this.context.lineTo(this.centerx, this.centery);
+        this.context.closePath();
+        this.context.fill();
+
+
+        /**
+        * Draw the thick border
+        */
+
+        if (this.Get('chart.border')) {
+            
+
+            var grad = this.context.createRadialGradient(this.centerx, this.centery, this.radius, this.centerx, this.centery, this.radius + 20);
+            grad.addColorStop(0, this.Get('chart.border.color1'));
+            grad.addColorStop(0.5, this.Get('chart.border.color2'));
+            grad.addColorStop(1, this.Get('chart.border.color3'));
+
+            
+            this.context.beginPath();
+                this.context.fillStyle = grad;
+                this.context.strokeStyle = 'rgba(0,0,0,0)'
+                this.context.lineWidth = 0.001;
+                this.context.arc(this.centerx, this.centery, this.radius + 20, 0, 6.2830, 0);
+                this.context.arc(this.centerx, this.centery, this.radius - 2, 6.2830, 0, 1);
+            this.context.fill();
+        }
+        
+        // Put the linewidth back to what it was
+        this.context.lineWidth = this.Get('chart.linewidth');
+
+
+        /**
+        * Draw the title if specified
+        */
+        if (this.Get('chart.title')) {
+            RGraph.DrawTitle(this.canvas,
+                             this.Get('chart.title'),
+                             this.centery - this.radius,
+                             null,
+                             this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2);
+        }
+
+
+        // Draw the big tick marks
+        if (!this.Get('chart.tickmarks.highlighted')) {
+            for (var i=18; i<=360; i+=36) {
+                this.context.beginPath();
+                    this.context.strokeStyle = '#999';
+                    this.context.lineWidth = 2;
+                    this.context.arc(this.centerx, this.centery, this.radius - 1, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false);
+                    this.context.arc(this.centerx, this.centery, this.radius - 7, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false);
+                this.context.stroke();
+            }
+        }
+    }
+
+
+    /**
+    * Draws the needle of the odometer
+    * 
+    * @param number value The value to represent
+    * @param string color The color of the needle
+    * @param number       The OPTIONAL length of the needle
+    */
+    RGraph.Odometer.prototype.DrawNeedle = function (value, color)
+    {
+        // The optional length of the needle
+        var length = arguments[2] ? arguments[2] : this.radius - this.Get('chart.label.area');
+
+        // ===== First draw a grey background circle =====
+        
+        this.context.fillStyle = '#999';
+
+        this.context.beginPath();
+            this.context.moveTo(this.centerx, this.centery);
+            this.context.arc(this.centerx, this.centery, 10, 0, 6.28, false);
+            this.context.fill();
+        this.context.closePath();
+
+        this.context.fill();
+
+        // ===============================================
+        
+        this.context.fillStyle = color
+        this.context.strokeStyle = '#666';
+
+        // Draw the centre bit
+        this.context.beginPath();
+            this.context.moveTo(this.centerx, this.centery);
+            this.context.arc(this.centerx, this.centery, 8, 0, 6.28, false);
+            this.context.fill();
+        this.context.closePath();
+        
+        this.context.stroke();
+        this.context.fill();
+
+        if (this.Get('chart.needle.type') == 'pointer') {
+
+            this.context.strokeStyle = color;
+            this.context.lineWidth   = this.Get('chart.needle.width');
+            this.context.lineCap     = 'round';
+            this.context.lineJoin    = 'round';
+            
+            // Draw the needle
+            this.context.beginPath();
+                // The trailing bit on the opposite side of the dial
+                this.context.beginPath();
+                    this.context.moveTo(this.centerx, this.centery);
+                    
+                    if (this.Get('chart.needle.tail')) {
+
+                        this.context.arc(this.centerx,
+                                         this.centery,
+                                         20,
+                                          (((value / this.range) * 360) + 90) / 57.3,
+                                         (((value / this.range) * 360) + 90 + 0.01) / 57.3, // The 0.01 avoids a bug in ExCanvas and Chrome 6
+                                         false
+                                        );
+                    }
+
+                // Draw the long bit on the opposite side
+                this.context.arc(this.centerx,
+                                 this.centery,
+                                 length - 10,
+                                 (((value / this.range) * 360) - 90) / 57.3,
+                                 (((value / this.range) * 360) - 90 + 0.1 ) / 57.3, // The 0.1 avoids a bug in ExCanvas and Chrome 6
+                                 false
+                                );
+            this.context.closePath();
+            
+            //this.context.stroke();
+            //this.context.fill();
+        
+
+        } else if (this.Get('chart.needle.type') == 'triangle') {
+
+            this.context.lineWidth = 0.01;
+            this.context.lineEnd  = 'square';
+            this.context.lineJoin = 'miter';
+
+            /**
+            * This draws the version of the pointer that becomes the border
+            */
+            this.context.beginPath();
+                this.context.fillStyle = this.Get('chart.needle.triangle.border');
+                this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
+                this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
+                this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
+            this.context.closePath();
+            this.context.fill();
+
+            this.context.beginPath();
+                this.context.arc(this.centerx, this.centery, 15, 0, 6.28, 0);
+            this.context.closePath();
+            this.context.fill();
+
+            // This draws the pointer
+            this.context.beginPath();
+                this.context.strokeStyle = 'black';
+                this.context.fillStyle = color;
+                this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
+                this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
+                this.context.arc(this.centerx, this.centery, length - 13, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
+            this.context.closePath();
+            this.context.stroke();
+            this.context.fill();
+
+            /**
+            * This is here to accomodate the MSIE/ExCanvas combo
+            */
+            this.context.beginPath();
+                this.context.arc(this.centerx, this.centery, 7, 0, 6.28, 0);
+            this.context.closePath();
+            this.context.fill();
+        }
+
+
+        this.context.stroke();
+        this.context.fill();
+
+        // Draw the mini center circle
+        this.context.beginPath();
+        this.context.fillStyle = color;
+            this.context.arc(this.centerx, this.centery, this.Get('chart.needle.type') == 'pointer' ? 7 : 12, 0.01, 6.2830, false);
+        this.context.fill();
+
+        // This draws the arrow at the end of the line
+        if (this.Get('chart.needle.head') && this.Get('chart.needle.type') == 'pointer') {
+            this.context.lineWidth = 1;
+            this.context.fillStyle = color;
+
+            // round, bevel, miter
+            this.context.lineJoin = 'miter';
+            this.context.lineCap  = 'butt';
+
+            this.context.beginPath();
+                this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, (((value / this.range) * 360) - 90 + 0.1) / 57.3, false);
+
+                this.context.arc(this.centerx,
+                                 this.centery,
+                                 length - 20,
+                                 RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 80 : 85) ),
+                                 RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 100 : 95) ),
+                                 1);
+            this.context.closePath();
+    
+            this.context.fill();
+            //this.context.stroke();
+        }
+        
+        /**
+        * Draw a white circle at the centre
+        */
+        this.context.beginPath();
+        this.context.fillStyle = 'gray';
+            this.context.moveTo(this.centerx, this.centery);
+            this.context.arc(this.centerx,this.centery,2,0,6.2795,false);
+        this.context.closePath();
+
+        this.context.fill();
+    }
+    
+    /**
+    * Draws the labels for the Odo
+    */
+    RGraph.Odometer.prototype.DrawLabels = function ()
+    {
+        var context   = this.context;
+        var size      = this.Get('chart.text.size');
+        var font      = this.Get('chart.text.font');
+        var centerx   = this.centerx;
+        var centery   = this.centery;
+        var r         = this.radius - (this.Get('chart.label.area') / 2);
+        var start     = this.start;
+        var end       = this.end;
+        var decimals  = this.Get('chart.scale.decimals');
+        var labels    = this.Get('chart.labels');
+        var units_pre = this.Get('chart.units.pre');
+        var units_post = this.Get('chart.units.post');
+
+        context.beginPath();
+        context.fillStyle = this.Get('chart.text.color');
+
+        /**
+        * If label are specified, use those
+        */
+        if (labels) {
+            for (var i=0; i<labels.length; ++i) {
+
+                RGraph.Text(context,
+                            font,
+                            size,
+                            centerx + (Math.cos(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Sin A = Opp / Hyp
+                            centery + (Math.sin(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Cos A = Adj / Hyp
+                            String(units_pre + labels[i] + units_post),
+                            'center',
+                            'center');
+            }
+
+        /**
+        * If not, use the maximum value
+        */
+        } else {
+            RGraph.Text(context, font, size, centerx + (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (1/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 36);
+            RGraph.Text(context, font, size, centerx + (0.951 * r ), centery - (0.309 * r), String(units_pre + (((end - start) * (2/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 72);
+            RGraph.Text(context, font, size, centerx + (0.949 * r), centery + (0.287 * r), String(units_pre + (((end - start) * (3/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 108);
+            RGraph.Text(context, font, size, centerx + (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (4/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 144);
+            RGraph.Text(context, font, size, centerx, centery + r, String(units_pre + (((end - start) * (5/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 180);
+            RGraph.Text(context, font, size, centerx - (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (6/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 216);
+            RGraph.Text(context, font, size, centerx - (0.949 * r), centery + (0.300 * r), a = String(units_pre + (((end - start) * (7/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 252);
+            RGraph.Text(context, font, size, centerx - (0.951 * r), centery - (0.309 * r), String(units_pre + (((end - start) * (8/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 288);
+            RGraph.Text(context, font, size, centerx - (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (9/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 324);
+            RGraph.Text(context, font, size, centerx, centery - r, this.Get('chart.zerostart') ? units_pre + String(this.start) + units_post : String(units_pre + (((end - start) * (10/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 360);
+        }
+        
+        this.context.fill();
+        
+        /**
+        * Draw the text label below the center point
+        */
+        if (this.Get('chart.value.text')) {
+            context.strokeStyle = 'black';
+            RGraph.Text(context, font, size + 2, centerx, centery + size + 2 + 10, String(this.Get('chart.value.units.pre') + this.value.toFixed(this.Get('chart.value.text.decimals')) + this.Get('chart.value.units.post')), 'center', 'center', true,  null, 'white');
+        }
+    }