rgraph-rails 1.0.7 → 1.0.8

data/vendor/assets/javascripts/RGraph.hbar.js

@@ -1,147 +1,2563 @@
+// version: 2017-01-02
+    /**
+    * 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!                                                           |
+    * o--------------------------------------------------------------------------------o
+    */
 
-RGraph=window.RGraph||{isRGraph:true};RGraph.HBar=function(conf)
-{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;}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;this.max=0;this.stackedOrGrouped=false;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.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}
-if(!this.canvas){alert('[HBAR] No canvas support');return;}
-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;}}
-var linear_data=RGraph.arrayLinearize(data);for(var i=0,len=linear_data.length;i<len;++i){this['$'+i]={};}
-this.data_arr=RGraph.arrayLinearize(this.data);if(!this.canvas.__rgraph_aa_translated__){this.context.translate(0.5,0.5);this.canvas.__rgraph_aa_translated__=true;}
-var RG=RGraph,ca=this.canvas,co=ca.getContext('2d'),prop=this.properties,pa2=RG.path2,win=window,doc=document,ma=Math
-if(RG.Effects&&typeof RG.Effects.decorate==='function'){RG.Effects.decorate(this);}
-this.set=this.Set=function(name)
-{var value=typeof arguments[1]==='undefined'?null:arguments[1];if(arguments.length===1&&typeof name==='object'){RG.parseObjectStyleConfig(this,name);return this;}
-if(name.substr(0,6)!='chart.'){name='chart.'+name;}
-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;};this.get=this.Get=function(name)
-{if(name.substr(0,6)!='chart.'){name='chart.'+name;}
-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];};this.draw=this.Draw=function()
-{RG.fireCustomEvent(this,'onbeforedraw');if(prop['chart.adjustable']&&prop['chart.grouping']==='stacked'){alert('[RGRAPH] The HBar does not support stacked charts with adjusting');}
-if(prop['chart.variant']==='3d'){if(prop['chart.text.accessible']){}else{co.setTransform(1,prop['chart.variant.threed.angle'],0,1,0.5,0.5);}
-if(prop['chart.gutter.bottom']===25){this.set('gutterBottom',80);}}
-if(!this.colorsParsed){this.parseColors();this.colorsParsed=true;}
-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.gutterLeft=prop['chart.gutter.left'];this.gutterRight=prop['chart.gutter.right'];this.gutterTop=prop['chart.gutter.top'];this.gutterBottom=prop['chart.gutter.bottom'];this.coords=[];this.coords2=[];this.coordsText=[];this.max=0;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);}
-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)
-RG.Background.draw(this);this.drawbars();this.drawAxes();this.drawLabels();if(prop['chart.key']&&prop['chart.key'].length){RG.DrawKey(this,prop['chart.key'],prop['chart.colors']);}
-if(prop['chart.contextmenu']){RG.ShowContext(this);}
-RG.DrawInGraphLabels(this);if(prop['chart.resizable']){RG.AllowResizing(this);}
-RG.InstallEventListeners(this);if(this.firstDraw){RG.fireCustomEvent(this,'onfirstdraw');this.firstDraw=false;this.firstDrawFunc();}
-RG.FireCustomEvent(this,'ondraw');return this;};this.exec=function(func)
-{func(this);return this;};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'];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);}}
-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);}
-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(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));}}}
-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(prop['chart.noyaxis']==true){co.moveTo(this.gutterLeft,ma.round(yStart));co.lineTo(this.gutterLeft,ma.round(yEnd));}}
-co.stroke();co.lineWidth=1;};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']
-if(prop['chart.units.ingraph']){units_pre='';units_post='';}
-if(prop['chart.xlabels']){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':'center','tag':'scale'});}
-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':'center','tag':'scale'});}}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':'center','tag':'scale'});}}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:'center',tag:'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':'center','tag':'scale'});}
-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':'center','tag':'scale'});}}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':'center','tag':'scale'});}}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':'center','tag':'scale'});}}
-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;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':'center','tag':'scale'});}
-co.fill();co.stroke();}}
-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']
-co.fillStyle=color;var barHeight=(ca.height-this.gutterTop-this.gutterBottom)/prop['chart.labels'].length;yTickGap=(ca.height-this.gutterTop-this.gutterBottom)/prop['chart.labels'].length
-if(prop['chart.yaxispos']==='right'){var x=ca.width-this.gutterRight+xOffset;var halign='left'}else{var x=this.gutterLeft-xOffset;var halign='right'}
-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.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;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);}
-var colorIdx=0;this.numbars=RG.arrayLinearize(this.data).length;if(prop['chart.adjustable']&&!prop['chart.xmax']){this.set('chart.xmax',this.scale2.max);}
-if(prop['chart.variant']==='3d'){RG.draw3DAxes(this);}
-var graphwidth=(ca.width-this.gutterLeft-this.gutterRight);var halfwidth=graphwidth/2;for(i=(len=this.data.length-1);i>=0;--i){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'];if(prop['chart.yaxispos']==='right'){x=ca.width-this.gutterRight-ma.abs(width);}
-if(width<0){x-=width;width=ma.abs(width);}
-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'];}
-co.beginPath();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;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;}
-co.strokeStyle=prop['chart.strokestyle'];co.fillStyle=prop['chart.colors'][0];++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]);if(prop['chart.variant']==='3d'&&typeof this.data[i]=='number'){var prevStrokeStyle=co.strokeStyle,prevFillStyle=co.fillStyle;RG.noShadow(this);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)']);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)']);}}}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){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'];}
-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));co.strokeStyle=prop['chart.strokestyle'];++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));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)]);if(prop['chart.variant']==='3d'){RG.noShadow(this);var prevStrokeStyle=co.strokeStyle,prevFillStyle=co.fillStyle;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)']);}
-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;}}}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){if(prop['chart.shadow']){RG.setShadow(this,prop['chart.shadow.color'],prop['chart.shadow.offsetx'],prop['chart.shadow.offsety'],prop['chart.shadow.blur']);}
-co.strokeStyle=prop['chart.strokestyle'];++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;if(prop['chart.yaxispos']=='center'){width/=2;startX+=halfwidth;}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]);if(prop['chart.variant']==='3d'){RG.noShadow(this);var prevStrokeStyle=co.strokeStyle,prevFillStyle=co.fillStyle;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)']);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();if(prop['chart,yaxispos']==='right'){pa2(co,'cr % % % %',ca.width-this.gutterRight+prop['chart.variant.threed.offsetx'],'0',this.gutterRight,ca.height);}
-if(prop['chart.yaxispos']==='right'&&prop['chart.variant']==='3d'){RG.draw3DYAxis(this);}
-RG.noShadow(this);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.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]);}
-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);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.getShape=this.getBar=function(e)
-{var mouseXY=RG.getMouseXY(e);for(var i=0,len=this.coords.length;i<len;i++){var mouseX=mouseXY[0],mouseY=mouseXY[1],left=this.coords[i][0],top=this.coords[i][1],width=this.coords[i][2],height=this.coords[i][3],idx=i;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};}}};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
-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']);}}}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;};this.highlight=this.Highlight=function(shape)
-{if(typeof prop['chart.highlight.style']==='function'){(prop['chart.highlight.style'])(shape);}else{RG.Highlight.Rect(this,shape);}};this.getObjectByXY=function(e)
-{var mouseXY=RG.getMouseXY(e);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.getXCoord=function(value)
-{if(prop['chart.yaxispos']=='center'){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{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()
-{if(this.original_colors.length===0){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']);};this.reset=function()
-{};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);}
-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.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]);co.lineWidth=pre_linewidth;});};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.firstDrawFunc=function()
-{};this.getShapeByY=function(e)
-{var mouseXY=RG.getMouseXY(e);var obj=arguments[1]?arguments[1]:this;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.adjusting_mousemove=this.Adjusting_mousemove=function(e)
-{if(prop['chart.adjustable']&&RG.Registry.get('chart.adjusting')&&RG.Registry.get('chart.adjusting').uid==this.uid){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');}}};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);obj.original_data=RG.arrayClone(obj.data);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()
-{for(var j=0,len=obj.original_data.length;j<len;++j){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;};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;}}
-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)));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)));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;};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;};RG.Register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};
+    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.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) {
+                RG.fireCustomEvent(this, 'onfirstdraw');
+                this.firstDraw = false;
+                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':'center',
+                                    'tag': 'scale'
+                                });
+                        }
+                        
+                        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':'center',
+                                    'tag': 'scale'
+                                });
+                        }
+
+                    } 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':'center',
+                                    'tag':  'scale'
+                                });
+                        }
+
+                    } 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:'center',
+                                    tag:   'scale'
+                                });
+                        }
+                    }
+
+                /**
+                * 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':'center',
+                                'tag': 'scale'
+                            });
+                        }
+        
+                        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':'center',
+                                'tag': 'scale'
+                            });
+                        }
+                
+                    }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':'center',
+                                'tag': 'scale'
+                            });
+                        }
+
+
+                    } 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':'center',
+                                'tag': 'scale'
+                            });
+                        }
+                    }
+        
+                    /**
+                    * 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':'center',
+                            'tag': 'scale'
+                        });
+                    }
+        
+                    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.ymax (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;
+        };
+
+
+
+
+        /**
+        * (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);
+        }
+    };