// version: 2017-11-25
    /**
    * o--------------------------------------------------------------------------------o
    * | This file is part of the RGraph package - you can learn more at:               |
    * |                                                                                |
    * |                          http://www.rgraph.net                                 |
    * |                                                                                |
    * | RGraph is licensed under the Open Source MIT license. That means that it's     |
    * | totally free to use and there are no restrictions on what you can do with it!  |
    * o--------------------------------------------------------------------------------o
    */

    RGraph = window.RGraph || {isRGraph: true};

    /**
    * The horizontal bar chart constructor. The horizontal bar is a minor variant
    * on the bar chart. If you have big labels, this may be useful as there is usually
    * more space available for them.
    * 
    * @param object canvas The canvas object
    * @param array  data   The chart data
    */
    RGraph.HBar = function (conf)
    {
        /**
        * Allow for object config style
        */
        if (   typeof conf === 'object'
            && typeof conf.data === 'object'
            && typeof conf.id === 'string') {

            var id                        = conf.id
            var canvas                    = document.getElementById(id);
            var data                      = conf.data;
            var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
        
        } else {
        
            var id     = conf;
            var canvas = document.getElementById(id);
            var data   = arguments[1];
        }


        this.id                = id;
        this.canvas            = canvas;
        this.context           = this.canvas.getContext ? this.canvas.getContext("2d", {alpha: (typeof id === 'object' && id.alpha === false) ? false : true}) : null;
        this.canvas.__object__ = this;
        this.data              = data;
        this.type              = 'hbar';
        this.isRGraph          = true;
        this.uid               = RGraph.CreateUID();
        this.canvas.uid        = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
        this.colorsParsed      = false;
        this.coords            = [];
        this.coords2           = [];
        this.coordsText        = [];
        this.original_colors   = [];
        this.firstDraw         = true; // After the first draw this will be false



        
        this.max = 0;
        this.stackedOrGrouped  = false;

        // Default properties
        this.properties =
        {
            'chart.gutter.left':            75,
            'chart.gutter.left.autosize':   false,
            'chart.gutter.right':           25,
            'chart.gutter.top':             25,
            'chart.gutter.bottom':          25,
            'chart.background.grid':        true,
            'chart.background.grid.color':  '#ddd',
            'chart.background.grid.width':  1,
            'chart.background.grid.hsize':  25,
            'chart.background.grid.vsize':  25,
            'chart.background.barcolor1':   'rgba(0,0,0,0)',
            'chart.background.barcolor2':   'rgba(0,0,0,0)',
            'chart.background.grid.hlines': true,
            'chart.background.grid.vlines': true,
            'chart.background.grid.border': true,
            'chart.background.grid.autofit':true,
            'chart.background.grid.autofit.align':true,
            'chart.background.grid.autofit.numhlines': null,
            'chart.background.grid.autofit.numvlines': 5,
            'chart.background.grid.dashed': false,
            'chart.background.grid.dotted': false,
            'chart.background.color':       null,
            'chart.linewidth':              1,
            'chart.title':                  '',
            'chart.title.background':       null,
            'chart.title.xaxis':            '',
            'chart.title.xaxis.bold':       true,
            'chart.title.xaxis.size':       null,
            'chart.title.xaxis.font':       null,
            'chart.title.yaxis':            '',
            'chart.title.yaxis.bold':       true,
            'chart.title.yaxis.size':       null,
            'chart.title.yaxis.font':       null,
            'chart.title.yaxis.color':      null,
            'chart.title.xaxis.pos':        null,
            'chart.title.yaxis.pos':        0.8,
            'chart.title.yaxis.x':          null,
            'chart.title.yaxis.y':          null,
            'chart.title.xaxis.x':          null,
            'chart.title.xaxis.y':          null,
            'chart.title.xaxis.color':      null,
            'chart.title.hpos':             null,
            'chart.title.vpos':             null,
            'chart.title.bold':             true,
            'chart.title.font':             null,
            'chart.title.x':                null,
            'chart.title.y':                null,
            'chart.title.halign':           null,
            'chart.title.valign':           null,
            'chart.text.size':              12,
            'chart.text.color':             'black',
            'chart.text.font':              'Segoe UI, Arial, Verdana, sans-serif',
            'chart.text.angle':             0,
            'chart.text.accessible':               true,
            'chart.text.accessible.overflow':      'visible',
            'chart.text.accessible.pointerevents': true,
            'chart.colors':                 ['red', 'blue', 'green', 'pink', 'yellow', 'cyan', 'navy', 'gray', 'black'],
            'chart.colors.sequential':      false,
            'chart.xlabels.specific':       null,
            'chart.labels':                 [],
            'chart.labels.bold':            false,
            'chart.labels.color':           null,

            'chart.labels.above':           false,
            'chart.labels.above.decimals':  0,
            'chart.labels.above.specific':  null,
            'chart.labels.above.color':     null,
            'chart.labels.above.units.pre':  '',
            'chart.labels.above.units.post': '',
            'chart.labels.above.font':       null,
            'chart.labels.above.size':       null,
            'chart.labels.above.bold':       false,
            'chart.labels.above.italic':     false,

            'chart.labels.offsetx':  0,
            'chart.labels.offsety':  0,
            'chart.xlabels.offsetx':  0,
            'chart.xlabels.offsety':  0,
            'chart.xlabels':                true,
            'chart.xlabels.count':          5,
            'chart.contextmenu':            null,
            'chart.key':                    null,
            'chart.key.background':         'white',
            'chart.key.position':           'graph',
            'chart.key.halign':             'right',
            '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': false,
            'chart.key.position.x':         null,
            'chart.key.position.y':         null,
            'chart.key.color.shape':        'square',
            'chart.key.rounded':            true,
            'chart.key.linewidth':          1,
            'chart.key.colors':             null,
            'chart.key.interactive':        false,
            'chart.key.interactive.highlight.chart.stroke': 'black',
            'chart.key.interactive.highlight.chart.fill':'rgba(255,255,255,0.7)',
            'chart.key.interactive.highlight.label':'rgba(255,0,0,0.2)',
            'chart.key.text.color':         'black',
            'chart.units.pre':              '',
            'chart.units.post':             '',
            'chart.units.ingraph':          false,
            'chart.strokestyle':            'rgba(0,0,0,0)',
            'chart.xmin':                   0,
            'chart.xmax':                   0,
            'chart.axis.color':             'black',
            'chart.shadow':                 false,
            'chart.shadow.color':           '#666',
            'chart.shadow.blur':            3,
            'chart.shadow.offsetx':         3,
            'chart.shadow.offsety':         3,
            'chart.vmargin':                2,
            'chart.vmargin.grouped':        2,
            'chart.grouping':               'grouped',
            'chart.tooltips':               null,
            'chart.tooltips.event':         'onclick',
            'chart.tooltips.effect':        'fade',
            'chart.tooltips.css.class':     'RGraph_tooltip',
            'chart.tooltips.highlight':     true,
            'chart.highlight.fill':         'rgba(255,255,255,0.7)',
            'chart.highlight.stroke':       'rgba(0,0,0,0)',
            'chart.highlight.style':        null,
            'chart.annotatable':            false,
            'chart.annotate.color':         'black',
            'chart.zoom.factor':            1.5,
            'chart.zoom.fade.in':           true,
            'chart.zoom.fade.out':          true,
            'chart.zoom.hdir':              'right',
            'chart.zoom.vdir':              'down',
            'chart.zoom.frames':            25,
            'chart.zoom.delay':             16.666,
            'chart.zoom.shadow':            true,
            'chart.zoom.background':        true,
            'chart.zoom.action':            'zoom',
            'chart.resizable':              false,
            'chart.resize.handle.adjust':   [0,0],
            'chart.resize.handle.background': null,
            'chart.scale.point':            '.',
            'chart.scale.thousand':         ',',
            'chart.scale.decimals':         null,
            'chart.scale.zerostart':        true,
            'chart.noredraw':               false,
            'chart.events.click':           null,
            'chart.events.mousemove':       null,
            'chart.noxaxis':                false,
            'chart.noyaxis':                false,
            'chart.noaxes':                 false,
            'chart.noxtickmarks':           false,
            'chart.noytickmarks':           false,
            'chart.numyticks':              data.length,
            'chart.numxticks':              10,
            'chart.variant':                'hbar',
            'chart.variant.threed.angle':   0.1,
            'chart.variant.threed.offsetx': 10,
            'chart.variant.threed.offsety': 5,
            'chart.variant.threed.xaxis':   true,
            'chart.variant.threed.yaxis':   true,
            'chart.yaxispos':               'left',
            'chart.variant':                'hbar',
            'chart.clearto':                'rgba(0,0,0,0)',
            'chart.adjustable':             false,
            'chart.adjustable.only':        null
        }

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

        // This loop is used to check for stacked or grouped charts and now
        // also to convert strings to numbers. And now also undefined values
        // (29/07/2016
        for (i=0,len=this.data.length; i<len; ++i) {
            if (typeof this.data[i] == 'object' && !RGraph.isNull(this.data[i])) {
                
                this.stackedOrGrouped = true;
                
                for (var j=0,len2=this.data[i].length; j<len2; ++j) {
                    if (typeof this.data[i][j] === 'string') {
                        this.data[i][j] = parseFloat(this.data[i][j]);
                    }
                }

            } else if (typeof this.data[i] == 'string') {
                this.data[i] = parseFloat(this.data[i]) || 0;
            
            } else if (typeof this.data[i] === 'undefined') {
                this.data[i] = null;
            }
        }


        /**
        * Create the dollar objects so that functions can be added to them
        */
        var linear_data = RGraph.arrayLinearize(data);
        for (var i=0,len=linear_data.length; i<len; ++i) {
            this['$' + i] = {};
        }



        /**
        * Create the linear data array
        */
        this.data_arr = RGraph.arrayLinearize(this.data);


        /**
        * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
        * done already
        */
        if (!this.canvas.__rgraph_aa_translated__) {

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




        // Short variable names
        var RG   = RGraph,
            ca   = this.canvas,
            co   = ca.getContext('2d'),
            prop = this.properties,
            pa2  = RG.path2,
            win  = window,
            doc  = document,
            ma   = Math
        
        
        
        /**
        * "Decorate" the object with the generic effects if the effects library has been included
        */
        if (RG.Effects && typeof RG.Effects.decorate === 'function') {
            RG.Effects.decorate(this);
        }




        /**
        * A setter
        * 
        * @param name  string The name of the property to set
        * @param value mixed  The value of the property
        */
        this.set =
        this.Set = function (name)
        {
            var value = typeof arguments[1] === 'undefined' ? null : arguments[1];

            /**
            * the number of arguments is only one and it's an
            * object - parse it for configuration data and return.
            */
            if (arguments.length === 1 && typeof name === 'object') {
                RG.parseObjectStyleConfig(this, name);
                return this;
            }



    
            /**
            * This should be done first - prepend the propertyy name with "chart." if necessary
            */
            if (name.substr(0,6) != 'chart.') {
                name = 'chart.' + name;
            }
            
            
            
            // Convert uppercase letters to dot+lower case letter
            while(name.match(/([A-Z])/)) {
                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
            }
    
            if (name == 'chart.labels.abovebar') {
                name = 'chart.labels.above';
            }

            prop[name] = value;
    
            return this;
        };




        /**
        * A getter
        * 
        * @param name  string The name of the property to get
        */
        this.get =
        this.Get = function (name)
        {
            /**
            * This should be done first - prepend the property name with "chart." if necessary
            */
            if (name.substr(0,6) != 'chart.') {
                name = 'chart.' + name;
            }
            
            // Convert uppercase letters to dot+lower case letter
            while(name.match(/([A-Z])/)) {
                name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
            }


            if (name == 'chart.labels.abovebar') {
                name = 'chart.labels.above';
            }

            return prop[name];
        };




        /**
        * The function you call to draw the bar chart
        */
        this.draw =
        this.Draw = function ()
        {
            /**
            * Fire the onbeforedraw event
            */
            RG.fireCustomEvent(this, 'onbeforedraw');


            //
            // Check that the bHBar isn't stacked with adjusting enabled 
            //
            if (prop['chart.adjustable'] && prop['chart.grouping'] === 'stacked') {
                alert('[RGRAPH] The HBar does not support stacked charts with adjusting');
            }

            //
            // If the chart is 3d then angle it it
            //

            if (prop['chart.variant'] === '3d') {
                
                if (prop['chart.text.accessible']) {
                    // Nada
                } else {
                    co.setTransform(1,prop['chart.variant.threed.angle'],0,1,0.5,0.5);
                }
                
                // Enlarge the gutter if its 25
                if (prop['chart.gutter.bottom'] === 25) {
                    this.set('gutterBottom', 80);
                }
            }



    
            /**
            * Parse the colors. This allows for simple gradient syntax
            */
            if (!this.colorsParsed) {
                this.parseColors();
                
                // Don't want to do this again
                this.colorsParsed = true;
            }
            
            
            
            
            
            
            /**
            * Accomodate autosizing the left gutter
            */
            if (prop['chart.gutter.left.autosize']) {
                var len    = 0;
                var labels = prop['chart.labels'];
                var font   = prop['chart.text.font'];
                var size   = prop['chart.text.size'];

                for (var i=0; i<labels.length; i+=1) {
                    var length = RG.measureText(labels[i], false, font, size)[0] || 0
                    len = ma.max(len, length);
                }
                
                prop['chart.gutter.left'] = len + 10;
            }
            
            
            
            
            
            
            
            
            
            
            
    
    
            /**
            * This is new in May 2011 and facilitates indiviual gutter settings,
            * eg chart.gutter.left
            */
            this.gutterLeft   = prop['chart.gutter.left'];
            this.gutterRight  = prop['chart.gutter.right'];
            this.gutterTop    = prop['chart.gutter.top'];
            this.gutterBottom = prop['chart.gutter.bottom'];

            


            /**
            * Stop the coords array from growing uncontrollably
            */
            this.coords     = [];
            this.coords2    = [];
            this.coordsText = [];
            this.max        = 0;
    
            /**
            * Check for chart.xmin in stacked charts
            */
            if (prop['chart.xmin'] > 0 && prop['chart.grouping'] == 'stacked') {
                alert('[HBAR] Using chart.xmin is not supported with stacked charts, resetting chart.xmin to zero');
                this.Set('chart.xmin', 0);
            }
    
            /**
            * Work out a few things. They need to be here because they depend on things you can change before you
            * call Draw() but after you instantiate the object
            */
            this.graphwidth     = ca.width - this.gutterLeft - this.gutterRight;
            this.graphheight    = ca.height - this.gutterTop - this.gutterBottom;
            this.halfgrapharea  = this.grapharea / 2;
            this.halfTextHeight = prop['chart.text.size'] / 2;
            this.halfway        = ma.round((this.graphwidth / 2) + this.gutterLeft)
    
    
    
    
    





            // Progressively Draw the chart
            RG.Background.draw(this);
    
            this.drawbars();
            this.drawAxes();
            this.drawLabels();
    
    
            // Draw the key if necessary
            if (prop['chart.key'] && prop['chart.key'].length) {
                RG.DrawKey(this, prop['chart.key'], prop['chart.colors']);
            }
    
    
    
            /**
            * Setup the context menu if required
            */
            if (prop['chart.contextmenu']) {
                RG.ShowContext(this);
            }


    
            /**
            * Draw "in graph" labels
            */
            RG.DrawInGraphLabels(this);
    
            
            /**
            * This function enables resizing
            */
            if (prop['chart.resizable']) {
                RG.AllowResizing(this);
            }
    
    
            /**
            * This installs the event listeners
            */
            RG.InstallEventListeners(this);
    

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



            /**
            * Fire the RGraph ondraw event
            */
            RG.FireCustomEvent(this, 'ondraw');

            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 draws the axes
        */
        this.drawAxes =
        this.DrawAxes = function ()
        {
            var halfway = this.halfway






            co.beginPath();
                
                co.lineWidth   = prop['chart.axis.linewidth'] ? prop['chart.axis.linewidth'] + 0.001 : 1.001;
                co.strokeStyle = prop['chart.axis.color'];




                // Draw the Y axis
                if (prop['chart.noyaxis'] == false && prop['chart.noaxes'] == false) {
                    if (prop['chart.yaxispos'] == 'center') {
                        co.moveTo(halfway, this.gutterTop);
                        co.lineTo(halfway, ca.height - this.gutterBottom);
                    
                    } else if (prop['chart.yaxispos'] == 'right') {
                        co.moveTo(ca.width - this.gutterRight, this.gutterTop);
                        co.lineTo(ca.width - this.gutterRight, ca.height - this.gutterBottom);
                    
                    } else {
                        co.moveTo(this.gutterLeft, this.gutterTop);
                        co.lineTo(this.gutterLeft, ca.height - this.gutterBottom);
                    }
                }
    
                // Draw the X axis
                if (prop['chart.noxaxis'] == false && prop['chart.noaxes'] == false) {
                    co.moveTo(this.gutterLeft +0.001, ca.height - this.gutterBottom + 0.001);
                    co.lineTo(ca.width - this.gutterRight + 0.001, ca.height - this.gutterBottom + 0.001);
                }
    
                // Draw the Y tickmarks
                if (   prop['chart.noytickmarks'] == false
                    && prop['chart.noyaxis'] == false
                    && prop['chart.numyticks'] > 0
                    && prop['chart.noaxes'] == false
                   ) {
        
                    var yTickGap = (ca.height - this.gutterTop - this.gutterBottom) / (prop['chart.numyticks'] > 0 ? prop['chart.numyticks'] : this.data.length);
            
                    for (y=this.gutterTop; y<(ca.height - this.gutterBottom - 1); y+=yTickGap) {
                        if (prop['chart.yaxispos'] == 'center') {
                            co.moveTo(halfway + 3, ma.round(y));
                            co.lineTo(halfway  - 3, ma.round(y));

                        } else if (prop['chart.yaxispos'] == 'right') {
                            co.moveTo(ca.width - this.gutterRight, ma.round(y));
                            co.lineTo(ca.width - this.gutterRight + 3, ma.round(y));

                        } else {
                            co.moveTo(this.gutterLeft, ma.round(y));
                            co.lineTo( this.gutterLeft  - 3, ma.round(y));
                        }
                    }
                    
                    // If the X axis isn't being shown draw the end tick
                    if (prop['chart.noxaxis'] == true) {
                        if (prop['chart.yaxispos'] == 'center') {
                            co.moveTo(halfway + 3, ma.round(y));
                            co.lineTo(halfway  - 3, ma.round(y));
                        
                        } else if (prop['chart.yaxispos'] == 'right') {
                            co.moveTo(ca.width - this.gutterRight, ma.round(y));
                            co.lineTo(ca.width - this.gutterRight + 3, ma.round(y));

                        } else {
                            co.moveTo(this.gutterLeft, ma.round(y));
                            co.lineTo( this.gutterLeft  - 3, ma.round(y));
                        }
                    }
                }
        
        
                // Draw the X tickmarks
                if (   prop['chart.noxtickmarks'] == false
                    && prop['chart.noxaxis'] == false
                    && prop['chart.numxticks'] > 0
                    && prop['chart.noaxes'] == false) {

                    xTickGap = (ca.width - this.gutterLeft - this.gutterRight ) / prop['chart.numxticks'];
                    yStart   = ca.height - this.gutterBottom;
                    yEnd     = (ca.height - this.gutterBottom) + 3;





                    var i = prop['chart.numxticks']
                    
                    while(i--) {

                        var x   = ca.width - this.gutterRight - (i * xTickGap);
                        
                        if (prop['chart.yaxispos'] === 'right') {
                            x -= xTickGap;
                        }

                        co.moveTo(ma.round(x), yStart);
                        co.lineTo(ma.round(x), yEnd);
                    }



                    if (prop['chart.yaxispos'] === 'center') {
                        var i = 5; while (i--) {
                            var x   = this.gutterLeft + (xTickGap * i);

                            co.moveTo(ma.round(x), yStart);
                            co.lineTo(ma.round(x), yEnd);
                            
                        }
                    }





                    // If the Y axis isn't being shown draw the end tick
                    if (prop['chart.noyaxis'] == true) {
                        co.moveTo(this.gutterLeft, ma.round(yStart));
                        co.lineTo( this.gutterLeft, ma.round(yEnd));
                    }
                }
            co.stroke();
                
            /**
            * Reset the linewidth
            */
            co.lineWidth = 1;
        };




        /**
        * This draws the labels for the graph
        */
        this.drawLabels =
        this.DrawLabels = function ()
        {
            var units_pre  = prop['chart.units.pre'],
                units_post = prop['chart.units.post'],
                text_size  = prop['chart.text.size'],
                font       = prop['chart.text.font'],
                offsetx    = prop['chart.xlabels.offsetx'],
                offsety    = prop['chart.xlabels.offsety']
    
    
    
            /**
            * Set the units to blank if they're to be used for ingraph labels only
            */
            if (prop['chart.units.ingraph']) {
                units_pre  = '';
                units_post = '';
            }
    
    
            /**
            * Draw the X axis labels
            */
            if (prop['chart.xlabels']) {
            
                /**
                * Specific X labels
                */
                if (RG.isArray(prop['chart.xlabels.specific'])) {

                    if (prop['chart.yaxispos'] == 'center') {

                        var halfGraphWidth = this.graphwidth / 2;
                        var labels         = prop['chart.xlabels.specific'];
                        var interval       = (this.graphwidth / 2) / (labels.length - 1);

                        co.fillStyle = prop['chart.text.color'];

                        for (var i=0; i<labels.length; i+=1) {
                                RG.text2(this, {
                                    font:   font,
                                    size:   text_size,
                                    x:      this.gutterLeft + halfGraphWidth + (interval * i) + offsetx,
                                    y:      ca.height - this.gutterBottom + offsetx,
                                    text:   labels[i],
                                    valign: 'top',
                                    halign: prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                    tag:    'scale',
                                    angle:  -1 * prop['chart.text.angle']
                                });
                        }
                        
                        for (var i=(labels.length - 1); i>0; i-=1) {
                                RG.Text2(this, {
                                    'font':font,
                                    'size':text_size,
                                    'x':this.gutterLeft + (interval * (labels.length - i - 1)) + offsetx,
                                    'y':ca.height - this.gutterBottom + offsety,
                                    'text':labels[i],
                                    'valign':'top',
                                    'halign':prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                    'tag': 'scale',
                                    angle:  -1 * prop['chart.text.angle']
                                });
                        }

                    } else if (prop['chart.yaxispos'] == 'right') {

                        var labels         = prop['chart.xlabels.specific'];
                        var interval       = this.graphwidth / (labels.length - 1);

                        co.fillStyle = prop['chart.text.color'];
                        
                        for (var i=0; i<labels.length; i+=1) {
                                RG.text2(this, {
                                    'font': font,
                                    'size': text_size,
                                    'x':    this.gutterLeft + (interval * i) + offsetx,
                                    'y':    ca.height - this.gutterBottom + offsety,
                                    'text': labels[labels.length - i - 1],
                                   'valign':'top',
                                   'halign':prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                    'tag':  'scale',
                                    angle:  -1 * prop['chart.text.angle']
                                });
                        }

                    } else {

                        var labels   = prop['chart.xlabels.specific'];
                        var interval = this.graphwidth / (labels.length - 1);
                        
                        co.fillStyle = prop['chart.text.color'];
                        
                        for (var i=0; i<labels.length; i+=1) {
                                RG.text2(this, {
                                    font:  font,
                                    size:  text_size,
                                    x:     this.gutterLeft + (interval * i) + offsetx,
                                    y:     ca.height - this.gutterBottom + offsety,
                                    text:  labels[i],
                                    valign:'top',
                                    halign:prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                    tag:   'scale',
                                    angle:  -1 * prop['chart.text.angle']
                                });
                        }
                    }

                /**
                * Draw an X scale
                */
                } else {
    
                    var gap = 7;
        
                    co.beginPath();
                    co.fillStyle = prop['chart.text.color'];
        
        
                    if (prop['chart.yaxispos'] == 'center') {
        
                        for (var i=0; i<this.scale2.labels.length; ++i) {
                            RG.text2(this, {
                                font:   font,
                                size:   text_size,
                                x:      this.gutterLeft + (this.graphwidth / 2) - ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)) + offsetx,
                                y:      this.gutterTop + this.halfTextHeight + this.graphheight + gap + offsety,
                                text:   '-' + this.scale2.labels[i],
                                valign: 'center',
                                halign: (typeof prop['chart.text.angle'] === 'number' && prop['chart.text.angle'] !== 0) ? 'right' : 'center',
                                tag:    'scale',
                                angle:  -1 * prop['chart.text.angle']
                            });
                        }
        
                        for (var i=0; i<this.scale2.labels.length; ++i) {
                            RG.text2(this, {
                                font:   font,
                                size:   text_size,
                                x:      this.gutterLeft + ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)) + (this.graphwidth / 2) + offsetx,
                                y:      this.gutterTop + this.halfTextHeight + this.graphheight + gap + offsety,
                                text:   this.scale2.labels[i],
                                valign: 'center',
                                halign: prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                tag:    'scale',
                                angle:  -1 * prop['chart.text.angle']
                            });
                        }
                
                    } else if (prop['chart.yaxispos'] == 'right') {

                    
                        for (var i=0,len=this.scale2.labels.length; i<len; ++i) {
                            RG.Text2(this, {
                                'font':font,
                                'size':text_size,
                                'x':this.gutterLeft + (i * (this.graphwidth / len)) + offsetx,
                                'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap + offsety,
                                'text':'-' + this.scale2.labels[len - 1 - i],
                                'valign':'center',
                                'halign': prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                'tag': 'scale',
                                angle:  -1 * prop['chart.text.angle']
                            });
                        }


                    } else {

                        for (var i=0,len=this.scale2.labels.length; i<len; ++i) {
                            RG.Text2(this, {
                                font:   font,
                                size:   text_size,
                                x:      this.gutterLeft + (this.graphwidth * ((i+1)/len)) + offsetx,
                                y:      this.gutterTop + this.halfTextHeight + this.graphheight + gap + offsety,
                                text:   this.scale2.labels[i],
                                valign: 'center',
                                halign: prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                                tag:    'scale',
                                angle:  -1 * prop['chart.text.angle']
                            });
                        }
                    }
        
                    /**
                    * If xmin is not zero - draw that
                    */
                    if (prop['chart.xmin'] > 0 || prop['chart.noyaxis'] == true || prop['chart.scale.zerostart'] || prop['chart.noaxes']) {

                        var x = prop['chart.yaxispos'] == 'center' ?  this.gutterLeft + (this.graphwidth / 2): this.gutterLeft;
                        
                        /**
                        * Y axis on the right
                        */
                        if (prop['chart.yaxispos'] === 'right') {
                            var x = ca.width - this.gutterRight;
                        }
        
                        RG.text2(this, {
                            'font':font,
                            'size':text_size,
                            'x':x + offsetx,
                            'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap + offsety,
                            'text':RG.numberFormat(this, prop['chart.xmin'].toFixed(prop['chart.xmin'] === 0 ? 0 : prop['chart.scale.decimals']), units_pre, units_post),
                            'valign':'center',
                            halign: prop['chart.text.angle'] !== 0 ? 'right' : 'center',
                            'tag': 'scale',
                            angle:  -1 * prop['chart.text.angle']
                        });
                    }
        
                    co.fill();
                    co.stroke();
                }
            }







            /**
            * The Y axis labels
            */
            if (typeof prop['chart.labels'] == 'object') {
            
                var xOffset = prop['chart.variant'] === '3d' && prop['chart.yaxispos'] === 'right' ? 15 : 5,
                    font    = prop['chart.text.font'],
                    color   = prop['chart.labels.color'] || prop['chart.text.color'],
                    bold    = prop['chart.labels.bold'],
                    offsetx = prop['chart.labels.offsetx'],
                    offsety = prop['chart.labels.offsety']
                
    
                // Draw the X axis labels
                co.fillStyle = color;
                
                // How high is each bar
                var barHeight = (ca.height - this.gutterTop - this.gutterBottom ) / prop['chart.labels'].length;
                
                // Reset the yTickGap
                yTickGap = (ca.height - this.gutterTop - this.gutterBottom) / prop['chart.labels'].length

                /**
                * If the Y axis is on the right set the alignment and the X position, otherwise on the left
                */
                if (prop['chart.yaxispos'] === 'right') {
                    var x = ca.width - this.gutterRight + xOffset;
                    var halign = 'left'
                } else {
                    var x = this.gutterLeft - xOffset;
                    var halign = 'right'
                }

                // Draw the X tickmarks
                var i=0;
                for (y=this.gutterTop + (yTickGap / 2); y<=ca.height - this.gutterBottom; y+=yTickGap) {

                    RG.text2(this, {
                        'font': font,
                        'size': prop['chart.text.size'],
                        'bold': bold,
                        'x': x + offsetx,
                        'y': y + offsety,
                        'text': String(prop['chart.labels'][i++]),
                        'halign': halign,
                        'valign': 'center',
                        'tag': 'labels'
                    });
                }
            }
        };




        /**
        * This function draws the bars. It also draw 3D axes as the axes drawing bit
        * is don AFTER the bars are drawn
        */
        this.drawbars =
        this.Drawbars = function ()
        {
            co.lineWidth   = prop['chart.linewidth'];
            co.strokeStyle = prop['chart.strokestyle'];
            co.fillStyle   = prop['chart.colors'][0];

            var prevX = 0,
                prevY = 0;
            
    
            /**
            * Work out the max value
            */
            if (prop['chart.xmax']) {

                this.scale2 = RG.getScale2(this, {
                    'max':prop['chart.xmax'],
                    'min':prop['chart.xmin'],
                    'scale.decimals':Number(prop['chart.scale.decimals']),
                    'scale.point':prop['chart.scale.point'],
                    'scale.thousand':prop['chart.scale.thousand'],
                    'scale.round':prop['chart.scale.round'],
                    'units.pre':prop['chart.units.pre'],
                    'units.post':prop['chart.units.post'],
                    'ylabels.count':prop['chart.xlabels.count'],
                    'strict':true
                 });

                this.max = this.scale2.max;
    
            } else {

                var grouping = prop['chart.grouping'];

                for (i=0; i<this.data.length; ++i) {
                    if (typeof(this.data[i]) == 'object') {
                        var value = grouping == 'grouped' ? Number(RG.array_max(this.data[i], true)) : Number(RG.array_sum(this.data[i])) ;
                    } else {
                        var value = Number(ma.abs(this.data[i]));
                    }
    
                    this.max = ma.max(Math.abs(this.max), Math.abs(value));
                }
    
                this.scale2 = RG.getScale2(this, {
                    'max':this.max,
                    'min':prop['chart.xmin'],
                    'scale.decimals':Number(prop['chart.scale.decimals']),
                    'scale.point':prop['chart.scale.point'],
                    'scale.thousand':prop['chart.scale.thousand'],
                    'scale.round':prop['chart.scale.round'],
                    'units.pre':prop['chart.units.pre'],
                    'units.post':prop['chart.units.post'],
                    'ylabels.count':prop['chart.xlabels.count']
                });


                this.max = this.scale2.max;
                this.min = this.scale2.min;
            }
    
            if (prop['chart.scale.decimals'] == null && Number(this.max) == 1) {
                this.Set('chart.scale.decimals', 1);
            }
            
            /**
            * This is here to facilitate sequential colors
            */
            var colorIdx = 0;
            
            //
            // For grouped bars we need to calculate the number of bars
            //
            this.numbars = RG.arrayLinearize(this.data).length;




            /**
            * if the chart is adjustable fix the scale so that it doesn't change.
            * 
            * It's here (after the scale generation) so that the max value can be
            * set to the maximum scale value)
            */
            if (prop['chart.adjustable'] && !prop['chart.xmax']) {
                this.set('chart.xmax', this.scale2.max);
            }



            // Draw the 3d axes if necessary
            if (prop['chart.variant'] === '3d') {
                RG.draw3DAxes(this);
            }






            /**
            * The bars are drawn HERE
            */
            var graphwidth = (ca.width - this.gutterLeft - this.gutterRight);
            var halfwidth  = graphwidth / 2;

            for (i=(len=this.data.length-1); i>=0; --i) {

                // Work out the width and height
                var width  = ma.abs((this.data[i] / this.max) *  graphwidth);
                var height = this.graphheight / this.data.length;

                var orig_height = height;

                var x       = this.gutterLeft;
                var y       = this.gutterTop + (i * height);
                var vmargin = prop['chart.vmargin'];
                
                // Account for the Y axis being on the right hand side
                if (prop['chart.yaxispos'] === 'right') {
                    x = ca.width - this.gutterRight - ma.abs(width);
                }

                // Account for negative lengths - Some browsers (eg Chrome) don't like a negative value
                if (width < 0) {
                    x -= width;
                    width = ma.abs(width);
                }
    
                /**
                * Turn on the shadow if need be
                */
                if (prop['chart.shadow']) {
                    co.shadowColor   = prop['chart.shadow.color'];
                    co.shadowBlur    = prop['chart.shadow.blur'];
                    co.shadowOffsetX = prop['chart.shadow.offsetx'];
                    co.shadowOffsetY = prop['chart.shadow.offsety'];
                }

                /**
                * Draw the bar
                */
                co.beginPath();
                
                    // Standard (non-grouped and non-stacked) bars here
                    if (typeof this.data[i] == 'number' || RG.isNull(this.data[i])) {

                        var barHeight = height - (2 * vmargin),
                            barWidth  = ((this.data[i] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * this.graphwidth,
                            barX      = this.gutterLeft;
    
                        // Account for Y axis pos
                        if (prop['chart.yaxispos'] == 'center') {
                            barWidth /= 2;
                            barX += halfwidth;
                            
                            if (this.data[i] < 0) {
                                barWidth = (ma.abs(this.data[i]) - prop['chart.xmin']) / (this.max - prop['chart.xmin']);
                                barWidth = barWidth * (this.graphwidth / 2);
                                barX = ((this.graphwidth / 2) + this.gutterLeft) - barWidth;
                            }

                        } else if (prop['chart.yaxispos'] == 'right') {

                            barWidth = ma.abs(barWidth);
                            barX = ca.width - this.gutterRight - barWidth;

                        }

                        // Set the fill color
                        co.strokeStyle = prop['chart.strokestyle'];
                        co.fillStyle   = prop['chart.colors'][0];

                        // Sequential colors
                        ++colorIdx;
                        if (prop['chart.colors.sequential'] && typeof colorIdx === 'number') {
                            if (prop['chart.colors'][this.numbars - colorIdx]) {
                                co.fillStyle = prop['chart.colors'][this.numbars - colorIdx];
                            } else {
                                co.fillStyle = prop['chart.colors'][prop['chart.colors'].length - 1];
                            }
                        }
















                        co.strokeRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);
                        co.fillRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);




















                            



                        this.coords.push([
                            barX,
                            y + vmargin,
                            barWidth,
                            height - (2 * vmargin),
                            co.fillStyle,
                            this.data[i],
                            true
                        ]);






                        // Draw the 3D effect using the coords that have just been stored
                        if (prop['chart.variant'] === '3d' && typeof this.data[i] == 'number') {


                            var prevStrokeStyle = co.strokeStyle,
                                prevFillStyle   = co.fillStyle;

                            /**
                            * Turn off the shadow for the 3D bits
                            */
                            RG.noShadow(this);
                            
                            // DRAW THE 3D BITS HERE
                            var barX    = barX,
                                barY    = y + vmargin,
                                barW    = barWidth,
                                barH    = height - (2 * vmargin),
                                offsetX = prop['chart.variant.threed.offsetx'],
                                offsetY = prop['chart.variant.threed.offsety'],
                                value   = this.data[i];


                            pa2(
                                co,
                                [
                                 'b',
                                 'm', barX, barY,
                                 'l', barX + offsetX - (prop['chart.yaxispos'] == 'left' && value < 0 ? offsetX : 0), barY - offsetY,
                                 'l', barX + barW + offsetX - (prop['chart.yaxispos'] == 'center' && value < 0 ? offsetX : 0), barY - offsetY,
                                 'l', barX + barW, barY,
                                 'c',
                                 's', co.strokeStyle,
                                 'f', co.fillStyle,
                                 'f','rgba(255,255,255,0.6)'//Fill again to lighten it
                                ]
                            );

                            if (   prop['chart.yaxispos'] !== 'right'
                                && !(prop['chart.yaxispos'] === 'center' && value < 0)
                                && value >= 0
                                && !RG.isNull(value)
                               ) {

                                pa2(
                                    co,
                                    [
                                     'b',
                                     'fs', prevFillStyle,
                                     'm', barX + barW, barY,
                                     'l', barX + barW + offsetX, barY - offsetY,
                                     'l', barX + barW + offsetX, barY - offsetY + barH,
                                     'l', barX + barW, barY + barH,
                                     'c',
                                     's', co.strokeStyle,
                                     'f', prevFillStyle,
                                     'f', 'rgba(0,0,0,0.25)'
                                    ]
                                );
                            }

                        }






                    /**
                    * Stacked bar chart
                    */
                    } else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'stacked') {

                        if (prop['chart.yaxispos'] == 'center') {
                            alert('[HBAR] You can\'t have a stacked chart with the Y axis in the center, change it to grouped');
                        } else if (prop['chart.yaxispos'] == 'right') {
                            var x = ca.width - this.gutterRight
                        }

                        var barHeight = height - (2 * vmargin);

                        if (typeof this.coords2[i] == 'undefined') {
                            this.coords2[i] = [];
                        }

                        for (j=0; j<this.data[i].length; ++j) {

                            // The previous 3D segments would have turned the shadow off - so turn it back on
                            if (prop['chart.shadow'] && prop['chart.variant'] === '3d') {
                                co.shadowColor   = prop['chart.shadow.color'];
                                co.shadowBlur    = prop['chart.shadow.blur'];
                                co.shadowOffsetX = prop['chart.shadow.offsetx'];
                                co.shadowOffsetY = prop['chart.shadow.offsety'];
                            }

                            //
                            // Ensure the number is positive
                            //(even though having the X axis on the right implies a
                            //negative value)
                            //
                            if (!RG.isNull(this.data[i][j])) this.data[i][j] = ma.abs(this.data[i][j]);

    
                            var last = (j === (this.data[i].length - 1) );
                            
                            // Set the fill/stroke colors
                            co.strokeStyle = prop['chart.strokestyle'];

                            // Sequential colors
                            ++colorIdx;
                            if (prop['chart.colors.sequential'] && typeof colorIdx === 'number') {
                                if (prop['chart.colors'][this.numbars - colorIdx]) {
                                    co.fillStyle = prop['chart.colors'][this.numbars - colorIdx];
                                } else {
                                    co.fillStyle = prop['chart.colors'][prop['chart.colors'].length - 1];
                                }
                            } else if (prop['chart.colors'][j]) {
                                co.fillStyle = prop['chart.colors'][j];
                            }
                            
    
                            var width = (((this.data[i][j]) / (this.max))) * this.graphwidth;
                            var totalWidth = (RG.arraySum(this.data[i]) / this.max) * this.graphwidth;
                            
                            if (prop['chart.yaxispos'] === 'right') {
                                x -= width;
                            }
                            


                            co.strokeRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );
                            co.fillRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );


                            /**
                            * Store the coords for tooltips
                            */
    
                            // The last property of this array is a boolean which tells you whether the value is the last or not
                            this.coords.push([
                                x,
                                y + vmargin,
                                width,
                                height - (2 * vmargin),
                                co.fillStyle,
                                RG.array_sum(this.data[i]),
                                j == (this.data[i].length - 1)
                            ]);

                            this.coords2[i].push([
                                x,
                                y + vmargin,
                                width,
                                height - (2 * vmargin),
                                co.fillStyle,
                                RG.array_sum(this.data[i]),
                                j == (this.data[i].length - 1)
                            ]);






                            // 3D effect
                            if (prop['chart.variant'] === '3d') {
                            
                                /**
                                * Turn off the shadow for the 3D bits
                                */
                                RG.noShadow(this);

                                var prevStrokeStyle = co.strokeStyle,
                                    prevFillStyle   = co.fillStyle;

                                // DRAW THE 3D BITS HERE
                                var barX    = x,
                                    barY    = y + vmargin,
                                    barW    = width,
                                    barH    = height - (2 * vmargin),
                                    offsetX = prop['chart.variant.threed.offsetx'],
                                    offsetY = prop['chart.variant.threed.offsety'],
                                    value   = this.data[i][j];

                                if (!RG.isNull(value)) {
                                    pa2(
                                        co,
                                        [
                                         'b',
                                         'm', barX, barY,
                                         'l', barX + offsetX, barY - offsetY,
                                         'l', barX + barW + offsetX, barY - offsetY,
                                         'l', barX + barW, barY,
                                         'c',
                                         's', co.strokeStyle,
                                         'f', co.fillStyle,
                                         'f','rgba(255,255,255,0.6)'//Fill again to lighten it
                                        ]
                                    );
                                }
    
                                if (   prop['chart.yaxispos'] !== 'right'
                                    && !(prop['chart.yaxispos'] === 'center' && value < 0)
                                    && !RG.isNull(value)
                                   ) {

                                    pa2(
                                        co,
                                        [
                                         'fs', prevFillStyle,
                                         'b',
                                         'm', barX + barW, barY,
                                         'l', barX + barW + offsetX, barY - offsetY,
                                         'l', barX + barW + offsetX, barY - offsetY + barH,
                                         'l', barX + barW, barY + barH,
                                         'c',
                                         's', co.strokeStyle,
                                         'f', prevFillStyle,
                                         'f', 'rgba(0,0,0,0.25)'
                                        ]
                                    );
                                }
                            
                                co.beginPath();
                                co.strokeStyle = prevStrokeStyle;
                                co.fillStyle   = prevFillStyle;
                            }
    
    
    
    
    
    
                            if (prop['chart.yaxispos'] !== 'right') {
                                x += width;
                            }
                        }








                    /**
                    * A grouped bar chart
                    */
                    } else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'grouped') {

                        var vmarginGrouped      = prop['chart.vmargin.grouped'];
                        var individualBarHeight = ((height - (2 * vmargin) - ((this.data[i].length - 1) * vmarginGrouped)) / this.data[i].length)
                        
                        if (typeof this.coords2[i] == 'undefined') {
                            this.coords2[i] = [];
                        }
                        
                        for (j=(this.data[i].length - 1); j>=0; --j) {
    
                            /**
                            * Turn on the shadow if need be
                            */
                            if (prop['chart.shadow']) {
                                RG.setShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
                            }
    
                            // Set the fill/stroke colors
                            co.strokeStyle = prop['chart.strokestyle'];

                            // Sequential colors
                            ++colorIdx;
                            if (prop['chart.colors.sequential'] && typeof colorIdx === 'number') {
                                if (prop['chart.colors'][this.numbars - colorIdx]) {
                                    co.fillStyle = prop['chart.colors'][this.numbars - colorIdx];
                                } else {
                                    co.fillStyle = prop['chart.colors'][prop['chart.colors'].length - 1];
                                }
                            } else if (prop['chart.colors'][j]) {
                                co.fillStyle = prop['chart.colors'][j];
                            }
    
    
    
                            var startY = this.gutterTop + (height * i) + (individualBarHeight * j) + vmargin + (vmarginGrouped * j);
                            var width = ((this.data[i][j] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * (ca.width - this.gutterLeft - this.gutterRight );
                            var startX = this.gutterLeft;

    

                            // Account for the Y axis being in the middle
                            if (prop['chart.yaxispos'] == 'center') {
                                width  /= 2;
                                startX += halfwidth;
                            
                            // Account for the Y axis being on the right
                            } else if (prop['chart.yaxispos'] == 'right') {
                                width = ma.abs(width);
                                startX = ca.width - this.gutterRight - ma.abs(width);;
                            }
                            
                            if (width < 0) {
                                startX += width;
                                width *= -1;
                            }
    
                            co.strokeRect(startX, startY, width, individualBarHeight);
                            co.fillRect(startX, startY, width, individualBarHeight);






                            this.coords.push([
                                startX,
                                startY,
                                width,
                                individualBarHeight,
                                co.fillStyle,
                                this.data[i][j],
                                true
                            ]);
    
                            this.coords2[i].push([
                                startX,
                                startY,
                                width,
                                individualBarHeight,
                                co.fillStyle,
                                this.data[i][j],
                                true
                            ]);












                            // 3D effect
                            if (prop['chart.variant'] === '3d') {
                            
                                /**
                                * Turn off the shadow for the 3D bits
                                */
                                RG.noShadow(this);

                                var prevStrokeStyle = co.strokeStyle,
                                    prevFillStyle   = co.fillStyle;
                            
                                // DRAW THE 3D BITS HERE
                                var barX    = startX,
                                    barY    = startY,
                                    barW    = width,
                                    barH    = individualBarHeight,
                                    offsetX = prop['chart.variant.threed.offsetx'],
                                    offsetY = prop['chart.variant.threed.offsety'],
                                    value   = this.data[i][j];
                                
                                pa2(
                                    co,
                                    [
                                     'b',
                                     'm', barX, barY,
                                     'l', barX + offsetX, barY - offsetY,
                                     'l', barX + barW + offsetX - (value < 0 ? offsetX : 0), barY - offsetY,
                                     'l', barX + barW, barY,
                                     'c',
                                     's', co.strokeStyle,
                                     'f', co.fillStyle,
                                     'f','rgba(255,255,255,0.6)'//Fill again to lighten it
                                    ]
                                );
    
                                if (   prop['chart.yaxispos'] !== 'right'
                                    && !(prop['chart.yaxispos'] === 'center' && value < 0)
                                    && value >= 0
                                    && !RG.isNull(value)
                                   ) {

                                    pa2(
                                        co,
                                        [
                                         'fs', prevFillStyle,
                                         'b',
                                         'm', barX + barW, barY,
                                         'l', barX + barW + offsetX, barY - offsetY,
                                         'l', barX + barW + offsetX, barY - offsetY + barH,
                                         'l', barX + barW, barY + barH,
                                         'c',
                                         's', co.strokeStyle,
                                         'f', prevFillStyle,
                                         'f', 'rgba(0,0,0,0.25)'
                                        ]
                                    );
                                }





                                co.beginPath();
                                co.strokeStyle = prevStrokeStyle;
                                co.fillStyle   = prevFillStyle;
                            }






                        }
                        
                        startY += vmargin;
                    }
    
                co.closePath();
            }
    
            co.stroke();
            co.fill();
            
            // Under certain circumstances we can cover the shadow
            // overspill with a white rectangle
            if (prop['chart,yaxispos'] === 'right') {
                pa2(co, 'cr % % % %',
                    ca.width - this.gutterRight + prop['chart.variant.threed.offsetx'],
                    '0',
                    this.gutterRight,
                    ca.height
                );
            }






            // Draw the 3d axes AGAIN if the Y axis is on the right
            if (   prop['chart.yaxispos'] === 'right'
                && prop['chart.variant'] === '3d'
               ) {
                RG.draw3DYAxis(this);
            }
    
            /**
            * Now the bars are stroke()ed, turn off the shadow
            */
            RG.noShadow(this);
            
            
            //
            // Reverse the coords arrays as the bars are drawn from the borrom up now
            //
            this.coords  = RG.arrayReverse(this.coords);
            
            if (prop['chart.grouping'] === 'grouped') {
                for (var i=0; i<this.coords2.length; ++i) {
                    this.coords2[i] = RG.arrayReverse(this.coords2[i]);
                }
            }
            

            this.redrawBars();
        };




        /**
        * This function goes over the bars after they been drawn, so that upwards shadows are underneath the bars
        */
        this.redrawBars =
        this.RedrawBars = function ()
        {
            if (prop['chart.noredraw']) {
                return;
            }
    
            var coords = this.coords;
    
            var font   = prop['chart.text.font'],
                size   = prop['chart.text.size'],
                color  = prop['chart.text.color'];
    
            RG.noShadow(this);
            co.strokeStyle = prop['chart.strokestyle'];
    
            for (var i=0; i<coords.length; ++i) {

                if (prop['chart.shadow']) {
                    
                    pa2(co, 'b lw % r % % % % s % f %',
                        prop['chart.linewidth'],
                        coords[i][0],
                        coords[i][1],
                        coords[i][2],
                        coords[i][3],
                        prop['chart.strokestyle'],
                        coords[i][4]
                    );
                }
    
                /**
                * Draw labels "above" the bar
                */
                var halign = 'left';
                if (prop['chart.labels.above'] && coords[i][6]) {
    
                    var border = (coords[i][0] + coords[i][2] + 7 + co.measureText(prop['chart.labels.above.units.pre'] + this.coords[i][5] + prop['chart.labels.above.units.post']).width) > ca.width ? true : false,
                        text   = RG.numberFormat(this, (this.coords[i][5]).toFixed(prop['chart.labels.above.decimals']), prop['chart.labels.above.units.pre'], prop['chart.labels.above.units.post']);

                    RG.noShadow(this);

                    /**
                    * Default to the value - then check for specific labels
                    */
                    

                    if (typeof prop['chart.labels.above.specific'] === 'object' && prop['chart.labels.above.specific'] && prop['chart.labels.above.specific'][i]) {
                        text = prop['chart.labels.above.specific'][i];
                    }

                    var x = coords[i][0] + coords[i][2] + 5;
                    var y = coords[i][1] + (coords[i][3] / 2);
                    
                    if (prop['chart.yaxispos'] === 'right') {
                        x = coords[i][0] - 5;
                        halign = 'right';
                    } else if (prop['chart.yaxispos'] === 'center' && this.data_arr[i] < 0) {
                        x = coords[i][0] - 5;
                        halign = 'right';
                    }

                    RG.text2(this, {
                          font: typeof prop['chart.labels.above.font'] === 'string' ? prop['chart.labels.above.font'] : font,
                          size: typeof prop['chart.labels.above.size'] === 'number' ? prop['chart.labels.above.size'] : size,
                         color: typeof prop['chart.labels.above.color'] ==='string' ? prop['chart.labels.above.color'] : color,
                             x: x,
                             y: y,
                          bold: prop['chart.labels.above.bold'],
                        italic: prop['chart.labels.above.italic'],
                          text: text,
                        valign: 'center',
                        halign: halign,
                           tag: 'labels.above'
                    });
                }
            }
        };




        /**
        * This function can be used to get the appropriate bar information (if any)
        * 
        * @param  e Event object
        * @return   Appriate bar information (if any)
        */
        this.getShape =
        this.getBar = function (e)
        {
            var mouseXY = RG.getMouseXY(e);
    
            /**
            * Loop through the bars determining if the mouse is over a bar
            */
            for (var i=0,len=this.coords.length; i<len; i++) {
    
                var mouseX = mouseXY[0],  // In relation to the canvas
                    mouseY = mouseXY[1],  // In relation to the canvas
                    left   = this.coords[i][0],
                    top    = this.coords[i][1],
                    width  = this.coords[i][2],
                    height = this.coords[i][3],
                    idx    = i;



                // Recreate the path/rectangle so that it can be tested
                //  ** DO NOT STROKE OR FILL IT **
                pa2(co,['b','r',left,top,width,height]);

                if (co.isPointInPath(mouseX, mouseY)) {

                    var tooltip = RG.parseTooltipText(prop['chart.tooltips'], i);

                    return {
                        0: this,   'object': this,
                        1: left,   'x': left,
                        2: top,    'y': top,
                        3: width,  'width': width,
                        4: height, 'height': height,
                        5: idx,    'index': idx,
                        'tooltip': tooltip
                    };
                }
            }
        };




        /**
        * When you click on the chart, this method can return the X value at that point. It works for any point on the
        * chart (that is inside the gutters) - not just points within the Bars.
        * 
        * @param object e The event object
        */
        this.getValue = function (arg)
        {
            if (arg.length == 2) {
                var mouseX = arg[0];
                var mouseY = arg[1];
            } else {
                var mouseCoords = RG.getMouseXY(arg);
                var mouseX      = mouseCoords[0];
                var mouseY      = mouseCoords[1];
            }

            if (   mouseY < this.gutterTop
                || mouseY > (ca.height - this.gutterBottom)
                || mouseX < this.gutterLeft
                || mouseX > (ca.width - this.gutterRight)
               ) {
                return null;
            }





            if (prop['chart.yaxispos'] == 'center') {
                var value = ((mouseX - this.gutterLeft) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);
                    value = value - this.max
                    
                    // Special case if xmin is defined
                    if (prop['chart.xmin'] > 0) {
                        value = ((mouseX - this.gutterLeft - (this.graphwidth / 2)) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);
                        value += prop['chart.xmin'];
                        
                        if (mouseX < (this.gutterLeft + (this.graphwidth / 2))) {
                            value -= (2 * prop['chart.xmin']);
                        }
                    }
            
            
            // TODO This needs fixing
            } else if (prop['chart.yaxispos'] == 'right') {
                var value = ((mouseX - this.gutterLeft) / this.graphwidth) * (this.scale2.max - prop['chart.xmin']);
                    value = this.scale2.max - value;

            } else {
                var value = ((mouseX - this.gutterLeft) / this.graphwidth) * (this.scale2.max - prop['chart.xmin']);
                    value += prop['chart.xmin'];
            }






            return value;
        };




        /**
        * Each object type has its own Highlight() function which highlights the appropriate shape
        * 
        * @param object shape The shape to highlight
        */
        this.highlight =
        this.Highlight = function (shape)
        {
            if (typeof prop['chart.highlight.style'] === 'function') {
                (prop['chart.highlight.style'])(shape);
            } else {
                RG.Highlight.Rect(this, shape);
            }
        };




        /**
        * The getObjectByXY() worker method. Don't call this call:
        * 
        * RG.ObjectRegistry.getObjectByXY(e)
        * 
        * @param object e The event object
        */
        this.getObjectByXY = function (e)
        {
            var mouseXY = RG.getMouseXY(e);

            // Adjust the mouse Y coordinate for when the bar chart is
            // a 3D variant
            if (prop['chart.variant'] === '3d') {
                var adjustment = prop['chart.variant.threed.angle'] * mouseXY[0];
                mouseXY[1] -= adjustment;
            }


            if (
                   mouseXY[0] >= this.gutterLeft
                && mouseXY[0] <= (ca.width - this.gutterRight)
                && mouseXY[1] >= this.gutterTop
                && mouseXY[1] <= (ca.height - this.gutterBottom)
                ) {
    
                return this;
            }
        };




        /**
        * This function positions a tooltip when it is displayed
        * 
        * @param obj object    The chart object
        * @param int x         The X coordinate specified for the tooltip
        * @param int y         The Y coordinate specified for the tooltip
        * @param objec tooltip The tooltips DIV element
        *
        this.positionTooltip = function (obj, x, y, tooltip, idx)
        {
            var coordX     = obj.coords[tooltip.__index__][0],
                coordY     = obj.coords[tooltip.__index__][1],
                coordW     = obj.coords[tooltip.__index__][2],
                coordH     = obj.coords[tooltip.__index__][3],
                canvasXY   = RG.getCanvasXY(obj.canvas),
                gutterLeft = obj.gutterLeft,
                gutterTop  = obj.gutterTop,
                width      = tooltip.offsetWidth,
                height     = tooltip.offsetHeight,
                mouseXY    = RG.getMouseXY(window.event);

            // If the chart is a 3D version the tooltip Y position needs this
            // adjustment
            if (prop['chart.variant'] === '3d' && coordW) {
                var adjustment = (prop['chart.variant.threed.angle'] * ((coordX + coordW) / 2));
            }



            // Set the top position
            tooltip.style.left = 0;
            tooltip.style.top  = window.event.pageY - height - 5 + 'px';
            
            // By default any overflow is hidden
            tooltip.style.overflow = '';
            
            // Reposition the tooltip if at the edges:

            // LEFT edge
            if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.1) + 'px';
    
            // RIGHT edge
            } else if (canvasXY[0] + mouseXY[0]  + (width / 2) > doc.body.offsetWidth) {
                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width * 0.9) + 'px';
    
            // Default positioning - CENTERED
            } else {
                tooltip.style.left = canvasXY[0] + mouseXY[0]  - (width / 2) + 'px';
            }
        };*/




        /**
        * Returns the appropriate Y coord for the given value
        * 
        * @param number value The value to get the coord for
        */
        this.getXCoord = function (value)
        {
    
            if (prop['chart.yaxispos'] == 'center') {
        
                // Range checking
                if (value > this.max || value < (-1 * this.max)) {
                    return null;
                }
    
                var width = (ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right']) / 2;
                var coord = (((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width) + width;
    
                    coord = prop['chart.gutter.left'] + coord;
            } else {
            
                // Range checking
                if (value > this.max || value < 0) {
                    return null;
                }
    
                var width = ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'];
                var coord = ((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width;
    
                    coord = prop['chart.gutter.left'] + coord;
            }
    
            return coord;
        };




        /**
        * 
        */
        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['chart.'] = RG.array_clone(prop['chart.']);
                this.original_colors['chart.colors']                = RG.array_clone(prop['chart.colors']);
                this.original_colors['chart.background.grid.color'] = RG.array_clone(prop['chart.background.grid.color']);
                this.original_colors['chart.background.color']      = RG.array_clone(prop['chart.background.color']);
                this.original_colors['chart.background.barcolor1']  = RG.array_clone(prop['chart.background.barcolor1']);
                this.original_colors['chart.background.barcolor2']  = RG.array_clone(prop['chart.background.barcolor2']);
                this.original_colors['chart.text.color']            = RG.array_clone(prop['chart.text.color']);
                this.original_colors['chart.labels.colors']         = RG.array_clone(prop['chart.labels.colors']);
                this.original_colors['chart.strokestyle']           = RG.array_clone(prop['chart.strokestyle']);
                this.original_colors['chart.axis.color']            = RG.array_clone(prop['chart.axis.color']);
                this.original_colors['chart.highlight.fill']        = RG.array_clone(prop['chart.highlight.fill']);
                this.original_colors['chart.highlight.stroke']      = RG.array_clone(prop['chart.highlight.stroke']);
                
            }

            var colors = prop['chart.colors'];
    
            for (var i=0; i<colors.length; ++i) {
                colors[i] = this.parseSingleColorForGradient(colors[i]);
            }
            
            prop['chart.background.grid.color'] = this.parseSingleColorForGradient(prop['chart.background.grid.color']);
            prop['chart.background.color']      = this.parseSingleColorForGradient(prop['chart.background.color']);
            prop['chart.background.barcolor1']  = this.parseSingleColorForGradient(prop['chart.background.barcolor1']);
            prop['chart.background.barcolor2']  = this.parseSingleColorForGradient(prop['chart.background.barcolor2']);
            prop['chart.text.color']            = this.parseSingleColorForGradient(prop['chart.text.color']);
            prop['chart.labels.colors']         = this.parseSingleColorForGradient(prop['chart.labels.colors']);
            prop['chart.strokestyle']           = this.parseSingleColorForGradient(prop['chart.strokestyle']);
            prop['chart.axis.color']            = this.parseSingleColorForGradient(prop['chart.axis.color']);
            prop['chart.highlight.fill']        = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
            prop['chart.highlight.stroke']      = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
        };




        /**
        * 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)) {
                
                var parts = RegExp.$1.split(':');
                
                if (prop['chart.yaxispos'] === 'right') {
                    parts = RG.arrayReverse(parts);
                }
    
                // Create the gradient
                var grad = co.createLinearGradient(prop['chart.gutter.left'],0,ca.width - prop['chart.gutter.right'],0);
    
                var diff = 1 / (parts.length - 1);
    
                grad.addColorStop(0, RG.trim(parts[0]));
    
                for (var j=1; j<parts.length; ++j) {
                    grad.addColorStop(j * diff, RG.trim(parts[j]));
                }
            }
                
            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)
        {
            var obj = this;

            this.coords2.forEach(function (value, idx, arr)
            {
                var shape = obj.coords2[idx][index]
                var pre_linewidth = co.lineWidth;
                co.lineWidth = 2;
                co.fillStyle   = prop['chart.key.interactive.highlight.chart.fill'];
                co.strokeStyle = prop['chart.key.interactive.highlight.chart.stroke'];
                co.fillRect(shape[0], shape[1], shape[2], shape[3]);
                co.strokeRect(shape[0], shape[1], shape[2], shape[3]);
                
                // Reset the lineWidth
                co.lineWidth = pre_linewidth;
            });
        };




        /**
        * 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 {
                RG.addCustomEventListener(this, type, func);
            }
    
            return this;
        };




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




        /**
        * This retrives the bar based on the X coordinate only.
        * 
        * @param object e The event object
        * @param object   OPTIONAL You can pass in the bar object instead of the
        *                          function using "this"
        */
        this.getShapeByY = function (e)
        {
            var mouseXY = RG.getMouseXY(e);
    
    
            // This facilitates you being able to pass in the bar object as a parameter instead of
            // the function getting it from itself
            var obj = arguments[1] ? arguments[1] : this;
    
    
            /**
            * Loop through the bars determining if the mouse is over a bar
            */
            for (var i=0,len=obj.coords.length; i<len; i++) {

                if (obj.coords[i].length == 0) {
                    continue;
                }

                var mouseX = mouseXY[0],
                    mouseY = mouseXY[1],    
                    left   = obj.coords[i][0],
                    top    = obj.coords[i][1],
                    width  = obj.coords[i][2],
                    height = obj.coords[i][3];
    
                if (mouseY >= top && mouseY <= (top + height)) {
                
                    if (prop['chart.tooltips']) {
                        var tooltip = RG.parseTooltipText ? RG.parseTooltipText(prop['chart.tooltips'], i) : prop['chart.tooltips'][i];
                    }    

                    return {
                        0: obj,    object: obj,
                        1: left,   x: left,
                        2: top,    y: top,
                        3: width,  width: width,
                        4: height, height: height,
                        5: i,      index: i,
                                   tooltip: tooltip
                    };
                }
            }
            
            return null;
        };




        /**
        * This method handles the adjusting calculation for when the mouse is moved
        * 
        * @param object e The event object
        */
        this.adjusting_mousemove =
        this.Adjusting_mousemove = function (e)
        {
            /**
            * Handle adjusting for the Bar
            */
            if (prop['chart.adjustable'] && RG.Registry.get('chart.adjusting') && RG.Registry.get('chart.adjusting').uid == this.uid) {

                // Rounding the value to the given number of decimals make the chart step
                var value = Number(this.getValue(e)),
                    shape = RG.Registry.get('chart.adjusting.shape');

                if (shape) {

                    RG.Registry.Set('chart.adjusting.shape', shape);

                    if (this.stackedOrGrouped && prop['chart.grouping'] == 'grouped') {

                        var indexes = RG.sequentialIndexToGrouped(shape['index'], this.data);

                        if (typeof this.data[indexes[0]] == 'number') {
                            this.data[indexes[0]] = Number(value);
                        } else if (!RG.is_null(this.data[indexes[0]])) {
                            this.data[indexes[0]][indexes[1]] = Number(value);
                        }
                    } else if (typeof this.data[shape['index']] == 'number') {

                        this.data[shape['index']] = Number(value);
                    }
    
                    RG.redrawCanvas(e.target);
                    RG.fireCustomEvent(this, 'onadjust');
                }
            }
        };




        /**
        * Grow
        * 
        * The HBar chart Grow effect gradually increases the values of the bars
        * 
        * @param object   OPTIONAL Options for the effect. You can pass frames here
        * @param function OPTIONAL A callback function
        */
        this.grow = function ()
        {
            var obj         = this,
                opt         = arguments[0] || {},
                frames      = opt.frames || 30,
                frame       = 0,
                callback    = arguments[1] || function () {},
                labelsAbove = prop['chart.labels.above'];
            
            this.set('labelsAbove', false);


            // Save the data
            obj.original_data = RG.arrayClone(obj.data);


            // Stop the scale from changing by setting chart.xmax (if it's not already set)
            if (prop['chart.xmax'] == 0) {

                var xmax = 0;
    
                for (var i=0; i<obj.data.length; ++i) {
                    if (RG.isArray(obj.data[i]) && prop['chart.grouping'] == 'stacked') {
                        xmax = ma.max(xmax, RG.arraySum(obj.data[i]));
                    } else if (RG.isArray(obj.data[i]) && prop['chart.grouping'] == 'grouped') {
                        xmax = ma.max(xmax, RG.arrayMax(obj.data[i]));
                    } else {
                        xmax = ma.max(xmax, ma.abs(RG.arrayMax(obj.data[i])));
                    }
                }

                var scale2 = RG.getScale2(obj, {'max':xmax});
                obj.Set('chart.xmax', scale2.max);
            }

            function iterator ()
            {
                // Alter the Bar chart data depending on the frame
                for (var j=0,len=obj.original_data.length; j<len; ++j) {
                    
                    // This stops the animation from being completely linear
                    var easingFactor = RG.Effects.getEasingMultiplier(frames, frame);
    
                    if (typeof obj.data[j] === 'object' && obj.data[j]) {
                        for (var k=0,len2=obj.data[j].length; k<len2; ++k) {
                            obj.data[j][k] = RG.isNull(obj.data[j][k]) ? null : obj.original_data[j][k] * easingFactor;
                        }
                    } else {
                        obj.data[j] = RG.isNull(obj.data[j]) ? null : obj.original_data[j] * easingFactor;
                    }
                }
    
    

                RG.redrawCanvas(obj.canvas);
    
                if (frame < frames) {
                    frame += 1;
                    RG.Effects.updateCanvas(iterator);
                } else {

                    if (labelsAbove) {
                        obj.set('labelsAbove', true);
                        RG.redraw();
                    }

                    callback(obj);
                }
            }
            
            iterator();
            
            return this;
        };








        /**
        * Grow
        *
        * The HBar chart Grow effect gradually increases the values of the bars
        *
        * @param object       An object of options - eg: {frames: 30}
        * @param function     A function to call when the effect is complete
        */
        this.grow = function ()
        {
            // Callback
            var opt         = arguments[0] || {},
                frames      = opt.frames || 30,
                frame       = 0,
                callback    = arguments[1] || function () {},
                obj         = this,
                labelsAbove = this.get('labelsAbove')




            this.original_data = RG.arrayClone(this.data);



            // Stop the scale from changing by setting chart.xmax (if it's not already set)
            if (prop['chart.xmax'] == 0) {

                var xmax = 0;
    
                for (var i=0; i<obj.data.length; ++i) {
                    if (RG.isArray(obj.data[i]) && prop['chart.grouping'] == 'stacked') {
                        xmax = ma.max(xmax, RG.arraySum(obj.data[i]));
                    } else if (RG.isArray(obj.data[i]) && prop['chart.grouping'] == 'grouped') {
                        xmax = ma.max(xmax, RG.arrayMax(obj.data[i]));
                    } else {
                        xmax = ma.max(xmax, ma.abs(RG.arrayMax(obj.data[i])));
                    }
                }

                var scale2 = RG.getScale2(obj, {'max':xmax});
                obj.Set('chart.xmax', scale2.max);
            }


            // Go through the data and change string arguments of the format +/-[0-9]
            // to absolute numbers
            if (RG.isArray(opt.data)) {

                var xmax = 0;

                for (var i=0; i<opt.data.length; ++i) {
                    if (typeof opt.data[i] === 'object') {
                        for (var j=0; j<opt.data[i].length; ++j) {
                            if (typeof opt.data[i][j] === 'string'&& opt.data[i][j].match(/(\+|\-)([0-9]+)/)) {
                                if (RegExp.$1 === '+') {
                                    opt.data[i][j] = this.original_data[i][j] + parseInt(RegExp.$2);
                                } else {
                                    opt.data[i][j] = this.original_data[i][j] - parseInt(RegExp.$2);
                                }
                            }

                            xmax = ma.max(xmax, opt.data[i][j]);
                        }
                    } else if (typeof opt.data[i] === 'string' && opt.data[i].match(/(\+|\-)([0-9]+)/)) {
                        if (RegExp.$1 === '+') {
                            opt.data[i] = this.original_data[i] + parseFloat(RegExp.$2);
                        } else {
                            opt.data[i] = this.original_data[i] - parseFloat(RegExp.$2);
                        }

                        xmax = ma.max(xmax, opt.data[i]);
                    } else {
                        xmax = ma.max(xmax, opt.data[i]);
                    }
                }


                var scale = RG.getScale2(this, {'max':xmax});
                if (typeof this.get('chart.xmax') === 'null') {
                    this.set('chart.xmax', scale.max);
                }
            }






            //
            // turn off the labelsAbove option whilst animating
            //
            this.set('labelsAbove', false);






            // Stop the scale from changing by setting chart.xmax (if it's not already set)
            if (RG.isNull(prop['chart.xmax'])) {

                var xmax = 0;

                for (var i=0; i<obj.data.length; ++i) {
                    if (RG.isArray(this.data[i]) && prop['chart.grouping'] === 'stacked') {
                        xmax = ma.max(xmax, ma.abs(RG.arraySum(this.data[i])));

                    } else if (RG.isArray(this.data[i]) && prop['chart.grouping'] === 'grouped') {

                        for (var j=0,group=[]; j<this.data[i].length; j++) {
                            group.push(ma.abs(this.data[i][j]));
                        }

                        xmax = ma.max(xmax, ma.abs(RG.arrayMax(group)));

                    } else {
                        xmax = ma.max(xmax, ma.abs(this.data[i]));
                    }
                }

                var scale = RG.getScale2(this, {'max':xmax});
                this.Set('chart.xmax', scale.max);
            }

            // You can give an xmax to the grow function
            if (typeof opt.xmax === 'number') {
                obj.set('xmax', opt.xmax);
            }



            var iterator = function ()
            {
                var easingMultiplier = RG.Effects.getEasingMultiplier(frames, frame);

                // Alter the Bar chart data depending on the frame
                for (var j=0,len=obj.original_data.length; j<len; ++j) {
                    if (typeof obj.data[j] === 'object' && !RG.isNull(obj.data[j])) {
                        for (var k=0,len2=obj.data[j].length; k<len2; ++k) {
                            if (obj.firstDraw || !opt.data) {
                                obj.data[j][k] = easingMultiplier * obj.original_data[j][k];
                            } else if (opt.data && opt.data.length === obj.original_data.length) {
                                var diff    = opt.data[j][k] - obj.original_data[j][k];
                                obj.data[j][k] = (easingMultiplier * diff) + obj.original_data[j][k];
                            }
                        }
                    } else {

                        if (obj.firstDraw || !opt.data) {
                            obj.data[j] = easingMultiplier * obj.original_data[j];
                        } else if (opt.data && opt.data.length === obj.original_data.length) {
                            var diff    = opt.data[j] - obj.original_data[j];
                            obj.data[j] = (easingMultiplier * diff) + obj.original_data[j];
                        }
                    }
                }




                //RGraph.clear(obj.canvas);
                RG.redrawCanvas(obj.canvas);




                if (frame < frames) {
                    frame += 1;

                    RG.Effects.updateCanvas(iterator);

                // Call the callback function
                } else {





                    // Do some housekeeping if new data was specified thats done in
                    // the constructor - but needs to be redone because new data
                    // has been specified
                    if (RG.isArray(opt.data)) {

                        var linear_data = RG.arrayLinearize(data);

                        for (var i=0; i<linear_data.length; ++i) {
                            if (!obj['$' + i]) {
                                obj['$' + i] = {};
                            }
                        }
                    }



                    obj.data = data;
                    obj.original_data = RG.arrayClone(data);





                    if (labelsAbove) {
                        obj.set('labelsAbove', true);
                        RG.redraw();
                    }
                    callback(obj);
                }
            };

            iterator();

            return this;
        };








        /**
        * (new) Bar chart Wave effect. This is a rewrite that should be smoother
        * because it just uses a single loop and not setTimeout
        * 
        * @param object   OPTIONAL An object map of options. You specify 'frames' here to give the number of frames in the effect
        * @param function OPTIONAL A function that will be called when the effect is complete
        */
        this.wave = function ()
        {
            var obj = this,
                opt = arguments[0] || {};
                opt.frames      = opt.frames || 60;
                opt.startFrames = [];
                opt.counters    = [];

            var framesperbar   = opt.frames / 3,
                frame          = -1,
                callback       = arguments[1] || function () {},
                original       = RG.arrayClone(obj.data),
                labelsAbove    = prop['chart.labels.above'];

            this.set('labelsAbove', false);

            for (var i=0,len=obj.data.length; i<len; i+=1) {
                opt.startFrames[i] = ((opt.frames / 2) / (obj.data.length - 1)) * i;
                
                if (typeof obj.data[i] === 'object' && obj.data[i]) {
                    opt.counters[i] = [];
                    for (var j=0; j<obj.data[i].length; j++) {
                        opt.counters[i][j] = 0;
                    }
                } else {
                    opt.counters[i]    = 0;
                }
            }

            /**
            * This stops the chart from jumping
            */
            obj.draw();
            obj.Set('xmax', obj.scale2.max);
            RG.clear(obj.canvas);

            function iterator ()
            {
                ++frame;

                for (var i=0,len=obj.data.length; i<len; i+=1) {
                    if (frame > opt.startFrames[i]) {
                        if (typeof obj.data[i] === 'number') {
                            
                            obj.data[i] = ma.min(
                                ma.abs(original[i]),
                                ma.abs(original[i] * ( (opt.counters[i]++) / framesperbar))
                            );
                            
                            // Make the number negative if the original was
                            if (original[i] < 0) {
                                obj.data[i] *= -1;
                            }
                        } else if (!RG.isNull(obj.data[i])) {
                            for (var j=0,len2=obj.data[i].length; j<len2; j+=1) {
                                
                                obj.data[i][j] = ma.min(
                                    ma.abs(original[i][j]),
                                    ma.abs(original[i][j] * ( (opt.counters[i][j]++) / framesperbar))
                                );

                                // Make the number negative if the original was
                                if (original[i][j] < 0) {
                                    obj.data[i][j] *= -1;
                                }
                            }
                        }
                    } else {
                        obj.data[i] = typeof obj.data[i] === 'object' && obj.data[i] ? RG.arrayPad([], obj.data[i].length, 0) : (RG.isNull(obj.data[i]) ? null : 0);
                    }
                }


                if (frame >= opt.frames) {

                    if (labelsAbove) {
                        obj.set('labelsAbove', true);
                        RG.redrawCanvas(obj.canvas);
                    }

                    callback(obj);
                } else {
                    RG.redrawCanvas(obj.canvas);
                    RG.Effects.updateCanvas(iterator);
                }
            }
            
            iterator();

            return this;
        };




        //
        // Determines whether the given shape is adjustable or not
        //
        // @param object The shape that pertains to the relevant bar
        //
        this.isAdjustable = function (shape)
        {
            if (RG.isNull(prop['chart.adjustable.only'])) {
                return true;
            }

            if (RG.isArray(prop['chart.adjustable.only']) && prop['chart.adjustable.only'][shape.index]) {
                return true;
            }

            return false;
        };




        /**
        * Charts are now always registered
        */
        RG.Register(this);




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