// o---------------------------------------------------------------------------o
    // | This file is part of the RGraph package - you can learn more at:          |
    // |                                                                           |
    // |                           https://www.rgraph.net                          |
    // |                                                                           |
    // | RGraph is dual-licensed under the Open Source GPL license. This means     |
    // | that it's free to use for any purpose. The GPL license does have          |
    // | consequences on the license of the software that you include it in,       |
    // | however. If this is not desirable, then there's an inexpensive commercial |
    // | license option available. See the RGraph website for more details.        |
    // o---------------------------------------------------------------------------o

    RGraph = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true};




    //
    // The progress bar constructor
    //
    RGraph.SemiCircularProgress = function (conf)
    {
        this.id                     = conf.id;
        this.canvas                 = document.getElementById(this.id);
        this.context                = this.canvas.getContext('2d');
        this.canvas.__object__      = this;
        this.min                    = RGraph.stringsToNumbers(conf.min);
        this.max                    = RGraph.stringsToNumbers(conf.max);
        this.value                  = RGraph.stringsToNumbers(conf.value);
        this.type                   = 'semicircularprogress';
        this.isRGraph               = true;
        this.isrgraph               = true;
        this.rgraph                 = true;
        this.currentValue           = null;
        this.uid                    = RGraph.createUID();
        this.canvas.uid             = this.canvas.uid ? this.canvas.uid : RGraph.createUID();
        this.colorsParsed           = false;
        this.coords                 = [];
        this.coordsText             = [];
        this.original_colors        = [];
        this.firstDraw              = true; // After the first draw this will be false
        this.stopAnimationRequested = false;// Used to control the animations


        this.properties =
        {
            backgroundColor:            'transparent',
            backgroundGrid:             false,
            backgroundGridMargin:       20,
            backgroundGridColor:        '#eee',
            backgroundGridLinewidth:    1,
            backgroundGridCircles:      true,
            backgroundGridRadials:      true,
            backgroundGridRadialsCount: 10,
            backgroundFill:           true,
            backgroundFillColor:      null,

            colors:                     RGraph.getColors(),
            colorsStroke:               'transparent',

            linewidth:                  1,


            marginLeft:                 35,
            marginRight:                35,
            marginTop:                  35,
            marginBottom:               35,

            radius:                     null,
            centerx:                    null,
            centery:                    null,

            width:                      null,

            anglesStart:                Math.PI,
            anglesEnd:                  (2 * Math.PI),

            scaleVisible:               false,
            scaleMin:                   null,
            scaleMax:                   null, // Defaults to the charts max value
            scaleDecimals:              0,
            scalePoint:                 '.',
            scaleThousand:              ',',
            scaleFormatter:             null,
            scaleUnitsPre:              '',
            scaleUnitsPost:             '',
            scaleLabelsCount:           10,
            scaleLabelsFont:            null,
            scaleLabelsSize:            null,
            scaleLabelsColor:           null,
            scaleLabelsBold:            null,
            scaleLabelsItalic:          null,
            scaleLabelsOffsetr:         0,
            scaleLabelsOffsetx:         0,
            scaleLabelsOffsety:         0,

            shadow:                     false,
            shadowColor:                'rgba(220,220,220,1)',
            shadowBlur:                 2,
            shadowOffsetx:              2,
            shadowOffsety:              2,

            labelsCenter:               true,
            labelsCenterIndex:          0,
            labelsCenterFade:           false,
            labelsCenterSize:           40,
            labelsCenterColor:          null,
            labelsCenterBold:           null,
            labelsCenterItalic:         null,
            labelsCenterFont:           null,
            labelsCenterValign:         'bottom',
            labelsCenterOffsetx:        0,
            labelsCenterOffsety:        0,
            labelsCenterThousand:       ',',
            labelsCenterPoint:          '.',
            labelsCenterDecimals:       0,
            labelsCenterUnitsPost:      '',
            labelsCenterUnitsPre:       '',
            labelsCenterSpecific:       null,

            labelsMin:                  true,
            labelsMinColor:             null,
            labelsMinFont:              null,
            labelsMinBold:              null,
            labelsMinSize:              null,
            labelsMinItalic:            null,
            labelsMinOffsetAngle:       0,
            labelsMinOffsetx:           0,
            labelsMinOffsety:           5,
            labelsMinThousand:       ',',
            labelsMinPoint:          '.',
            labelsMinDecimals:       0,
            labelsMinUnitsPost:      '',
            labelsMinUnitsPre:       '',
            labelsMinSpecific:       null,

            labelsMax:                  true,
            labelsMaxColor:             null,
            labelsMaxFont:              null,
            labelsMaxBold:              null,
            labelsMaxSize:              null,
            labelsMaxItalic:            null,
            labelsMaxOffsetAngle:       0,
            labelsMaxOffsetx:           0,
            labelsMaxOffsety:           5,
            labelsMaxThousand:       ',',
            labelsMaxPoint:          '.',
            labelsMaxDecimals:       0,
            labelsMaxUnitsPost:      '',
            labelsMaxUnitsPre:       '',
            labelsMaxSpecific:       null,

            title:                      '',
            titleBold:                  true,
            titleItalic:                null,
            titleFont:                  null,
            titleSize:                  null,
            titleColor:                 null,
            titleHalign:                null,
            titleValign:                null,
            titleOffsetx:               0,
            titleOffsety:               0,
            titleSubtitle:        '',
            titleSubtitleSize:    null,
            titleSubtitleColor:   '#aaa',
            titleSubtitleFont:    null,
            titleSubtitleBold:    null,
            titleSubtitleItalic:  null,
            titleSubtitleOffsetx: 0,
            titleSubtitleOffsety: 0,

            textSize:                   12,
            textColor:                  'black',
            textFont:                   'Arial, Verdana, sans-serif',
            textBold:                   false,
            textItalic:                 false,
            textAccessible:             false,
            textAccessibleOverflow:     'visible',
            textAccessiblePointerevents:false,
            text:                       null,

            contextmenu:                null,

            tooltips:                        null,
            tooltipsEffect:                  'slide',
            tooltipsOverride:                null,
            tooltipsCssClass:                'RGraph_tooltip',
            tooltipsCss:                     null,
            tooltipsEvent:                   'onclick',
            tooltipsHighlight:               true,
            tooltipsPersistent:              false,
            tooltipsHotspotXonly:            false,
            tooltipsFormattedThousand:       ',',
            tooltipsFormattedPoint:          '.',
            tooltipsFormattedDecimals:       0,
            tooltipsFormattedUnitsPre:       '',
            tooltipsFormattedUnitsPost:      '',
            tooltipsFormattedKeyColors:      null,
            tooltipsFormattedKeyColorsShape: 'square',
            tooltipsFormattedKeyColorsCss:   null,
            tooltipsFormattedKeyLabels:      [],
            tooltipsFormattedListType:       'ul',
            tooltipsFormattedListItems:      null,
            tooltipsFormattedTableHeaders:   null,
            tooltipsFormattedTableData:      null,
            tooltipsPointer:                 true,
            tooltipsPointerCss:              null,
            tooltipsPointerOffsetx:          0,
            tooltipsPointerOffsety:          0,
            tooltipsPositionStatic:          true,
            tooltipsOffsetx:                 0,
            tooltipsOffsety:                 0,
            tooltipsHotspotIgnore:           null,

            highlightStyle:             null,
            highlightStroke:            'transparent',
            highlightFill:              'rgba(255,255,255,0.7)',
            highlightFade:              true,

            annotatable:                false,
            annotatableColor:           'black',
            annotatableLinewidth:      1,

            key:                                null,
            keyBackground:                      'white',
            keyPosition:                        'margin',
            keyHalign:                          'right',
            keyShadow:                          false,
            keyShadowColor:                     '#666',
            keyShadowBlur:                      3,
            keyShadowOffsetx:                   2,
            keyShadowOffsety:                   2,
            keyPositionMarginBoxed:             false,
            keyPositionMarginHSpace:            0,
            keyPositionX:                       null,
            keyPositionY:                       null,
            keyColorShape:                      'square',
            keyRounded:                         true,
            keyLinewidth:                       1,
            keyColors:                          null,
            keyInteractive:                     false,
            keyInteractiveHighlightChartStroke: 'rgba(0,0,0,0)',
            keyInteractiveHighlightChartFill:   'rgba(255,255,255,0.7)',
            keyInteractiveHighlightLabel:       'rgba(255,0,0,0.2)',
            keyLabelsColor:                     null,
            keyLabelsFont:                      null,
            keyLabelsSize:                      null,
            keyLabelsBold:                      null,
            keyLabelsItalic:                    null,
            keyLabelsOffsetx:                   0,
            keyLabelsOffsety:                   0,
            keyFormattedDecimals:               0,
            keyFormattedPoint:                  '.',
            keyFormattedThousand:               ',',
            keyFormattedUnitsPre:               '',
            keyFormattedUnitsPost:              '',
            keyFormattedValueSpecific:          null,
            keyFormattedItemsCount:             null,

            adjustable:                 false,
            
            variant:                    'default',

            clearto:                    'transparent',
            
            events:                     {},
            clip:                       null,
            responsive:                 null,
            scale:                      true,
            scaleFactor:                2,
            antialiasTranslate:         false,
            
            style:                      []
        };




        //
        // These are the properties that get scaled up if the
        // scale option is enabled.
        //
        this.properties_scale = [
            'backgroundGridMargin',
            'backgroundGridLinewidth',
            
            'linewidth',
            
            'marginLeft',
            'marginRight',
            'marginTop',
            'marginBottom',

            'radius',
            'centerx',
            'centery',

            'width',

            'scaleLabelsSize',
            'scaleLabelsOffsetr',
            'scaleLabelsOffsetx',
            'scaleLabelsOffsety',

            'shadowBlur',
            'shadowOffsetx',
            'shadowOffsety',

            'labelsCenterSize',
            'labelsCenterOffsetx',
            'labelsCenterOffsety',

            'labelsMinSize',
            'labelsMinOffsetx',
            'labelsMinOffsety',

            'labelsMaxSize',
            'labelsMaxOffsetx',
            'labelsMaxOffsety',

            'titleSize',
            'titleOffsetx',
            'titleOffsety',
            'titleSubtitleSize',
            'titleSubtitleOffsetx',
            'titleSubtitleOffsety',

            'textSize',

            'annotatableLinewidth',

            'keyShadowBlur',
            'keyShadowOffsetx',
            'keyShadowOffsety',
            'keyPositionMarginHSpace',
            'keyPositionX',
            'keyPositionY',
            'keyLinewidth',
            'keyLabelsSize',
            'keyLabelsOffsetx',
            'keyLabelsOffsety'
        ];









        //
        // Add the reverse look-up table  for property names
        // so that property names can be specified in any case.
        //
        this.properties_lowercase_map = [];
        for (var i in this.properties) {
            if (typeof i === 'string') {
                this.properties_lowercase_map[i.toLowerCase()] = i;
            }
        }


        // Check for support
        if (!this.canvas) {
            alert('[SEMICIRCULARPROGRESS] No canvas support');
            return;
        }




        // Easy access to  properties and the path function
        var properties = this.properties;
        this.path      = RGraph.pathObjectFunction;


        
        //
        // "Decorate" the object with the generic effects if the effects library has been included
        //
        if (RGraph.Effects && typeof RGraph.Effects.decorate === 'function') {
            RGraph.Effects.decorate(this);
        }
        
        
        
        // Add the responsive method. This method resides in the common file.
        this.responsive = RGraph.responsive;








        //
        // A generic setter
        // 
        // @param string name  The name of the property to set or it can also be an object containing
        //                     object style configuration
        //
        this.set = function (name)
        {
            var value = typeof arguments[1] === 'undefined' ? null : arguments[1];

            // Go through all of the properties and make sure
            // that they're using the correct capitalisation
            if (typeof name === 'string') {
                name = this.properties_lowercase_map[name.toLowerCase()] || name;
            }

            // backgroundBackdrop      => backgroundFill
            // backgroundBackdropColor => backgroundFillColor
            if (name === 'backgroundBackdrop')      name = 'backgroundFill';
            if (name === 'backgroundBackdropColor') name = 'backgroundFillColor';
            
            // Set the colorsParsed flag to false if the colors
            // property is being set
            if (   name === 'colors'
                || name === 'keyColors'
                || name === 'backgroundColor'
                || name === 'backgroundFill'
                || name === 'backgroundFillOpacity'
               ) {
                this.colorsParsed = false;
            }

            // the number of arguments is only one and it's an
            // object - parse it for configuration data and return.
            if (arguments.length === 1 && typeof arguments[0] === 'object') {
                for (i in arguments[0]) {
                    if (typeof i === 'string') {
                        this.set(i, arguments[0][i]);
                    }
                }

                return this;
            }

            properties[name] = value;

            return this;
        };








        //
        // A generic getter
        // 
        // @param string name  The name of the property to get
        //
        this.get = function (name)
        {
            // Go through all of the properties and make sure
            // that they're using the correct capitalisation
            name = this.properties_lowercase_map[name.toLowerCase()] || name;

            return properties[name];
        };








        //
        // Draws the progress bar
        //
        this.draw = function ()
        {
            // MUST be the first thing that's done - but only
            // once!!
            RGraph.runOnce(`scale-up-the-canvas-once-in-the-draw-function-${this.id}-${this.uid}`,  () =>
            {
                // Note that we're in an arrow function so the
                // 'this' variable is OK to be used and refers
                // to the RGraph Line chart object.
                RGraph.scale(this);
            });









            //
            // Fire the onbeforedraw event
            //
            RGraph.fireCustomEvent(this, 'onbeforedraw');



            //
            // Add any CSS that has been specified to the document.
            // This is general CSS and does not necessarily have to
            // pertain to the canvas tag. It only gets added once
            // to the document no matter how many times this draw
            // function is called.
            //
            // Add the CSS to a <style> block in the <head>.
            RGraph.addConfigurationBasedCSS(this);



            // Translate half a pixel for antialiasing purposes - but
            // only if it hasn't been done already
            //
            // The old style antialias fix
            //
            if (   !this.properties.scale
                && this.properties.antialiasTranslate
                && !this.canvas.__rgraph_aa_translated__) {

                this.context.translate(0.5,0.5);
            
                this.canvas.__rgraph_aa_translated__ = true;
            }

            //
            // Reset the linewidth to 1 because it may be left
            // over as being something greater from previous
            // draws.
            this.context.lineWidth = 1;


            //
            // Constrain the value to be within the min and max
            //
            if (this.value > this.max) this.value = this.max;
            if (this.value < this.min) this.value = this.min;

            if (RGraph.isArray(this.value) && RGraph.arraySum(this.value) > (this.max - this.min) ) {
                alert('[SEMI-CIRCULAR PROGRESS] Total value is over the maximum value');
            }




            //
            // Parse the colors. This allows for simple gradient syntax
            //
            if (!this.colorsParsed) {
    
                this.parseColors();
    
                
                // Don't want to do this again
                this.colorsParsed = true;
            }
    
            
            //
            // Set the current value
            //
            this.currentValue = this.value;



            //
            // Make the margins easy ro access
            //
            this.marginLeft   = properties.marginLeft;
            this.marginRight  = properties.marginRight;
            this.marginTop    = properties.marginTop;
            this.marginBottom = properties.marginBottom;
    
            // Figure out the width and height
            this.radius = Math.min(
                (this.canvas.width - properties.marginLeft - properties.marginRight) / 2,
                this.canvas.height - properties.marginTop - properties.marginBottom
            );
            this.centerx = ((this.canvas.width - this.marginLeft - this.marginRight) / 2) + this.marginLeft;
            this.centery = this.canvas.height - this.marginBottom;
            this.width   = this.radius / 3;
             
            // User specified centerx/y/radius
            if (typeof properties.radius  === 'number') this.radius  = properties.radius;
            if (typeof properties.centerx === 'number') this.centerx = properties.centerx;
            if (typeof properties.centery === 'number') this.centery = properties.centery;
            if (typeof properties.width   === 'number') this.width   = properties.width;

            //
            // Allow the centerx/centery/radius to be a plus/minus
            //
            //
            var scaleFactor = RGraph.getScaleFactor(this);

            if (typeof properties.radius  === 'string' && properties.radius.match(/^\+|-\d+$/) )  this.radius  += Number(properties.radius) * scaleFactor;
            if (typeof properties.width   === 'string' && properties.width.match(/^\+|-\d+$/) )   this.width   += Number(properties.width) * scaleFactor;
            if (typeof properties.centerx === 'string' && properties.centerx.match(/^\+|-\d+$/) ) this.centerx += Number(properties.centerx) * scaleFactor;
            if (typeof properties.centery === 'string' && properties.centery.match(/^\+|-\d+$/) ) this.centery += Number(properties.centery) * scaleFactor;

            this.coords = [];



            //
            // Stop this growing uncontrollably
            //
            this.coordsText = [];





            //
            // Install clipping
            //
            // MUST be the first thing that's done after the
            // beforedraw event
            //
            if (!RGraph.isNullish(this.properties.clip)) {
                RGraph.clipTo.start(this, this.properties.clip);
            }
            
            
            
            
    
            //
            // Draw the meter
            //
            this.drawBackgroundGrid();
            this.drawMeter();
            this.drawLabels();
            this.drawScale();
            
    
    
    
            //
            // Setup the context menu if required
            //
            if (properties.contextmenu) {
                RGraph.showContext(this);
            }






            // Draw the key if necessary
            if (properties.key && properties.key.length) {
                RGraph.drawKey(
                    this,
                    properties.key,
                    properties.colors
                );
            }






            //
            // Add custom text thats specified
            //
            RGraph.addCustomText(this);




    
    
    
    
            //
            // This installs the event listeners
            //
            RGraph.installEventListeners(this);
            
            //
            // End clipping
            //
            if (!RGraph.isNullish(this.properties.clip)) {
                RGraph.clipTo.end();
            }

            
            //
            // Instead of using RGraph.common.adjusting.js, handle them here
            //
            this.allowAdjusting();


            //
            // Fire the onfirstdraw event
            //
            if (this.firstDraw) {
                this.firstDraw = false;
                RGraph.fireCustomEvent(this, 'onfirstdraw');
                this.firstDrawFunc();
            }




            //
            // Fire the RGraph draw event
            //
            RGraph.fireCustomEvent(this, 'ondraw');










            //
            // Install any inline responsive configuration. This
            // should be last in the draw function - even after
            // the draw events.
            //
            RGraph.installInlineResponsive(this);











            return this;
        };








        //
        // Draw the bar itself
        //
        this.drawMeter = function ()
        {
            // Reset the .coords array
            this.coords = [];



            //
            // The start/end angles
            //
            var start = properties.anglesStart,
                end   = properties.anglesEnd;

            //
            // Calculate a scale
            //

            this.scale2 = RGraph.getScale({object: this, options: {
                'scale.max':          this.max,
                'scale.strict':       true,
                'scale.min':          this.min,
                'scale.thousand':     properties.scaleThousand,
                'scale.point':        properties.scalePoint,
                'scale.decimals':     properties.scaleDecimals,
                'scale.labels.count': 5,
                'scale.units.pre':    properties.scaleUnitsPre,
                'scale.units.post':   properties.scaleUnitsPost
            }});

            // Draw the backgroundColor
            if (properties.backgroundColor !== 'transparent') {
                this.path(
                    'fs % fr % % % %',
                    properties.backgroundColor,
                    0,0,this.canvas.width, this.canvas.height
                );
            }








            //
            // Draw the background for the bar which is a similar
            // color to the bar - just faded out a bit. Now
            // (13/10/2024) you customise this color with the
            // backgroundFillColor property
            //
            if (properties.backgroundFill) {
                this.path(
                    'lw % b ',
                    this.properties.linewidth
                );
    
                // Draw the path for the bar
                this.pathBar({
                    startValue: this.min,
                    endValue:   this.max
                });

                // Finish the paths and stroke/fill it
                this.path(
                    'c s % f % sx % sy % sc % sb % f % sx 0 sy 0 sb 0 sc rgba(0,0,0,0) lw 1',
                    properties.colorsStroke,
                    properties.backgroundFillColor ? properties.backgroundFillColor: properties.colors[0],
                    properties.shadowOffsetx, properties.shadowOffsety, properties.shadow ? properties.shadowColor : 'rgba(0,0,0,0)', properties.shadowBlur,
                    properties.backgroundFillColor ? 'transparent' : 'rgba(255,255,255,0.85)'
                );
            }

















            //
            // Draw a single value on the meter
            //
            if (RGraph.isNumber(this.value)) {

                // Begin anew...
                this.context.beginPath();

                // Draw the path for the indicator bar (not
                // stroking or filling it just yet)
                this.pathBar({
                    startValue: this.min,
                    endValue: this.value
                });

                // Close the path and fill the bar with the
                // requested color
                this.path('c f %', properties.colors[0]);


                this.coords = [[
                    this.centerx,
                    this.centery,
                    this.radius,
                    this.getAngle(this.min),
                    this.getAngle(this.value),
                    this.width,
                    this.getAngle(this.value) - this.getAngle(this.min)
                ]];
            
            // Draw multiple values on the meter
            } else if (RGraph.isArray(this.value)) {

                for (var i=0,accValue=this.min; i<this.value.length; ++i) {

                    this.context.beginPath();
                    this.pathBar({
                        startValue: accValue,
                        endValue: accValue + this.value[i],
                        index: i
                    });
                    this.path('c f %', properties.colors[i]);

                    // Store the coordinates of this segment
                    this.coords.push([
                        this.centerx,
                        this.centery,
                        this.radius,
                        this.getAngle(accValue),
                        this.getAngle(accValue + this.value[i]),
                        this.width,
                        this.getAngle(accValue + this.value[i]) - this.getAngle(accValue)
                    ]);
                    
                    accValue += this.value[i];
                }
            }
        };








        //
        // A function to path the bar. This function only
        // PATHs the bar - it does not stroke or fill the
        // bar
        //
        // @param number start The start angle of the segment
        // @param number end   The end angle of the segment
        //
        this.pathBar = function (args)
        {
            // If the start value has been given instead of the
            // angle - work out the angle
            if (RGraph.isNumber(args.startValue)) {
                args.startAngle = this.getAngle(args.startValue);
            }

            // If the end value has been given instead of the
            // angle - work out the angle
            if (RGraph.isNumber(args.endValue)) {
                args.endAngle = this.getAngle(args.endValue);
            }








            // Get the end point for the middle of the END of the
            // meter
            var endpoint1 = RGraph.getRadiusEndPoint(
                this.centerx,
                this.centery,
                args.endAngle,
                this.radius - (this.width / 2)
            );

            // Get the end point for the middle of the START of the
            // meter
            var endpoint2 = RGraph.getRadiusEndPoint(
                this.centerx,
                this.centery,
                args.startAngle,
                this.radius - (this.width / 2)
            );

            // Draw the outside arc from the LHS to the RHS
            this.path(
                'a % % % % % false',
                this.centerx,
                this.centery,
                this.radius,
                args.startAngle,
                args.endAngle
            );

            // Draw the RHS rounded end if the variant is set
            // to rounded
            if (properties.variant === 'rounded') {
                this.path(
                    'a % % % % % false',
                    endpoint1[0],
                    endpoint1[1],
                    this.width / 2,
                    args.endAngle,
                    args.endAngle + RGraph.PI,
                );
            }
            
            // Draw the inner arc from the RHS back to the LHS
            this.path(
                ' a % % % % % true',
                this.centerx,
                this.centery,
                this.radius - this.width,
                args.endAngle,
                args.startAngle
            );
            
            // Draw the LHS rounded end if the variant is set
            // to rounded
            if (properties.variant === 'rounded') {
                this.path(
                    'a % % % % % %',
                    endpoint2[0],
                    endpoint2[1],
                    this.width / 2,
                    args.startAngle + RGraph.PI,
                    args.startAngle,
                    args.index > 0
                );
            }
        };







        //
        // The function that draws the labels
        //
        this.drawLabels = function ()
        {
            // Draw the labelsMin label
            if (properties.labelsMin) {
                //
                // Allow for a specific label
                //
                if (!RGraph.isNullish(properties.labelsMinSpecific)) {
                    var text = properties.labelsMinSpecific;
                } else {
    
                    var text = RGraph.numberFormat({
                        object:    this,
                        number:    this.scale2.min.toFixed(typeof properties.labelsMinDecimals === 'number'? properties.labelsMinDecimals : properties.scaleDecimals),
                        unitspre:  properties.labelsMinUnitsPre,
                        unitspost: properties.labelsMinUnitsPost,
                        point:     properties.labelsMinPoint,
                        thousand:  properties.labelsMinThousand
                    });
                }
    
    
                // Determine the horizontal and vertical alignment for the text
                if (properties.anglesStart === RGraph.PI) {
                    var halign = 'center';
                    var valign = 'top';
                
                } else if (properties.anglesStart <= RGraph.PI) {
                    var halign = 'left';
                    var valign = 'center';
                
                } else if (properties.anglesStart >= RGraph.PI) {
                    var halign = 'right';
                    var valign = 'center';
                }
    
                // Get the X/Y for the min label
                // cx, cy, angle, radius
                var xy = RGraph.getRadiusEndPoint(
                    this.centerx,
                    this.centery,
                    properties.anglesStart + properties.labelsMinOffsetAngle,
                    this.radius - (this.width / 2)
                );
                
                var textConf = RGraph.getTextConf({
                    object: this,
                    prefix: 'labelsMin'
                });
    
    
                // Draw the min label
                RGraph.text({                    
                    object: this,         
                    font:   textConf.font,
                    size:   textConf.size,
                    color:  textConf.color,
                    bold:   textConf.bold,
                    italic: textConf.italic,    
                    x:      xy[0] + properties.labelsMinOffsetx,
                    y:      xy[1] + properties.labelsMinOffsety,
                    valign: valign,
                    halign: halign,
                    text:   text
                });
            }









            // Draw the labelsMax label
            if (properties.labelsMax) {
                
                // Determine the horizontal and vertical alignment for the text
                if (properties.anglesEnd === RGraph.TWOPI) {
                    var halign = 'center';
                    var valign = 'top';
                
                } else if (properties.anglesEnd >= RGraph.TWOPI) {
                    var halign = 'right';
                    var valign = 'center';
                
                } else if (properties.anglesEnd <= RGraph.TWOPI) {
                    var halign = 'left';
                    var valign = 'center';
                }
    
    
    
                // Get the formatted max label number

                //
                // Allow for a specific label
                //
                if (!RGraph.isNullish(properties.labelsMaxSpecific)) {
                    var text = properties.labelsMaxSpecific;
                } else {
                    var text = RGraph.numberFormat({
                        object:    this,
                        number:    this.scale2.max.toFixed(typeof properties.labelsMaxDecimals === 'number'? properties.labelsMaxDecimals : properties.scaleDecimals),
                        unitspre:  properties.labelsMaxUnitsPre,
                        unitspost: properties.labelsMaxUnitsPost,
                        point:     properties.labelsMaxPoint,
                        thousand:  properties.labelsMaxThousand
                    });
                }
    
                // Get the X/Y for the max label
                // cx, cy, angle, radius
                var xy = RGraph.getRadiusEndPoint(
                    this.centerx,
                    this.centery,
                    properties.anglesEnd + properties.labelsMaxOffsetAngle,
                    this.radius - (this.width / 2)
                );
    
                var textConf = RGraph.getTextConf({
                    object: this,
                    prefix: 'labelsMax'
                });
    
                // Draw the max label
                RGraph.text({
                    
                    object: this,
         
                    font:   textConf.font,
                    size:   textConf.size,
                    color:  textConf.color,
                    bold:   textConf.bold,
                    italic: textConf.italic,
    
                    x: xy[0] + properties.labelsMaxOffsetx,
                    y: xy[1] + properties.labelsMaxOffsety,
                    valign: valign,
                    halign: halign,
                    text: text
                });
            }














            // Draw the big label in the center
            if (properties.labelsCenter) {
                var textConf = RGraph.getTextConf({
                    object: this,
                    prefix: 'labelsCenter'
                });
                
                //
                // Allow for a specific label
                //
                if (!RGraph.isNullish(properties.labelsCenterSpecific)) {
                    var text = properties.labelsCenterSpecific;
                } else {

                    var text = RGraph.numberFormat({
                        object:    this,
                        number:
                                   RGraph.isNumber(this.value)
                                       ? this.value.toFixed(   RGraph.isNumber(properties.labelsCenterDecimals) ? properties.labelsCenterDecimals : properties.scaleDecimals    )
                                       : this.value[properties.labelsCenterIndex].toFixed(
                                             RGraph.isNumber(properties.labelsCenterDecimals)
                                                 ? properties.labelsCenterDecimals
                                                 : properties.scaleDecimals
                                         ),
                        unitspre:  properties.labelsCenterUnitsPre,
                        unitspost: properties.labelsCenterUnitsPost,
                        point:     properties.labelsCenterPoint,
                        thousand:  properties.labelsCenterThousand
                    })
                }

                var ret = RGraph.text({
                    
                    object: this,

                    font:   textConf.font,
                    size:   textConf.size,
                    color:  textConf.color,
                    bold:   textConf.bold,
                    italic: textConf.italic,

                    x:          this.centerx + properties.labelsCenterOffsetx,
                    y:          this.centery + properties.labelsCenterOffsety,

                    valign:     properties.labelsCenterValign,
                    halign:     'center',
                    text:       text
                });
                
                // Allows the center label to fade in
                if (properties.labelsCenterFade && ret.node) {
                    ret.node.style.opacity = 0;
    
                    var delay = 25,
                        incr  = 0.05;
    
                    for (var i=0; i<20; ++i) {
                        (function (index)
                        {
                            setTimeout(function  ()
                            {
                                ret.node.style.opacity = incr * index;
                            }, delay * (index + 1));
                        })(i);
                    }
                }
            }
            
            // Draw the title
            RGraph.drawTitle(this);
        };








        //
        // Draws the background "grid"
        //
        this.drawBackgroundGrid = function ()
        {
            if (properties.backgroundGrid) {

                var margin      = properties.backgroundGridMargin;
                var outerRadius = this.radius + margin;
                var innerRadius = this.radius - this.width - margin;

                // Draw the background grid "circles"
                if (properties.backgroundGridCircles) {
                    
                    // Draw the outer arc
                    this.path(
                        'b lw % a % % % % % false',
                        properties.backgroundGridLinewidth,
                        this.centerx, this.centery,
                        outerRadius,
                        properties.anglesStart, properties.anglesEnd
                    );
        
                    // Draw the inner arc
                    this.path(
                        p = 'a % % % % % true c s %',
                        this.centerx, this.centery,
                        innerRadius, properties.anglesEnd, properties.anglesStart,
                        properties.backgroundGridColor
                    );
                }
                
                //
                // Draw the background grid radials
                //
                if (properties.backgroundGridRadials) {
                
                    // Calculate the radius increment
                    var increment = (properties.anglesEnd - properties.anglesStart) / properties.backgroundGridRadialsCount;
                    var angle     = properties.anglesStart;
    
                    for (var i=0; i<properties.backgroundGridRadialsCount; ++i) {

                        this.path(
                            ' b a % % % % % false a % % % % % false s %',
                            this.centerx,this.centery,innerRadius,angle,angle,
                            this.centerx,this.centery,outerRadius,angle,angle,
                            properties.backgroundGridColor
                        );

                        angle += increment;

                    }
                }                
            }
        };








        //
        // This function draws the scale
        //
        this.drawScale = function ()
        {
            if (properties.scaleVisible) {
            
                // Get the max value

                this.scale2 = RGraph.getScale({
                    object: this,
                    options: {
                        'scale.max':         properties.scaleMax || this.max,
                        'scale.strict':      true,
                        'scale.min':         properties.scaleMin || this.min,
                        'scale.thousand':    properties.scaleThousand,
                        'scale.point':       properties.scalePoint,
                        'scale.decimals':    properties.scaleDecimals,
                        'scale.labels.count':properties.scaleLabelsCount,
                        'scale.round':       false,
                        'scale.units.pre':   properties.scaleUnitsPre,
                        'scale.units.post':  properties.scaleUnitsPost,
                        'scale.formatter':   properties.scaleFormatter
                    }
                });



                //
                // Loop thru the number of labels
                //
                for (var i=0; i<this.scale2.labels.length; ++i) {
                    
                    var textConf = RGraph.getTextConf({
                        object: this,
                        prefix: 'scaleLabels'
                    });

                    var xy = RGraph.getRadiusEndPoint(
                        this.centerx,
                        this.centery,
                        properties.anglesStart + (((i+1) / this.scale2.labels.length) * (properties.anglesEnd - properties.anglesStart) ),
                        this.radius + (properties.backgroundGrid ? properties.backgroundGridMargin : 0) + textConf.size + properties.scaleLabelsOffsetr + 5
                    );

                    // Draw the label
                    RGraph.text({
                        object: this,
                        tag:    'scale',
                        font:   textConf.font,
                        size:   textConf.size,
                        color:  textConf.color,
                        bold:   textConf.bold,
                        italic: textConf.italic,
                        x: xy[0] + (properties.scaleLabelsOffsetx || 0),
                        y: xy[1] + (properties.scaleLabelsOffsety || 0),
                        valign: 'center',
                        halign: 'center',
                        text: this.scale2.labels[i]
                    });
                }










                //
                // Draw the minimum label
                //
                var xy = RGraph.getRadiusEndPoint(
                    this.centerx,
                    this.centery,
                    properties.anglesStart,
                    this.radius + (properties.backgroundGrid ? properties.backgroundGridMargin : 0) + textConf.size + properties.scaleLabelsOffsetr + 5
                );

                RGraph.text({
                    object: this,
                    font:   textConf.font,
                    size:   textConf.size,
                    color:  textConf.color,
                    bold:   textConf.bold,
                    italic: textConf.italic,
                    x:      xy[0] + (properties.scaleLabelsOffsetx || 0),
                    y:      xy[1] + (properties.scaleLabelsOffsety || 0),
                    valign: 'center',
                    halign: 'center',
                    text:   typeof properties.scaleFormatter === 'function'
                              ? (properties.scaleFormatter)({
                                    object:     this,
                                    number:     this.min,
                                    unitspre:   properties.scaleUnitsPre,
                                    unitspost:  properties.scaleUnitsPost,
                                    point:      properties.scalePoint,
                                    thousand:   properties.scaleThousand,
                                    formatter:  properties.scaleFormatter
                                })
                              : (properties.scaleUnitsPre || '') + (RGraph.isNumber(properties.scaleMin) ? properties.scaleMin : this.min).toFixed(properties.scaleDecimals).replace(/\./, properties.scalePoint) + (properties.scaleUnitsPost || '')
                });
            }
        };








        //
        // Returns the focused bar
        // 
        // @param event e The event object
        //
        this.getShape = function (e)
        {
            var mouseXY = RGraph.getMouseXY(e),
                mouseX  = mouseXY[0],
                mouseY  = mouseXY[1]

            // Loop through the coordinates checking for a match
            for (var i=0; i<this.coords.length; ++i) {

                if (RGraph.tooltipsHotspotIgnore(this, i)) {
                    continue;
                }
                
                // Draw the meter here but don't stroke or fill it
                // so that it can be tested with isPointInPath()
                this.context.beginPath();

                this.pathBar({
                    startAngle: this.coords[i][3],
                    endAngle: this.coords[i][4]
                });
    
    
    
                if (
                       this.context.isPointInPath(mouseX, mouseY)
                    && (this.properties.clip ? RGraph.clipTo.test(this, mouseX, mouseY) : true)
                   ) {
    
                    if (RGraph.parseTooltipText) {
                        var tooltip = RGraph.parseTooltipText(properties.tooltips, i);
                    }
    
                    return {
                        object: this,
                             x: this.coords[i][0],
                             y: this.coords[i][1],
                   radiusOuter: this.coords[i][2],
                   radiusInner: this.coords[i][2] - this.coords[i][5],
                         width: this.coords[i][5],
                    angleStart: this.coords[i][3],
                      angleEnd: this.coords[i][4],
                         index: i,
                       dataset: 0,
               sequentialIndex: i,
                       tooltip: typeof tooltip === 'string' ? tooltip : null
                    };
                }
            }
        };








        //
        // This function returns the value that the mouse is positioned at, regardless of
        // the actual indicated value.
        // 
        // @param object e The event object
        //
        this.getValue = function (e)
        {
            var mouseXY = RGraph.getMouseXY(e),
                mouseX  = mouseXY[0],
                mouseY  = mouseXY[1],
                angle   = RGraph.getAngleByXY(
                    this.centerx,
                    this.centery,
                    mouseX,
                    mouseY
                );
                
                if (
                    angle &&
                    mouseX >= this.centerx
                    && mouseY > this.centery
                    ) {
                    
                    angle += RGraph.TWOPI;
                }

            if (angle < properties.anglesStart && mouseX > this.centerx) { angle = properties.anglesEnd; }
            if (angle < properties.anglesStart) { angle = properties.anglesStart; }

            var value = (((angle - properties.anglesStart) / (properties.anglesEnd - properties.anglesStart)) * (this.max - this.min)) + this.min;

            value = Math.max(value, this.min);
            value = Math.min(value, this.max);

            return value;
        };








        //
        // Each object type has its own Highlight() function which highlights the appropriate shape
        // 
        // @param object shape The shape to highlight
        //
        this.highlight = function (shape)
        {
            // If the highlightFade property is not set then call
            // the highlight function multiple times when the
            // globalAlpha is set at varying levels of transparency
            // to fade the highlight in. If the variable is set,
            // however, then this call is probably a part of said
            // highlighting process so don't call ourselves
            // again - just highlight the chart.
            if (this.properties.highlightFade && !this.highlight.highlighting) {
            
                // Add a variable to the highlight function (this
                // function) to indicate that we're currently in
                // the process of highlighting.
                this.highlight.highlighting = true;
                
                var obj = this;
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 20);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 40);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 60);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 80);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 100);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 120);
                setTimeout(function() {obj.context.globalAlpha = 0.2; obj.highlight(shape); obj.context.globalAlpha = 1;}, 140);
                setTimeout(function() {obj.highlight.highlighting = false;}, 400);
            
                return;
            }

            RGraph.clipTo.callback(this, function (obj)
            {
                if (typeof obj.properties.highlightStyle === 'function') {
                    (obj.properties.highlightStyle)(shape);
                } else {
                    obj.context.beginPath();
                    
                    obj.pathBar({
                        startAngle: shape.angleStart,
                        endAngle:   shape.angleEnd,
                        index:      shape.index
                    });
    
                    obj.path(
                        'c f % s % lw 1',
                        obj.properties.highlightFill,
                        obj.properties.highlightStroke
                    );
                }
            });
        };








        //
        // The getObjectByXY() worker method. Don't call this call:
        // 
        // RGraph.ObjectRegistry.getObjectByXY(e)
        // 
        // @param object e The event object
        //
        this.getObjectByXY = function (e)
        {
            var [mx, my] = RGraph.getMouseXY(e),
                rounded  = properties.variant === 'rounded',
                cx       = this.centerx
                cy       = this.centery,
                start    = properties.anglesStart,
                end      = properties.anglesEnd,
                radius   = this.radius;

            // Draw a Path so that the coords can be tested
            // (but don't stroke/fill it
            this.path(
                'b a % % % % % false',
                cx,
                cy,
                radius,
                start - (rounded ? 0.25 : 0),
                end + (rounded ? 0.25 : 0)
            );

            this.path(
                'a % % % % % true',
                cx,
                cy,
                radius - this.width,
                end + (rounded ? 0.25 : 0),
                start - (rounded ? 0.25 : 0)
            );

            return this.context.isPointInPath(mx, my) ? this : null;
        };








        //
        // This function allows the progress to be  adjustable.
        // UPDATE: Not any more
        //
        this.allowAdjusting = function () {};








        //
        // This method handles the adjusting calculation for when the mouse is moved
        // 
        // @param object e The event object
        //
        this.adjusting_mousemove = function (e)
        {
            //
            // Handle adjusting for the HProgress
            //
            if (properties.adjustable && RGraph.Registry.get('adjusting') && RGraph.Registry.get('adjusting').uid == this.uid) {

                var value   = this.getValue(e);
                
                if (typeof value === 'number') {
    
                    // Fire the onadjust event
                    RGraph.fireCustomEvent(this, 'onadjust');

                    this.value = Number(value.toFixed(properties.scaleDecimals));
                    RGraph.redrawCanvas(this.canvas);
                }
            }
        };








        //
        // This function returns the appropriate angle (in radians)
        // for the given value.
        // 
        // @param  int value The Y value you want the angle for
        // @returm int       The angle
        //
        this.getAngle = function (value)
        {
            if (value > this.max) value = this.max;
            if (value < this.min) value = this.min;

            //if (value > (this.max - this.min) || value < this.min) {
            //    return null;
            //}

            var angle = ( (value - this.min) / (this.max - this.min)) * (properties.anglesEnd - properties.anglesStart)
                angle += properties.anglesStart;

            return angle;
        };








        //
        // This returns true/false as to whether the cursor is
        // over the chart area. The cursor does not necessarily
        // have to be over the bar itself - just the bar or the
        // background to the bar.
        //
        this.overChartArea = function  (e)
        {
            var mouseXY = RGraph.getMouseXY(e),
                mouseX  = mouseXY[0],
                mouseY  = mouseXY[1]

            // Draw the background to the Progress but don't stroke or fill it
            // so that it can be tested with isPointInPath()
            this.context.beginPath();
            
            this.pathBar({
                startValue: this.min,
                endValue:   this.max
            });


            return this.context.isPointInPath(mouseX, mouseY);
        };








        //
        // 
        //
        this.parseColors = function ()
        {
            // Save the original colors so that they can be restored when the canvas is reset
            if (this.original_colors.length === 0) {
                this.original_colors.backgroundColor = RGraph.arrayClone(properties.backgroundColor);
                this.original_colors.colors          = RGraph.arrayClone(properties.colors);
                this.original_colors.keyColors       = RGraph.arrayClone(properties.keyColors);
            }

            properties.colors[0] = this.parseSingleColorForGradient(properties.colors[0]);
            properties.colors[1] = this.parseSingleColorForGradient(properties.colors[1]);


            
            // keyColors
            var colors = properties.keyColors;
            if (colors) {
                for (var i=0; i<colors.length; ++i) {
                    colors[i] = this.parseSingleColorForGradient(colors[i]);
                }
            }

            properties.colorsStroke      = this.parseSingleColorForGradient(properties.colorsStroke);
            properties.backgroundColor = this.parseSingleColorForGradient(properties.backgroundColor);
        };








        //
        // Use this function to reset the object to the post-constructor state. Eg reset colors if
        // need be etc
        //
        this.reset = function ()
        {
        };








        //
        // This parses a single color value
        //
        this.parseSingleColorForGradient = function (color)
        {
            if (!color || typeof color != 'string') {
                return color;
            }
    
            if (color.match(/^gradient\((.*)\)$/i)) {

                // Allow for JSON gradients
                if (color.match(/^gradient\(({.*})\)$/i)) {
                    return RGraph.parseJSONGradient({object: this, def: RegExp.$1});
                }

                var parts = RegExp.$1.split(':');
    
                // Create the gradient
                var grad = this.context.createLinearGradient(properties.marginLeft,0,this.canvas.width - properties.marginRight,0);
    
                var diff = 1 / (parts.length - 1);
    
                grad.addColorStop(0, RGraph.trim(parts[0]));
    
                for (var j=1,len=parts.length; j<len; ++j) {
                    grad.addColorStop(j * diff, RGraph.trim(parts[j]));
                }
                
                return grad ? grad : color;
            }
    
            return grad ? grad : color;
        };








        //
        // This function handles highlighting an entire data-series for the interactive
        // key
        // 
        // @param int index The index of the data series to be highlighted
        //
        this.interactiveKeyHighlight = function (index)
        {
            if (!this.coords[index]) {
                return;
            }

            var coords = this.coords[index];

            // Draw some highlight over the top of the segment
            this.context.beginPath();

            this.pathBar({
                startAngle: coords[3],
                endAngle: coords[4],
                index: index
            });
            
            this.path(
                's % f %',
                properties.keyInteractiveHighlightChartStroke,
                properties.keyInteractiveHighlightChartFill
            );
        };








        //
        // Using a function to add events makes it easier to facilitate method chaining
        // 
        // @param string   type The type of even to add
        // @param function func 
        //
        this.on = function (type, func)
        {
            if (type.substr(0,2) !== 'on') {
                type = 'on' + type;
            }
            
            if (typeof this[type] !== 'function') {
                this[type] = func;
            } else {
                RGraph.addCustomEventListener(this, type, func);
            }
    
            return this;
        };








        //
        // Used in chaining. Runs a function there and then - not waiting for
        // the events to fire (eg the onbeforedraw event)
        // 
        // @param function func The function to execute
        //
        this.exec = function (func)
        {
            func(this);
            
            return this;
        };








        //
        // This function runs once only
        // (put at the end of the file (before any effects))
        //
        this.firstDrawFunc = function ()
        {
        };







        //
        // Semi-Circular Progress bar Grow effect
        // 
        // @param object obj The chart object
        //
        this.grow = function ()
        {
            // Cancel any stop request if one is pending
            this.cancelStopAnimation();

            var obj           = this,
                opt           = arguments[0] || {},
                numFrames     = opt.frames || 60,
                frame         = 0,
                callback      = arguments[1] || function () {};
            
            // Do this if showing a single number
            if (RGraph.isNumber(this.value)) {

                if (RGraph.isNullish(this.currentValue)) {
                    this.currentValue = this.min;
                }
                
                var initial_value = this.currentValue,
                    diff          = this.value - Number(this.currentValue),
                    increment     = diff  / numFrames;
            
            // Do this if showing multiple numbers
            } else {
            
                var initial_value = [],
                    diff          = [],
                    increment     = [];
                
                for (var i=0; i<this.value.length; ++i) {
                    initial_value[i] = RGraph.isNullish(this.currentValue) ? 0 : this.currentValue[i];
                    diff[i]          = this.value[i] - Number(RGraph.isNullish(this.currentValue) ? 0 : this.currentValue[i]);
                    increment[i]     = diff[i]  / numFrames;
                }
            }



            function iterator ()
            {
                if (obj.stopAnimationRequested) {
    
                    // Reset the flag
                    obj.stopAnimationRequested = false;
    
                    return;
                }

                frame++;
    
                if (frame <= numFrames) {
    
                    if (RGraph.isNumber(obj.value)) {
                        obj.value = initial_value + (increment * frame);
                    } else {
                        for (var i=0; i<obj.value.length; ++i) {
                            obj.value[i] = initial_value[i] + (increment[i] * frame);
                        }
                    }
    
                    RGraph.clear(obj.canvas);
                    RGraph.redrawCanvas(obj.canvas);
                    
                    RGraph.Effects.updateCanvas(iterator);
                } else {
                    callback(obj);
                }
            }
            
            iterator();
            
            return this;
        };








        //
        // Couple of functions that allow you to control the
        // animation effect
        //
        this.stopAnimation = function ()
        {
            this.stopAnimationRequested = true;
        };

        this.cancelStopAnimation = function ()
        {
            this.stopAnimationRequested = false;
        };








        //
        // A worker function that handles Bar chart specific tooltip substitutions
        //
        this.tooltipSubstitutions = function (opt)
        {
            return {
                  index: opt.index,
                dataset: 0,
        sequentialIndex: opt.index,
                  value: this.value,
                 values: [this.value]
            };
        };








        //
        // A worker function that returns the correct color/label/value
        //
        // @param object specific The indexes that are applicable
        // @param number index    The appropriate index
        //
        this.tooltipsFormattedCustom = function (specific, index)
        {
            var color = (properties.tooltipsFormattedKeyColors && properties.tooltipsFormattedKeyColors[specific.index]) ? properties.tooltipsFormattedKeyColors[specific.index] : properties.colors[specific.index];
            var label = (properties.tooltipsFormattedKeyLabels && properties.tooltipsFormattedKeyLabels[specific.index]) ? properties.tooltipsFormattedKeyLabels[specific.index] : '';
            var value = specific.values[0][specific.index]


            return {
                label: label,
                color: color,
                value: value
            };
        };








        //
        // This allows for static tooltip positioning
        //
        this.positionTooltipStatic = function (args)
        {
            var obj         = args.object,
                e           = args.event,
                tooltip     = args.tooltip,
                index       = args.index,
                canvasXY    = RGraph.getCanvasXY(obj.canvas)
                shape       = this.getShape(e),
                angle       = ((shape.angleEnd - shape.angleStart) / 2) + shape.angleStart,
                scaleFactor = RGraph.getScaleFactor(this);

            var endpoint = RGraph.getRadiusEndPoint(
                shape.x,
                shape.y,
                angle,
                ((shape.radiusOuter - shape.radiusInner) / 2) + shape.radiusInner
            );


            // Position the tooltip in the X direction
            args.tooltip.style.left = (
                  canvasXY[0]                           // The X coordinate of the canvas
                + (endpoint[0] / 2)                     // The X coordinate of the bar on the chart
                - (tooltip.offsetWidth / scaleFactor)   // Subtract half of the tooltip width
                + obj.properties.tooltipsOffsetx        // Add any user defined offset
            ) + 'px';

            args.tooltip.style.top  = (
                  canvasXY[1]                    // The Y coordinate of the canvas
                + (endpoint[1] / scaleFactor)    // The Y coordinate of the bar on the chart
                - tooltip.offsetHeight           // The height of the tooltip
                + obj.properties.tooltipsOffsety // Add any user defined offset
                - 10                             // Account for the pointer
            ) + 'px';
        };








        //
        // This returns the relevant value for the formatted key
        // macro %{value}. THIS VALUE SHOULD NOT BE FORMATTED.
        //
        // @param number index The index in the dataset to get
        //                     the value for
        //
        this.getKeyValue = function (index)
        {
            return RGraph.isArray(this.properties.keyFormattedValueSpecific) && RGraph.isNumber(this.properties.keyFormattedValueSpecific[index])
                    ? this.properties.keyFormattedValueSpecific[index]
                    : (RGraph.isArray(this.value) ? this.value[index] : this.value);
        };








        //
        // Returns how many data-points there should be when a string
        // based key property has been specified. For example, this:
        //
        // key: '%{property:_labels[%{index}]} %{value_formatted}'
        //
        // ...depending on how many bits of data ther is might get
        // turned into this:
        //
        // key: [
        //     '%{property:_labels[%{index}]} %{value_formatted}',
        //     '%{property:_labels[%{index}]} %{value_formatted}',
        //     '%{property:_labels[%{index}]} %{value_formatted}',
        //     '%{property:_labels[%{index}]} %{value_formatted}',
        //     '%{property:_labels[%{index}]} %{value_formatted}',
        // ]
        //
        // ... ie in that case there would be 4 data-points so the
        // template is repeated 4 times.
        //
        this.getKeyNumDatapoints = function ()
        {
            return this.value.length;
        };








        //
        // This function handles clipping to scale values. Because
        // each chart handles scales differently, a worker function
        // is needed instead of it all being done centrally in the
        // RGraph.clipTo.start() function.
        //
        // @param string clip The clip string as supplied by the
        //                    user in the chart configuration
        //
        this.clipToScaleWorker = function (clip)
        {
            // The Regular expression is actually done by the
            // calling RGraph.clipTo.start() function  in the core
            // library
            if (RegExp.$1 === 'min') from = this.min; else from = Number(RegExp.$1);
            if (RegExp.$2 === 'max') to   = this.max; else to   = Number(RegExp.$2);

            var r1 = this.getAngle(from),
                r2 = this.getAngle(to);
            
            // Change the angle if the number is "max"
            if (RegExp.$2 === 'max') {
                r2 = RGraph.TWOPI + RGraph.HALFPI;
            }
        
            // Change the angle if the number is "min"
            if (RegExp.$1 === 'min') {
                r1 = RGraph.HALFPI;
            }

            this.path(
                'sa b m % % a % % % % % false c cl',
                this.centerx, this.centery,
                this.centerx, this.centery,
                Math.max(this.canvas.width, this.canvas.height),
                r1, r2
            );
        };








        //
        // This function handles TESTING clipping to scale values.
        // Because each chart handles scales differently, a worker
        // function is needed instead of it all being done centrally
        // in the RGraph.clipTo.start() function.
        //
        // @param string clip The clip string as supplied by the
        //                    user in the chart configuration
        //
        this.clipToScaleTestWorker = function (clip)
        {
            // The Regular expression is actually done by the
            // calling RGraph.clipTo.start() function  in the core
            // library
            if (RegExp.$1 === 'min') from = this.min; else from = Number(RegExp.$1);
            if (RegExp.$2 === 'max') to   = this.max; else to   = Number(RegExp.$2);

            var r1 = this.getAngle(from),
                r2 = this.getAngle(to);
            
            // Change the angle if the number is "max"
            if (RegExp.$2 === 'max') {
                r2 = RGraph.TWOPI + RGraph.HALFPI;
            }
        
            // Change the angle if the number is "min"
            if (RegExp.$1 === 'min') {
                r1 = RGraph.HALFPI;
            }

            this.path(
                'b m % % a % % % % % false c',
                this.centerx, this.centery,
                this.centerx, this.centery,
                Math.max(this.canvas.width, this.canvas.height),
                r1, r2
            );
        };








        //
        // Scale worker function that increases the size of
        // properties as required. Called by the RGraph.scale()
        // function.
        //
        // @param string name The name of the property
        // @param mixed value The value of the property
        //
        this.scalePropertiesWorker = function (name, value)
        {
            var scaleFactor = RGraph.getScaleFactor(this);

            if (name === 'titleY') {
                value = String(parseFloat(value) * scaleFactor);
            
            } else if (name === 'titleX') {
                value = String(parseFloat(value) * scaleFactor);
            }

            return value;
        };








        //
        // The chart is now always registered
        //
        RGraph.register(this);








        //
        // This is the 'end' of the constructor so if the first argument
        // contains configuration data - handle that.
        //
        RGraph.parseObjectStyleConfig(this, conf.options);
    };