rgraph-rails 5.00 → 6.14

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

@@ -1,172 +1,4216 @@
+'version:2023-09-16 (6.14)';
+//
+    // o--------------------------------------------------------------------------------o
+    // | This file is part of the RGraph package - you can learn more at:               |
+    // |                                                                                |
+    // |                         https://www.rgraph.net                                 |
+    // |                                                                                |
+    // | RGraph is licensed under the Open Source MIT license. That means that it's     |
+    // | totally free to use and there are no restrictions on what you can do with it!  |
+    // o--------------------------------------------------------------------------------o
 
-RGraph=window.RGraph||{isRGraph:true};RGraph.Scatter=function(conf)
-{if(typeof conf==='object'&&typeof conf.data==='object'&&typeof conf.id==='string'){var parseConfObjectForOptions=true;this.data=new Array(conf.data.length);this.data=RGraph.arrayClone(conf.data);if(typeof conf.data==='object'&&typeof conf.data[0]==='object'&&(typeof conf.data[0][0]==='number'||typeof conf.data[0][0]==='string')){var tmp=RGraph.arrayClone(conf.data);conf.data=new Array();conf.data[0]=RGraph.arrayClone(tmp);this.data=RGraph.arrayClone(conf.data);}}else{var conf={id:conf};conf.data=arguments[1];this.data=[];if(arguments[1][0]&&arguments[1][0][0]&&typeof arguments[1][0][0]=='object'){for(var i=0;i<arguments[1].length;++i){this.data[i]=RGraph.arrayClone(arguments[1][i]);}}else{for(var i=1;i<arguments.length;++i){this.data[i-1]=RGraph.arrayClone(arguments[i]);}}}
-if(!RGraph.isArray(this.data[0][0])){this.data=[this.data];}
-for(var i=0,len=this.data.length;i<len;++i){for(var j=0,len2=this.data[i].length;j<len2;++j){if(typeof this.data[i][j]==='object'&&!RGraph.isNull(this.data[i][j])&&typeof this.data[i][j][0]==='string'){if(this.data[i][j][0].match(/^[.0-9]+$/)){this.data[i][j][0]=parseFloat(this.data[i][j][0]);}else if(this.data[i][j][0]===''){this.data[i][j][0]=0;}}
-if(typeof this.data[i][j]==='object'&&!RGraph.isNull(this.data[i][j])&&typeof this.data[i][j][1]==='string'){if(this.data[i][j][1].match(/[.0-9]+/)){this.data[i][j][1]=parseFloat(this.data[i][j][1]);}else if(this.data[i][j][1]===''){this.data[i][j][1]=0;}}}}
-this.id=conf.id;this.canvas=document.getElementById(this.id);this.canvas.__object__=this;this.context=this.canvas.getContext?this.canvas.getContext('2d'):null;this.max=0;this.coords=[];this.type='scatter';this.isRGraph=true;this.uid=RGraph.CreateUID();this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.CreateUID();this.colorsParsed=false;this.coordsText=[];this.original_colors=[];this.firstDraw=true;this.propertyNameAliases={};this.properties={'chart.background.bars.count':null,'chart.background.bars.color1':'rgba(0,0,0,0)','chart.background.bars.color2':'rgba(0,0,0,0)','chart.background.hbars':null,'chart.background.vbars':null,'chart.background.grid':true,'chart.background.grid.linewidth':1,'chart.background.grid.color':'#ddd','chart.background.grid.hsize':20,'chart.background.grid.vsize':20,'chart.background.grid.vlines':true,'chart.background.grid.hlines':true,'chart.background.grid.border':true,'chart.background.grid.autofit':true,'chart.background.grid.autofit.align':true,'chart.background.grid.hlines.count':5,'chart.background.grid.vlines.count':20,'chart.background.image':null,'chart.background.image.stretch':true,'chart.background.image.x':null,'chart.background.image.y':null,'chart.background.image.w':null,'chart.background.image.h':null,'chart.background.image.align':null,'chart.background.color':null,'chart.colors.bubble.graduated':true,'chart.text.color':'black','chart.text.font':'Arial, Verdana, sans-serif','chart.text.size':12,'chart.text.bold':false,'chart.text.italic':false,'chart.text.accessible':true,'chart.text.accessible.overflow':'visible','chart.text.accessible.pointerevents':false,'chart.tooltips':[],'chart.tooltips.effect':'fade','chart.tooltips.event':'onmousemove','chart.tooltips.hotspot':3,'chart.tooltips.css.class':'RGraph_tooltip','chart.tooltips.highlight':true,'chart.tooltips.coords.page':false,'chart.xaxis':true,'chart.xaxis.position':'bottom','chart.xaxis.tickmarks.count':true,'chart.xaxis.tickmarks.last':true,'chart.xaxis.title':'','chart.xaxis.title.bold':null,'chart.xaxis.title.size':null,'chart.xaxis.title.font':null,'chart.xaxis.title.color':null,'chart.xaxis.title.italic':null,'chart.xaxis.title.pos':null,'chart.xaxis.title.x':null,'chart.xaxis.title.y':null,'chart.xaxis.labels.specific.align':'left','chart.xaxis.scale':false,'chart.xaxis.scale.min':0,'chart.xaxis.scale.max':null,'chart.xaxis.scale.units.pre':'','chart.xaxis.scale.units.post':'','chart.xaxis.scale.labels.count':10,'chart.xaxis.scale.formatter':null,'chart.xaxis.scale.decimals':0,'chart.xaxis.scale.thousand':',','chart.xaxis.scale.point':'.','chart.xaxis.labels.angle':0,'chart.xaxis.labels':[],'chart.xaxis.labels.bold':null,'chart.xaxis.labels.italic':null,'chart.xaxis.labels.color':null,'chart.xaxis.labels.font':null,'chart.xaxis.labels.size':null,'chart.xaxis.labels.offsetx':0,'chart.xaxis.labels.offsety':0,'chart.yaxis':true,'chart.yaxis.position':'left','chart.yaxis.labels':true,'chart.yaxis.labels.offsetx':0,'chart.yaxis.labels.offsety':0,'chart.yaxis.labels.count':5,'chart.yaxis.labels.specific':null,'chart.yaxis.labels.inside':false,'chart.yaxis.labels.font':null,'chart.yaxis.labels.size':null,'chart.yaxis.labels.color':null,'chart.yaxis.labels.bold':null,'chart.yaxis.labels.italic':null,'chart.yaxis.tickmarks.count':10,'chart.yaxis.scale.invert':false,'chart.yaxis.scale.units.pre':'','chart.yaxis.scale.units.post':'','chart.yaxis.scale.max':null,'chart.yaxis.scale.min':0,'chart.yaxis.scale.decimals':0,'chart.yaxis.scale.point':'.','chart.yaxis.scale.thousand':',','chart.yaxis.scale.zerostart':true,'chart.yaxis.title':'','chart.yaxis.title.bold':null,'chart.yaxis.title.italic':null,'chart.yaxis.title.size':null,'chart.yaxis.title.font':null,'chart.yaxis.title.color':null,'chart.yaxis.title.pos':null,'chart.yaxis.title.x':null,'chart.yaxis.title.y':null,'chart.tickmarks.style':'cross','chart.tickmarks.style.image.halign':'center','chart.tickmarks.style.image.valign':'center','chart.tickmarks.style.image.offsetx':0,'chart.tickmarks.style.image.offsety':0,'chart.tickmarks.size':5,'chart.margin.left':25,'chart.margin.right':25,'chart.margin.top':25,'chart.margin.bottom':30,'chart.title':'','chart.title.background':null,'chart.title.hpos':null,'chart.title.vpos':null,'chart.title.bold':null,'chart.title.italic':null,'chart.title.font':null,'chart.title.size':null,'chart.title.italic':null,'chart.title.x':null,'chart.title.y':null,'chart.title.halign':null,'chart.title.valign':null,'chart.labels.ingraph':null,'chart.labels.ingraph.font':null,'chart.labels.ingraph.size':null,'chart.labels.ingraph.color':null,'chart.labels.ingraph.bold':null,'chart.labels.ingraph.italic':null,'chart.labels.above':false,'chart.labels.above.size':null,'chart.labels.above.font':null,'chart.labels.above.color':null,'chart.labels.above.bold':null,'chart.labels.above.italic':null,'chart.labels.above.decimals':0,'chart.contextmenu':null,'chart.colors.default':'black','chart.crosshairs':false,'chart.crosshairs.hline':true,'chart.crosshairs.vline':true,'chart.crosshairs.color':'#333','chart.crosshairs.linewidth':1,'chart.crosshairs.coords':false,'chart.crosshairs.coords.fixed':true,'chart.crosshairs.coords.fadeout':false,'chart.crosshairs.coords.labels.x':'X','chart.crosshairs.coords.labels.y':'Y','chart.crosshairs.coords.formatter.x':null,'chart.crosshairs.coords.formatter.y':null,'chart.annotatable':false,'chart.annotatable.color':'black','chart.annotatable.linewidth':1,'chart.line':false,'chart.line.linewidth':1,'chart.line.colors':['green','red','blue','orange','pink','brown','black','gray'],'chart.line.shadow.color':'rgba(0,0,0,0)','chart.line.shadow.blur':2,'chart.line.shadow.offsetx':3,'chart.line.shadow.offsety':3,'chart.line.stepped':false,'chart.line.visible':true,'chart.axes':true,'chart.axes.color':'black','chart.axes.linewidth':1,'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.interactive':false,'chart.key.interactive.highlight.chart.fill':'rgba(255,0,0,0.9)','chart.key.interactive.highlight.label':'rgba(255,0,0,0.2)','chart.key.color.shape':'square','chart.key.rounded':true,'chart.key.linewidth':1,'chart.key.colors':null,'chart.key.labels.color':null,'chart.key.labels.font':null,'chart.key.labels.size':null,'chart.key.labels.bold':null,'chart.key.labels.italic':null,'chart.key.labels.offsetx':0,'chart.key.labels.offsety':0,'chart.boxplot.width':10,'chart.boxplot.capped':true,'chart.resizable':false,'chart.resizable.handle.background':null,'chart.events.mousemove':null,'chart.events.click':null,'chart.highlight.stroke':'rgba(0,0,0,0)','chart.highlight.fill':'rgba(255,255,255,0.7)','chart.clearto':'rgba(0,0,0,0)','chart.animation.trace':false,'chart.animation.trace.clip':1}
-for(var i=0;i<this.data.length;++i){for(var j=0;j<this.data[i].length;++j){if(RGraph.isNull(this.data[i][j])){this.data[i][j]=[];}
-if(this.data[i][j]&&typeof(this.data[i][j][0])=='string'){this.data[i][j][0]=RGraph.parseDate(this.data[i][j][0]);}}}
-this.data_arr=[];for(var i=0;i<this.data.length;++i){for(var j=0;j<this.data[i].length;++j){this.data_arr.push(this.data[i][j]);}}
-for(var i=0;i<this.data_arr.length;++i){this['$'+i]={}}
-if(!this.canvas){alert('[SCATTER] No canvas support');return;}
-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());}
-prop[name.toLowerCase()]=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());}
-return prop[name];};this.draw=this.Draw=function()
-{if(typeof prop['chart.background.image']==='string'){RG.DrawBackgroundImage(this);}
-RG.fireCustomEvent(this,'onbeforedraw');if(!this.colorsParsed){this.parseColors();this.colorsParsed=true;}
-this.coordsText=[];this.marginLeft=prop['chart.margin.left'];this.marginRight=prop['chart.margin.right'];this.marginTop=prop['chart.margin.top'];this.marginBottom=prop['chart.margin.bottom'];this.hasTooltips=false;var overHotspot=false;this.coords=[];if(typeof(prop['chart.xaxis.scale.min'])=='string')prop['chart.xaxis.scale.min']=RG.parseDate(prop['chart.xaxis.scale.min']);if(typeof(prop['chart.xaxis.scale.max'])=='string')prop['chart.xaxis.scale.max']=RG.parseDate(prop['chart.xaxis.scale.max']);this.Set('chart.tooltips',[]);for(var i=0,len=this.data.length;i<len;i+=1){for(var j=0,len2=this.data[i].length;j<len2;j+=1){if(this.data[i][j]&&this.data[i][j][3]){prop['chart.tooltips'].push(this.data[i][j][3]);this.hasTooltips=true;}else{prop['chart.tooltips'].push(null);}}}
-this.max=0;if(typeof prop['chart.yaxis.scale.max']==='number'){this.max=prop['chart.yaxis.scale.max'];this.min=prop['chart.yaxis.scale.min']?prop['chart.yaxis.scale.min']:0;this.scale2=RG.getScale2(this,{'scale.max':this.max,'scale.min':this.min,'scale.strict':true,'scale.thousand':prop['chart.yaxis.scale.thousand'],'scale.point':prop['chart.yaxis.scale.point'],'scale.decimals':prop['chart.yaxis.scale.decimals'],'scale.labels.count':prop['chart.yaxis.labels.count'],'scale.round':prop['chart.yaxis.scale.round'],'scale.units.pre':prop['chart.yaxis.scale.units.pre'],'scale.units.post':prop['chart.yaxis.scale.units.post']});this.max=this.scale2.max;this.min=this.scale2.min;var decimals=prop['chart.yaxis.scale.decimals'];}else{var i=0;var j=0;for(i=0,len=this.data.length;i<len;i+=1){for(j=0,len2=this.data[i].length;j<len2;j+=1){if(!RG.isNull(this.data[i][j])&&this.data[i][j][1]!=null){this.max=Math.max(this.max,typeof(this.data[i][j][1])=='object'?RG.array_max(this.data[i][j][1]):Math.abs(this.data[i][j][1]));}}}
-this.min=prop['chart.yaxis.scale.min']?prop['chart.yaxis.scale.min']:0;this.scale2=RG.getScale2(this,{'scale.max':this.max,'scale.min':this.min,'scale.thousand':prop['chart.yaxis.scale.thousand'],'scale.point':prop['chart.yaxis.scale.point'],'scale.decimals':prop['chart.yaxis.scale.decimals'],'scale.labels.count':prop['chart.yaxis.labels.count'],'scale.round':prop['chart.yaxis.scale.round'],'scale.units.pre':prop['chart.yaxis.scale.units.pre'],'scale.units.post':prop['chart.yaxis.scale.units.post']});this.max=this.scale2.max;this.min=this.scale2.min;}
-this.grapharea=ca.height-this.marginTop-this.marginBottom;RG.background.Draw(this);if(prop['chart.background.hbars']&&prop['chart.background.hbars'].length){RG.DrawBars(this);}
-if(prop['chart.background.vbars']&&prop['chart.background.vbars'].length){this.DrawVBars();}
-if(prop['chart.axes']){this.DrawAxes();}
-this.DrawLabels();if(prop['chart.animation.trace']){co.save();co.beginPath();co.rect(0,0,ca.width*prop['chart.animation.trace.clip'],ca.height);co.clip();}
-for(i=0;i<this.data.length;++i){this.DrawMarks(i);co.shadowColor=prop['chart.line.shadow.color'];co.shadowOffsetX=prop['chart.line.shadow.offsetx'];co.shadowOffsetY=prop['chart.line.shadow.offsety'];co.shadowBlur=prop['chart.line.shadow.blur'];this.DrawLine(i);RG.NoShadow(this);}
-if(prop['chart.line']){for(var i=0,len=this.data.length;i<len;i+=1){this.DrawMarks(i);}}
-if(prop['chart.animation.trace']){co.restore();}
-if(prop['chart.contextmenu']){RG.ShowContext(this);}
-if(prop['chart.key']&&prop['chart.key'].length){RG.DrawKey(this,prop['chart.key'],prop['chart.line.colors']);}
-if(prop['chart.labels.above']){this.DrawAboveLabels();}
-this.DrawInGraphLabels(this);if(prop['chart.resizable']){RG.AllowResizing(this);}
-RG.InstallEventListeners(this);if(this.firstDraw){this.firstDraw=false;RG.fireCustomEvent(this,'onfirstdraw');this.firstDrawFunc();}
-RG.FireCustomEvent(this,'ondraw');return this;}
-this.drawAxes=this.DrawAxes=function()
-{var graphHeight=ca.height-this.marginTop-this.marginBottom;co.beginPath();co.strokeStyle=prop['chart.axes.color'];co.lineWidth=(prop['chart.axes.linewidth']||1)+0.001;if(prop['chart.yaxis']){if(prop['chart.yaxis.position']=='left'){co.moveTo(this.marginLeft,this.marginTop);co.lineTo(this.marginLeft,ca.height-this.marginBottom);}else{co.moveTo(ca.width-this.marginRight,this.marginTop);co.lineTo(ca.width-this.marginRight,ca.height-this.marginBottom);}}
-if(prop['chart.xaxis']){if(prop['chart.xaxis.position']=='center'){co.moveTo(this.marginLeft,ma.round(this.marginTop+((ca.height-this.marginTop-this.marginBottom)/2)));co.lineTo(ca.width-this.marginRight,ma.round(this.marginTop+((ca.height-this.marginTop-this.marginBottom)/2)));}else{var y=this.getYCoord(this.scale2.min>0?this.scale2.min:0);if(prop['chart.yaxis.scale.invert']&&this.scale2.min===0){y=ca.height-this.marginBottom;}
-co.moveTo(this.marginLeft,y);co.lineTo(ca.width-this.marginRight,y);}}
-if(prop['chart.yaxis']){var numyticks=prop['chart.yaxis.tickmarks.count'];for(i=0;i<numyticks;++i){var y=((ca.height-this.marginTop-this.marginBottom)/numyticks)*i;y=y+this.marginTop;if(prop['chart.xaxis.position']=='center'&&i==(numyticks/2)){continue;}
-if(prop['chart.yaxis.position']=='left'){co.moveTo(this.marginLeft,ma.round(y));co.lineTo(this.marginLeft-3,ma.round(y));}else{co.moveTo(ca.width-this.marginRight+3,Math.round(y));co.lineTo(ca.width-this.marginRight,Math.round(y));}}
-if(prop['chart.yaxis.tickmarks.count']>0){if(prop['chart.xaxis.position']==='center'&&prop['chart.yaxis.position']=='left'){co.moveTo(this.marginLeft,ma.round(ca.height-this.marginBottom));co.lineTo(this.marginLeft-3,ma.round(ca.height-this.marginBottom));}else if(prop['chart.xaxis.position']==='center'&&prop['chart.yaxis.position']=='right'){co.moveTo(ca.width-this.marginRight+3,ma.round(ca.height-this.marginBottom));co.lineTo(ca.width-this.marginRight,ma.round(ca.height-this.marginBottom));}}
-if(!prop['chart.xaxis']&&prop['chart.yaxis.position']==='left'){co.moveTo(this.marginLeft,ma.round(ca.height-this.marginBottom));co.lineTo(this.marginLeft-3,ma.round(ca.height-this.marginBottom));}else if(!prop['chart.xaxis']&&prop['chart.yaxis.position']==='right'){co.moveTo(ca.width-this.marginRight,ma.round(ca.height-this.marginBottom));co.lineTo(ca.width-this.marginRight+3,ma.round(ca.height-this.marginBottom));}
-if(prop['chart.xaxis.position']==='bottom'&&prop['chart.yaxis.tickmarks.count']>0&&prop['chart.yaxis.scale.min']<0){if(prop['chart.yaxis.position']=='left'){co.moveTo(this.marginLeft,ma.round(this.getYCoord(prop['chart.yaxis.scale.min'])));co.lineTo(this.marginLeft-3,ma.round(this.getYCoord(prop['chart.yaxis.scale.min'])));}else{co.moveTo(ca.width-this.marginRight+3,ma.round(this.getYCoord(prop['chart.yaxis.scale.min'])));co.lineTo(ca.width-this.marginRight,ma.round(this.getYCoord(prop['chart.yaxis.scale.min'])));}}}
-if(prop['chart.xaxis.tickmarks.count']>0&&prop['chart.xaxis']){var x=0,y=this.getYCoord(prop['chart.yaxis.scale.invert']?this.scale2.max:(this.scale2.max>0&&this.scale2.min>0?this.scale2.min:0))-3,size=3;if(prop['chart.yaxis.scale.min']===0&&prop['chart.xaxis.position']==='bottom'){y+=3;}
-if(this.scale2.max>0&&this.scale2.min>0){y+=3;}
-this.xTickGap=(prop['chart.xaxis.labels']&&prop['chart.xaxis.labels'].length)?((ca.width-this.marginLeft-this.marginRight)/prop['chart.xaxis.labels'].length):(ca.width-this.marginLeft-this.marginRight)/10;if(typeof(prop['chart.xaxis.tickmarks.count'])=='number'){this.xTickGap=(ca.width-this.marginLeft-this.marginRight)/prop['chart.xaxis.tickmarks.count'];}
-for(x=(this.marginLeft+(prop['chart.yaxis.position']=='left'&&prop['chart.yaxis']?this.xTickGap:0));x<=(ca.width-this.marginRight-(prop['chart.yaxis.position']=='left'||!prop['chart.yaxis']?-1:1));x+=this.xTickGap){if(prop['chart.yaxis.position']=='left'&&!prop['chart.xaxis.tickmarks.last']&&x==(ca.width-this.marginRight)){continue;}else if(prop['chart.yaxis.position']=='right'&&!prop['chart.xaxis.tickmarks.last']&&x==this.marginLeft){continue;}
-co.moveTo(ma.round(x),y);co.lineTo(ma.round(x),y+(prop['chart.xaxis.position']==='center'||prop['chart.yaxis.scale.min']<0?size*2:size));}}
-co.stroke();co.lineWidth=1;};this.drawLabels=this.DrawLabels=function()
-{co.fillStyle=prop['chart.text.color'];var font=prop['chart.text.font'],xMin=prop['chart.xaxis.scale.min'],xMax=prop['chart.xaxis.scale.max'],yMax=this.scale2.max,yMin=prop['chart.yaxis.scale.min']?prop['chart.yaxis.scale.min']:0,text_size=prop['chart.text.size'],units_pre=prop['chart.yaxis.scale.units.pre'],units_post=prop['chart.yaxis.scale.units.post'],numYLabels=prop['chart.yaxis.labels.count'],invert=prop['chart.yaxis.scale.invert'],inside=prop['chart.yaxis.labels.inside'],context=co,canvas=ca,boxed=false,offsetx=prop['chart.yaxis.labels.offsetx'],offsety=prop['chart.yaxis.labels.offsety']
-this.halfTextHeight=text_size/2;this.halfGraphHeight=(ca.height-this.marginTop-this.marginBottom)/2;if(prop['chart.yaxis.labels']){var xPos=prop['chart.yaxis.position']=='left'?this.marginLeft-5:ca.width-this.marginRight+5;var align=prop['chart.yaxis.position']=='right'?'left':'right';if(inside){if(prop['chart.yaxis.position']=='left'){xPos=prop['chart.margin.left']+5;align='left';boxed=true;}else{xPos=ca.width-prop['chart.margin.right']-5;align='right';boxed=true;}}
-var textConf=RG.getTextConf({object:this,prefix:'chart.yaxis.labels'});if(prop['chart.xaxis.position']==='center'){if(typeof(prop['chart.yaxis.labels.specific'])=='object'&&prop['chart.yaxis.labels.specific']!=null&&prop['chart.yaxis.labels.specific'].length){var labels=prop['chart.yaxis.labels.specific'];if(prop['chart.yaxis.scale.min']>0){labels=[];for(var i=0;i<(prop['chart.yaxis.labels.specific'].length-1);++i){labels.push(prop['chart.yaxis.labels.specific'][i]);}}
-for(var i=0;i<labels.length;++i){var y=this.marginTop+(i*(this.grapharea/(labels.length*2)));RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:y+offsety,text:labels[i],valign:'center',halign:align,bounding:boxed,tag:'labels.specific'});}
-var reversed_labels=RG.array_reverse(labels);for(var i=0;i<reversed_labels.length;++i){var y=this.marginTop+(this.grapharea/2)+((i+1)*(this.grapharea/(labels.length*2)));RG.Text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:y+offsety,text:reversed_labels[i],valign:'center',halign:align,bounding:boxed,tag:'labels.specific'});}
-if(prop['chart.yaxis.scale.min']!=0){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:(this.grapharea/2)+this.marginTop+offsety,text:prop['chart.yaxis.labels.specific'][prop['chart.yaxis.labels.specific'].length-1],valign:'center',halign:align,bounding:boxed,tag:'labels.specific'});}}
-if(!prop['chart.yaxis.labels.specific']&&typeof numYLabels=='number'){for(var i=0,len=this.scale2.labels.length;i<len;i+=1){if(!invert){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.halfGraphHeight-(((i+1)/numYLabels)*this.halfGraphHeight)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:this.scale2.labels[i],tag:'scale'});}else{RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.halfGraphHeight-((i/numYLabels)*this.halfGraphHeight)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:this.scale2.labels[this.scale2.labels.length-(i+1)],tag:'scale'});}}
-for(var i=0,len=this.scale2.labels.length;i<len;i+=1){if(!invert){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.halfGraphHeight+this.halfGraphHeight-((i/numYLabels)*this.halfGraphHeight)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:'-'+this.scale2.labels[len-(i+1)],tag:'scale'});}else{if(i==(len-1)&&invert){continue;}
-RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.halfGraphHeight+this.halfGraphHeight-(((i+1)/numYLabels)*this.halfGraphHeight)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:'-'+this.scale2.labels[i],tag:'scale'});}}
-if(!invert&&(yMin>0||prop['chart.yaxis.scale.zerostart'])){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.halfGraphHeight+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:yMin.toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post}),tag:'scale'});}
-if(invert){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:yMin.toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post}),tag:'scale'});RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+(this.halfGraphHeight*2)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:'-'+RG.numberFormat({object:this,number:yMin.toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post}),tag:'scale'});}}}else{var xPos=prop['chart.yaxis.position']=='left'?this.marginLeft-5:ca.width-this.marginRight+5;var align=prop['chart.yaxis.position']=='right'?'left':'right';if(inside){if(prop['chart.yaxis.position']=='left'){xPos=prop['chart.margin.left']+5;align='left';boxed=true;}else{xPos=ca.width-this.marginRight-5;align='right';boxed=true;}}
-if(typeof prop['chart.yaxis.labels.specific']==='object'&&prop['chart.yaxis.labels.specific']){var labels=prop['chart.yaxis.labels.specific'];if(prop['chart.yaxis.scale.min']>9999){labels=[];for(var i=0;i<(prop['chart.yaxis.labels.specific'].length-1);++i){labels.push(prop['chart.yaxis.labels.specific'][i]);}}
-for(var i=0,len=labels.length;i<len;i+=1){var y=this.marginTop+(i*(this.grapharea/(len-1)));RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:y+offsety,text:labels[i],halign:align,valign:'center',bounding:boxed,tag:'scale'});}}else{if(typeof(numYLabels)=='number'){if(invert){for(var i=0;i<numYLabels;++i){var interval=(ca.height-this.marginTop-this.marginBottom)/numYLabels;RG.Text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+((i+1)*interval)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:this.scale2.labels[i],tag:'scale'});}
-if(!prop['chart.xaxis']&&!prop['chart.yaxis.scale.min']){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:this.min.toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post}),tag:'scale'});}}else{for(var i=0,len=this.scale2.labels.length;i<len;i+=1){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+this.grapharea-(((i+1)/this.scale2.labels.length)*this.grapharea)+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:this.scale2.labels[i],tag:'scale'});}
-if(!prop['chart.xaxis']&&prop['chart.yaxis.scale.min']===0){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:ca.height-this.marginBottom+offsety,valign:'center',halign:align,boundin:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:(0).toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post,point:prop['chart.yaxis.scale.point'],thousand:prop['chart.yaxis.scale.thousand']}),tag:'scale'});}}}
-if((prop['chart.yaxis.scale.min']||prop['chart.yaxis.scale.zerostart'])&&!invert){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:ca.height-this.marginBottom+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:prop['chart.yaxis.scale.min'].toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post,point:prop['chart.yaxis.scale.point'],thousand:prop['chart.yaxis.scale.thousand']}),tag:'scale'});}else if(invert){RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offsetx,y:this.marginTop+offsety,valign:'center',halign:align,bounding:boxed,boundingFill:'white',text:RG.numberFormat({object:this,number:prop['chart.yaxis.scale.min'].toFixed(this.scale2.min===0?0:prop['chart.yaxis.scale.decimals']),unitspre:units_pre,unitspost:units_post,point:prop['chart.yaxis.scale.point'],thousand:prop['chart.yaxis.scale.thousand']}),tag:'scale'});}}}}
-if(prop['chart.xaxis.scale']){var textConf=RG.getTextConf({object:this,prefix:'chart.xaxis.labels'});var numXLabels=prop['chart.xaxis.scale.labels.count'],y=ca.height-this.marginBottom+5+(text_size/2),units_pre_x=prop['chart.xaxis.scale.units.pre'],units_post_x=prop['chart.xaxis.scale.units.post'],decimals=prop['chart.xaxis.scale.decimals'],point=prop['chart.xaxis.scale.point'],thousand=prop['chart.xaxis.scale.thousand'],color=prop['chart.xaxis.labels.color'],bold=prop['chart.xaxis.labels.bold'],offsetx=prop['chart.xaxis.labels.offsetx'],offsety=prop['chart.xaxis.labels.offsety'],angle=prop['chart.xaxis.labels.angle'];if(angle>0){angle*=-1;valign='center';halign='right';y+=5;}else{valign='center';halign='center';}
-if(!prop['chart.xaxis.scale.max']){var xmax=0;var xmin=prop['chart.xaxis.scale.min'];for(var ds=0,len=this.data.length;ds<len;ds+=1){for(var point=0,len2=this.data[ds].length;point<len2;point+=1){xmax=Math.max(xmax,this.data[ds][point][0]);}}}else{xmax=prop['chart.xaxis.scale.max'];xmin=prop['chart.xaxis.scale.min']}
-this.xscale2=RG.getScale2(this,{'scale.max':xmax,'scale.min':xmin,'scale.decimals':decimals,'scale.point':point,'scale.thousand':thousand,'scale.units.pre':units_pre_x,'scale.units.post':units_post_x,'scale.labels.count':numXLabels,'scale.strict':true});this.Set('chart.xaxis.scale.max',this.xscale2.max);var interval=(ca.width-this.marginLeft-this.marginRight)/this.xscale2.labels.length;for(var i=0,len=this.xscale2.labels.length;i<len;i+=1){var num=((prop['chart.xaxis.scale.max']-prop['chart.xaxis.scale.min'])*((i+1)/numXLabels))+(xmin||0),x=this.marginLeft+((i+1)*interval),text=typeof prop['chart.xaxis.scale.formatter']==='function'?String(prop['chart.xaxis.scale.formatter'](this,num)):this.xscale2.labels[i];RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:x+offsetx,y:y+offsety,valign:valign,halign:halign,text:text,angle:angle,tag:'xscale'});}
-var text=typeof prop['chart.xaxis.scale.formatter']==='function'?String(prop['chart.xaxis.scale.formatter'](this,prop['chart.xaxis.scale.min'])):String(prop['chart.xaxis.scale.min']);RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:this.marginLeft+offsetx,y:y+offsety,valign:'center',halign:'center',text:text,tag:'xscale',angle:angle});}else{var textConf=RG.getTextConf({object:this,prefix:'chart.xaxis.labels'});var graphArea=ca.width-this.marginLeft-this.marginRight;var xInterval=graphArea/prop['chart.xaxis.labels'].length;var xPos=this.marginLeft;var yPos=(ca.height-this.marginBottom)+3;var labels=prop['chart.xaxis.labels'];var color=prop['chart.xaxis.labels.color'];var bold=prop['chart.xaxis.labels.bold'];var offsetx=prop['chart.xaxis.labels.offsetx'];var offsety=prop['chart.xaxis.labels.offsety'];var angle=0;var valign='top';var halign='center';if(prop['chart.xaxis.labels.angle']>0){angle=-1*prop['chart.xaxis.labels.angle'];valign='center';halign='right';yPos+=10;}
-for(i=0;i<labels.length;++i){if(typeof(labels[i])=='object'){if(prop['chart.xaxis.labels.specific.align']=='center'){var rightEdge=0;if(labels[i+1]&&labels[i+1][1]){rightEdge=labels[i+1][1];}else{rightEdge=prop['chart.xaxis.scale.max'];}
-var offset=(this.getXCoord(rightEdge)-this.getXCoord(labels[i][1]))/2;}else{var offset=5;}
-var xPos=this.getXCoord(labels[i][1]);if(RG.isNull(xPos)){continue;}
-RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+offset+offsetx,y:yPos+offsety,valign:valign,halign:angle!=0?'right':(prop['chart.xaxis.labels.specific.align']=='center'?'center':'left'),text:String(labels[i][0]),angle:angle,marker:false,tag:'labels.specific'});co.beginPath();co.strokeStyle='#bbb';co.moveTo(ma.round(this.marginLeft+(graphArea*((labels[i][1]-xMin)/(prop['chart.xaxis.scale.max']-xMin)))),ca.height-this.marginBottom);co.lineTo(ma.round(this.marginLeft+(graphArea*((labels[i][1]-xMin)/(prop['chart.xaxis.scale.max']-xMin)))),ca.height-this.marginBottom+20);co.stroke();}else{RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:xPos+(xInterval/2)+offsetx,y:yPos+offsety,valign:valign,halign:halign,text:String(labels[i]),angle:angle,tag:'labels'});}
-xPos+=xInterval;}
-if(typeof(labels[0])=='object'){co.beginPath();co.strokeStyle='#bbb';co.moveTo(this.marginLeft+graphArea,ca.height-this.marginBottom);co.lineTo(this.marginLeft+graphArea,ca.height-this.marginBottom+20);co.stroke();}}};this.drawMarks=this.DrawMarks=function(i)
-{this.coords[i]=[];var xmax=prop['chart.xaxis.scale.max'];var default_color=prop['chart.colors.default'];for(var j=0,len=this.data[i].length;j<len;j+=1){var data_points=this.data[i];if(RG.isNull(data_points[j])){continue;}
-var xCoord=data_points[j][0];var yCoord=data_points[j][1];var color=data_points[j][2]?data_points[j][2]:default_color;var tooltip=(data_points[j]&&data_points[j][3])?data_points[j][3]:null;this.DrawMark(i,xCoord,yCoord,xmax,this.scale2.max,color,tooltip,this.coords[i],data_points,j);}};this.drawMark=this.DrawMark=function(data_set_index,x,y,xMax,yMax,color,tooltip,coords,data,data_index)
-{var tickmarks=prop['chart.tickmarks.style'],tickSize=prop['chart.tickmarks.size'],xMin=prop['chart.xaxis.scale.min'],x=((x-xMin)/(xMax-xMin))*(ca.width-this.marginLeft-this.marginRight),originalX=x,originalY=y;if(tickmarks&&typeof(tickmarks)=='object'){tickmarks=tickmarks[data_set_index];}
-if(typeof(tickSize)=='object'){var tickSize=tickSize[data_set_index];var halfTickSize=tickSize/2;}else{var halfTickSize=tickSize/2;}
-if(y&&typeof y==='object'&&typeof y[0]==='number'&&typeof y[1]==='number'&&typeof y[2]==='number'&&typeof y[3]==='number'&&typeof y[4]==='number'){this.Set('chart.boxplot',true);var y0=this.getYCoord(y[0]),y1=this.getYCoord(y[1]),y2=this.getYCoord(y[2]),y3=this.getYCoord(y[3]),y4=this.getYCoord(y[4]),col1=y[5],col2=y[6],boxWidth=typeof y[7]=='number'?y[7]:prop['chart.boxplot.width'];}else{var yCoord=this.getYCoord(y);}
-x+=this.marginLeft;co.beginPath();co.strokeStyle=color;if(prop['chart.boxplot']){boxWidth=(boxWidth/prop['chart.xaxis.scale.max'])*(ca.width-this.marginLeft-this.marginRight);var halfBoxWidth=boxWidth/2;if(prop['chart.line.visible']){co.beginPath();if(typeof y[8]==='string'){co.strokeStyle=y[8];}
-co.strokeRect(x-halfBoxWidth,y1,boxWidth,y3-y1);if(col1){co.fillStyle=col1;co.fillRect(x-halfBoxWidth,y1,boxWidth,y2-y1);}
-if(col2){co.fillStyle=col2;co.fillRect(x-halfBoxWidth,y2,boxWidth,y3-y2);}
-co.stroke();co.beginPath();if(prop['chart.boxplot.capped']){co.moveTo(x-halfBoxWidth,ma.round(y0));co.lineTo(x+halfBoxWidth,ma.round(y0));}
-co.moveTo(ma.round(x),y0);co.lineTo(ma.round(x),y1);if(prop['chart.boxplot.capped']){co.moveTo(x-halfBoxWidth,ma.round(y4));co.lineTo(x+halfBoxWidth,ma.round(y4));}
-co.moveTo(ma.round(x),y4);co.lineTo(ma.round(x),y3);co.stroke();}}
-if(prop['chart.line.visible']&&typeof(y)=='number'&&!y0&&!y1&&!y2&&!y3&&!y4){if(tickmarks=='circle'){co.arc(x,yCoord,halfTickSize,0,6.28,0);co.fillStyle=color;co.fill();}else if(tickmarks=='plus'){co.moveTo(x,yCoord-halfTickSize);co.lineTo(x,yCoord+halfTickSize);co.moveTo(x-halfTickSize,yCoord);co.lineTo(x+halfTickSize,yCoord);co.stroke();}else if(tickmarks=='square'){co.strokeStyle=color;co.fillStyle=color;co.fillRect(x-halfTickSize,yCoord-halfTickSize,tickSize,tickSize);}else if(tickmarks=='cross'){co.moveTo(x-halfTickSize,yCoord-halfTickSize);co.lineTo(x+halfTickSize,yCoord+halfTickSize);co.moveTo(x+halfTickSize,yCoord-halfTickSize);co.lineTo(x-halfTickSize,yCoord+halfTickSize);co.stroke();}else if(tickmarks=='diamond'){co.fillStyle=co.strokeStyle;co.moveTo(x,yCoord-halfTickSize);co.lineTo(x+halfTickSize,yCoord);co.lineTo(x,yCoord+halfTickSize);co.lineTo(x-halfTickSize,yCoord);co.lineTo(x,yCoord-halfTickSize);co.fill();co.stroke();}else if(typeof(tickmarks)=='function'){var graphWidth=ca.width-this.marginLeft-this.marginRight,graphheight=ca.height-this.marginTop-this.marginBottom,xVal=((x-this.marginLeft)/graphWidth)*xMax,yVal=((graphheight-(yCoord-this.marginTop))/graphheight)*yMax;tickmarks(this,data,x,yCoord,xVal,yVal,xMax,yMax,color,data_set_index,data_index)}else if(typeof tickmarks==='string'&&(tickmarks.substr(0,6)==='image:'||tickmarks.substr(0,5)==='data:'||tickmarks.substr(0,1)==='/'||tickmarks.substr(0,3)==='../'||tickmarks.substr(0,7)==='images/')){var img=new Image();if(tickmarks.substr(0,6)==='image:'){img.src=tickmarks.substr(6);}else{img.src=tickmarks;}
-img.onload=function()
-{if(prop['chart.tickmarks.style.image.halign']==='center')x-=(this.width/2);if(prop['chart.tickmarks.style.image.halign']==='right')x-=this.width;if(prop['chart.tickmarks.style.image.valign']==='center')yCoord-=(this.height/2);if(prop['chart.tickmarks.style.image.valign']==='bottom')yCoord-=this.height;x+=prop['chart.tickmarks.style.image.offsetx'];yCoord+=prop['chart.tickmarks.style.image.offsety'];co.drawImage(this,x,yCoord);}}else if(tickmarks===null){}else{alert('[SCATTER] ('+this.id+') Unknown tickmark style: '+tickmarks);}}
-if(prop['chart.boxplot']&&typeof y0==='number'&&typeof y1==='number'&&typeof y2==='number'&&typeof y3==='number'&&typeof y4==='number'){x=[x-halfBoxWidth,x+halfBoxWidth];yCoord=[y0,y1,y2,y3,y4];}
-coords.push([x,yCoord,tooltip]);};this.drawLine=this.DrawLine=function(i)
-{if(typeof(prop['chart.line.visible'])=='boolean'&&prop['chart.line.visible']==false){return;}
-if(prop['chart.line']&&this.coords[i].length>=2){if(prop['chart.line.dash']&&typeof co.setLineDash==='function'){co.setLineDash(prop['chart.line.dash']);}
-co.lineCap='round';co.lineJoin='round';co.lineWidth=this.getLineWidth(i);co.strokeStyle=prop['chart.line.colors'][i];co.beginPath();var prevY=null;var currY=null;for(var j=0,len=this.coords[i].length;j<len;j+=1){var xPos=this.coords[i][j][0];var yPos=this.coords[i][j][1];if(j>0)prevY=this.coords[i][j-1][1];currY=yPos;if(j==0||RG.is_null(prevY)||RG.is_null(currY)){co.moveTo(xPos,yPos);}else{var stepped=prop['chart.line.stepped'];if((typeof stepped=='boolean'&&stepped)||(typeof stepped=='object'&&stepped[i])){co.lineTo(this.coords[i][j][0],this.coords[i][j-1][1]);}
-co.lineTo(xPos,yPos);}}
-co.stroke();if(prop['chart.line.dash']&&typeof co.setLineDash==='function'){co.setLineDash([1,0]);}}
-co.lineWidth=1;};this.getLineWidth=this.GetLineWidth=function(i)
-{var linewidth=prop['chart.line.linewidth'];if(typeof linewidth=='number'){return linewidth;}else if(typeof linewidth=='object'){if(linewidth[i]){return linewidth[i];}else{return linewidth[0];}
-alert('[SCATTER] Error! chart.linewidth should be a single number or an array of one or more numbers');}};this.drawVBars=this.DrawVBars=function()
-{var vbars=prop['chart.background.vbars'];var graphWidth=ca.width-this.marginLeft-this.marginRight;if(vbars){var xmax=prop['chart.xaxis.scale.max'];var xmin=prop['chart.xaxis.scale.min'];for(var i=0,len=vbars.length;i<len;i+=1){var key=i;var value=vbars[key];if(typeof value[0]=='string')value[0]=RG.parseDate(value[0]);if(typeof value[1]=='string')value[1]=RG.parseDate(value[1])-value[0];var x=(((value[0]-xmin)/(xmax-xmin))*graphWidth)+this.marginLeft;var width=(value[1]/(xmax-xmin))*graphWidth;co.fillStyle=value[2];co.fillRect(x,this.marginTop,width,(ca.height-this.marginTop-this.marginBottom));}}};this.drawInGraphLabels=this.DrawInGraphLabels=function(obj)
-{var labels=obj.get('chart.labels.ingraph');var labels_processed=[];if(!labels){return;}
-var fgcolor='black';var bgcolor='white';var direction=1;var textConf=RG.getTextConf({object:this,prefix:'chart.labels.ingraph'});for(var i=0,len=labels.length;i<len;i+=1){if(typeof(labels[i])=='number'){for(var j=0;j<labels[i];++j){labels_processed.push(null);}}else if(typeof(labels[i])=='string'||typeof(labels[i])=='object'){labels_processed.push(labels[i]);}else{labels_processed.push('');}}
-RG.NoShadow(obj);if(labels_processed&&labels_processed.length>0){var i=0;for(var set=0;set<obj.coords.length;++set){for(var point=0;point<obj.coords[set].length;++point){if(labels_processed[i]){var x=obj.coords[set][point][0];var y=obj.coords[set][point][1];var length=typeof(labels_processed[i][4])=='number'?labels_processed[i][4]:25;var text_x=x;var text_y=y-5-length;co.moveTo(x,y-5);co.lineTo(x,y-5-length);co.stroke();co.beginPath();co.moveTo(x,y-5);co.lineTo(x-3,y-10);co.lineTo(x+3,y-10);co.closePath();co.beginPath();co.fillStyle=(typeof(labels_processed[i])=='object'&&typeof(labels_processed[i][1])=='string')?labels_processed[i][1]:'black';RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:text_x,y:text_y,text:(typeof(labels_processed[i])=='object'&&typeof(labels_processed[i][0])=='string')?labels_processed[i][0]:labels_processed[i],valign:'bottom',halign:'center',bounding:true,boundingFill:(typeof(labels_processed[i])=='object'&&typeof(labels_processed[i][2])=='string')?labels_processed[i][2]:'white',tag:'labels.ingraph'});co.fill();}
-i++;}}}};this.getShape=this.getPoint=function(e)
-{var mouseXY=RG.getMouseXY(e);var mouseX=mouseXY[0];var mouseY=mouseXY[1];var overHotspot=false;var offset=prop['chart.tooltips.hotspot'];for(var set=0,len=this.coords.length;set<len;++set){for(var i=0,len2=this.coords[set].length;i<len2;++i){var x=this.coords[set][i][0];var y=this.coords[set][i][1];var tooltip=this.data[set][i][3];if(typeof(y)=='number'){if(mouseX<=(x+offset)&&mouseX>=(x-offset)&&mouseY<=(y+offset)&&mouseY>=(y-offset)){var tooltip=RG.parseTooltipText(this.data[set][i][3],0);var index_adjusted=i;for(var ds=(set-1);ds>=0;--ds){index_adjusted+=this.data[ds].length;}
-return{0:this,1:x,2:y,3:set,4:i,5:this.data[set][i][3],'object':this,'x':x,'y':y,'dataset':set,'index':i,'tooltip':tooltip,'index_adjusted':index_adjusted};}}else if(RG.is_null(y)){}else{var mark=this.data[set][i];var width=prop['chart.boxplot.width'];if(typeof(mark[1][7])=='number'){width=mark[1][7];}
-if(typeof(x)=='object'&&mouseX>x[0]&&mouseX<x[1]&&mouseY<y[1]&&mouseY>y[3]){var tooltip=RG.parseTooltipText(this.data[set][i][3],0);return{0:this,1:x[0],2:x[1]-x[0],3:y[1],4:y[3]-y[1],5:set,6:i,7:this.data[set][i][3],'object':this,'x':x[0],'y':y[1],'width':x[1]-x[0],'height':y[3]-y[1],'dataset':set,'index':i,'tooltip':tooltip};}}}}};this.drawAboveLabels=this.DrawAboveLabels=function()
-{var size=prop['chart.labels.above.size'];var font=prop['chart.text.font'];var units_pre=prop['chart.yaxis.scale.units.pre'];var units_post=prop['chart.yaxis.scale.units.post'];var textConf=RG.getTextConf({object:this,prefix:'chart.labels.above'});for(var set=0,len=this.coords.length;set<len;++set){for(var point=0,len2=this.coords[set].length;point<len2;++point){var x_val=this.data[set][point][0];var y_val=this.data[set][point][1];if(!RG.is_null(y_val)){if(RG.is_array(y_val)){var max=0;for(var i=0;i<y_val;++i){max=Math.max(max,y_val[i]);}
-y_val=max;}
-var x_pos=this.coords[set][point][0];var y_pos=this.coords[set][point][1];var xvalueFormatter=prop['chart.labels.above.formatter.x'];var yvalueFormatter=prop['chart.labels.above.formatter.y'];RG.text2(this,{font:textConf.font,size:textConf.size,color:textConf.color,bold:textConf.bold,italic:textConf.italic,x:x_pos,y:y_pos-5-size,text:(typeof xvalueFormatter==='function'?xvalueFormatter(this,x_val):x_val.toFixed(prop['chart.labels.above.decimals']))+', '+
-(typeof yvalueFormatter==='function'?yvalueFormatter(this,y_val):y_val.toFixed(prop['chart.labels.above.decimals'])),valign:'center',halign:'center',bounding:true,boundingFill:'rgba(255, 255, 255, 0.7)',boundingStroke:'rgba(0,0,0,0.1)',tag:'labels.above'});}}}};this.getYValue=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];}
-var obj=this;if(mouseY<this.marginTop||mouseY>(ca.height-this.marginBottom)||mouseX<this.marginLeft||mouseX>(ca.width-this.marginRight)){return null;}
-if(prop['chart.xaxis.position']=='center'){var value=(((this.grapharea/2)-(mouseY-this.marginTop))/this.grapharea)*(this.max-this.min)
-value*=2;if(value>=0){value+=this.min
-if(prop['chart.yaxis.scale.invert']){value-=this.min;value=this.max-value;}}else{value-=this.min;if(prop['chart.yaxis.scale.invert']){value+=this.min;value=this.max+value;value*=-1;}}}else{var value=((this.grapharea-(mouseY-this.marginTop))/this.grapharea)*(this.max-this.min)
-value+=this.min;if(prop['chart.yaxis.scale.invert']){value-=this.min;value=this.max-value;}}
-return value;};this.getXValue=function(arg)
-{if(arg.length==2){var mouseX=arg[0];var mouseY=arg[1];}else{var mouseXY=RG.getMouseXY(arg);var mouseX=mouseXY[0];var mouseY=mouseXY[1];}
-var obj=this;if(mouseY<this.marginTop||mouseY>(ca.height-this.marginBottom)||mouseX<this.marginLeft||mouseX>(ca.width-this.marginRight)){return null;}
-var width=(ca.width-this.marginLeft-this.marginRight);var value=((mouseX-this.marginLeft)/width)*(prop['chart.xaxis.scale.max']-prop['chart.xaxis.scale.min'])
-value+=prop['chart.xaxis.scale.min'];return value;};this.highlight=this.Highlight=function(shape)
-{if(typeof prop['chart.highlight.style']==='function'){(prop['chart.highlight.style'])(shape);}else{if(shape['height']){RG.Highlight.Rect(this,shape);}else{RG.Highlight.Point(this,shape);}}};this.getObjectByXY=function(e)
-{var mouseXY=RG.getMouseXY(e);if(mouseXY[0]>(this.marginLeft-3)&&mouseXY[0]<(ca.width-this.marginRight+3)&&mouseXY[1]>(this.marginTop-3)&&mouseXY[1]<((ca.height-this.marginBottom)+3)){return this;}};this.getXCoord=function(value)
-{if(typeof value!='number'&&typeof value!='string'){return null;}
-if(typeof value==='string'){value=RG.parseDate(value);}
-var xmin=prop['chart.xaxis.scale.min'];var xmax=prop['chart.xaxis.scale.max'];var x;if(value<xmin)return null;if(value>xmax)return null;var gutterRight=this.marginRight;var gutterLeft=this.marginLeft;if(prop['chart.yaxis.position']=='right'){x=((value-xmin)/(xmax-xmin))*(ca.width-gutterLeft-gutterRight);x=(ca.width-gutterRight-x);}else{x=((value-xmin)/(xmax-xmin))*(ca.width-gutterLeft-gutterRight);x=x+gutterLeft;}
-return x;};this.getYCoord=this.getYCoordFromValue=function(value)
-{if(typeof(value)!='number'){return null;}
-var invert=prop['chart.yaxis.scale.invert'];var xaxispos=prop['chart.xaxis.position'];var graphHeight=ca.height-this.marginTop-this.marginBottom;var halfGraphHeight=graphHeight/2;var ymax=this.max;var ymin=prop['chart.yaxis.scale.min'];var coord=0;if(value>ymax||(prop['chart.xaxis.position']=='bottom'&&value<ymin)||(prop['chart.xaxis.position']=='center'&&((value>0&&value<ymin)||(value<0&&value>(-1*ymin))))){return null;}
-if(xaxispos=='center'){coord=((Math.abs(value)-ymin)/(ymax-ymin))*halfGraphHeight;if(invert){coord=halfGraphHeight-coord;}
-if(value<0){coord+=this.marginTop;coord+=halfGraphHeight;}else{coord=halfGraphHeight-coord;coord+=this.marginTop;}}else{coord=((value-ymin)/(ymax-ymin))*graphHeight;if(invert){coord=graphHeight-coord;}
-coord=graphHeight-coord;coord=this.marginTop+coord;}
-return coord;};RG.Scatter.Bubble=function(scatter,min,max,width,data)
-{this.scatter=scatter;this.min=min;this.max=max;this.width=width;this.data=data;this.coords=[];this.type='scatter.bubble'
-this.set=this.Set=function(name,value)
-{this.scatter.set(name,value);return this;};this.get=this.Get=function(name)
-{this.scatter.get(name);};this.draw=this.Draw=function()
-{var bubble_min=this.min,bubble_max=this.max,bubble_data=this.data,bubble_max_width=this.width;var obj_bubble=this,obj_scatter=this.scatter;this.scatter.ondraw=function(obj)
-{for(var i=0;i<obj.coords[0].length;++i){bubble_data[i]=ma.max(bubble_data[i],bubble_min);bubble_data[i]=ma.min(bubble_data[i],bubble_max);var r=((bubble_data[i]-bubble_min)/(bubble_max-bubble_min))*bubble_max_width,color=obj_scatter.data[0][i][2]?obj_scatter.data[0][i][2]:obj_scatter.properties['chart.colors.default'];co.beginPath();co.fillStyle=RG.radialGradient(obj,obj_scatter.coords[0][i][0]+(r/2.5),obj_scatter.coords[0][i][1]-(r/2.5),0,obj_scatter.coords[0][i][0]+(r/2.5),obj_scatter.coords[0][i][1]-(r/2.5),r,prop['chart.colors.bubble.graduated']?'white':color,color);co.arc(obj_scatter.coords[0][i][0],obj_scatter.coords[0][i][1],r,0,RG.TWOPI,false);co.fill();obj_bubble.coords[i]=[obj_scatter.coords[0][i][0],obj_scatter.coords[0][i][1],r,co.fillStyle];}}
-this.scatter.Draw();return this;};};this.parseColors=function()
-{if(this.original_colors.length===0){this.original_colors['data']=RG.array_clone(this.data);this.original_colors['chart.background.vbars']=RG.array_clone(prop['chart.background.vbars']);this.original_colors['chart.background.hbars']=RG.array_clone(prop['chart.background.hbars']);this.original_colors['chart.line.colors']=RG.array_clone(prop['chart.line.colors']);this.original_colors['chart.colors.default']=RG.array_clone(prop['chart.colors.default']);this.original_colors['chart.crosshairs.color']=RG.array_clone(prop['chart.crosshairs.color']);this.original_colors['chart.highlight.stroke']=RG.array_clone(prop['chart.highlight.stroke']);this.original_colors['chart.highlight.fill']=RG.array_clone(prop['chart.highlight.fill']);this.original_colors['chart.background.bars.color1']=RG.array_clone(prop['chart.background.bars.color1']);this.original_colors['chart.background.bars.color2']=RG.array_clone(prop['chart.background.bars.color2']);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.axes.color']=RG.array_clone(prop['chart.axes.color']);}
-var data=this.data;if(data){for(var dataset=0;dataset<data.length;++dataset){for(var i=0;i<this.data[dataset].length;++i){if(this.data[dataset][i]&&typeof(this.data[dataset][i][1])=='object'&&this.data[dataset][i][1]){if(typeof(this.data[dataset][i][1][5])=='string')this.data[dataset][i][1][5]=this.parseSingleColorForGradient(this.data[dataset][i][1][5]);if(typeof(this.data[dataset][i][1][6])=='string')this.data[dataset][i][1][6]=this.parseSingleColorForGradient(this.data[dataset][i][1][6]);}
-if(!RG.isNull(this.data[dataset][i])){this.data[dataset][i][2]=this.parseSingleColorForGradient(this.data[dataset][i][2]);}}}}
-var hbars=prop['chart.background.hbars'];if(hbars){for(i=0;i<hbars.length;++i){hbars[i][2]=this.parseSingleColorForGradient(hbars[i][2]);}}
-var vbars=prop['chart.background.vbars'];if(vbars){for(i=0;i<vbars.length;++i){vbars[i][2]=this.parseSingleColorForGradient(vbars[i][2]);}}
-var colors=prop['chart.line.colors'];if(colors){for(i=0;i<colors.length;++i){colors[i]=this.parseSingleColorForGradient(colors[i]);}}
-prop['chart.colors.default']=this.parseSingleColorForGradient(prop['chart.colors.default']);prop['chart.crosshairs.color']=this.parseSingleColorForGradient(prop['chart.crosshairs.color']);prop['chart.highlight.stroke']=this.parseSingleColorForGradient(prop['chart.highlight.stroke']);prop['chart.highlight.fill']=this.parseSingleColorForGradient(prop['chart.highlight.fill']);prop['chart.background.bars.color1']=this.parseSingleColorForGradient(prop['chart.background.bars.color1']);prop['chart.background.bars.color2']=this.parseSingleColorForGradient(prop['chart.background.bars.color2']);prop['chart.background.grid.color']=this.parseSingleColorForGradient(prop['chart.background.grid.color']);prop['chart.background.color']=this.parseSingleColorForGradient(prop['chart.background.color']);prop['chart.axes.color']=this.parseSingleColorForGradient(prop['chart.axes.color']);};this.reset=function()
-{};this.parseSingleColorForGradient=function(color)
-{if(!color||typeof(color)!='string'){return color;}
-if(color.match(/^gradient\((.*)\)$/i)){if(color.match(/^gradient\(({.*})\)$/i)){return RGraph.parseJSONGradient({object:this,def:RegExp.$1});}
-if(color.match(/^gradient\(({.*})\)$/i)){return RGraph.parseJSONGradient({object:this,def:RegExp.$1});}
-var parts=RegExp.$1.split(':');var grad=co.createLinearGradient(0,ca.height-prop['chart.margin.bottom'],0,prop['chart.margin.top']);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)
-{if(this.coords&&this.coords[index]&&this.coords[index].length){this.coords[index].forEach(function(value,idx,arr)
-{co.beginPath();co.fillStyle=prop['chart.key.interactive.highlight.chart.fill'];co.arc(value[0],value[1],prop['chart.tickmarks.size']+3,0,RG.TWOPI,false);co.fill();});}};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.trace=this.trace2=function()
-{var obj=this,callback=arguments[2],opt=arguments[0]||{},frames=opt.frames||30,frame=0,callback=arguments[1]||function(){}
-obj.Set('animationTrace',true);obj.Set('animationTraceClip',0);function iterator()
-{RG.clear(obj.canvas);RG.redrawCanvas(obj.canvas);if(frame++<frames){obj.set('animationTraceClip',frame/frames);RG.Effects.updateCanvas(iterator);}else{callback(obj);}}
-iterator();return this;};this.resetColorsToOriginalValues=function()
-{for(var i=0,len=this.original_colors['data'].length;i<len;++i){for(var j=0,len2=this.original_colors['data'][i].length;j<len2;++j){this.data[i][j][2]=RG.array_clone(this.original_colors['data'][i][j][2]);if(typeof this.data[i][j][1]==='object'){this.data[i][j][1][5]=RG.array_clone(this.original_colors['data'][i][j][1][5]);this.data[i][j][1][6]=RG.array_clone(this.original_colors['data'][i][j][1][6]);}}}};RG.register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};
+    RGraph = window.RGraph || {isrgraph:true,isRGraph:true,rgraph:true};
+
+
+
+
+    //
+    // The scatter graph constructor
+    //
+    RGraph.Scatter = function (conf)
+    {
+        this.data = new Array(conf.data.length);
+
+        // Store the data set(s)
+        this.data = RGraph.arrayClone(conf.data);
+
+
+        // Convert objects to arrays
+        for (let i=0; i<this.data.length; ++i) {
+
+            // Single dataset
+            if (   RGraph.isObject(conf.data[i])
+                && (RGraph.isNumber(this.data[i].x) || RGraph.isString(this.data[i].x))
+                && (RGraph.isNumber(this.data[i].y) || RGraph.isString(this.data[i].y))) {
+
+                    conf.data[i] = [
+                        conf.data[i].x,
+                        conf.data[i].y,
+                        conf.data[i].color || undefined,
+                        typeof conf.data[i].tooltip === 'string' ? conf.data[i].tooltip : undefined
+                    ];
+
+            // Multiple datasets
+            } else if (RGraph.isArray(conf.data[i])) {
+                for (let j=0; j<conf.data[i].length; ++j) {
+                    if (RGraph.isObject(conf.data[i][j])) {
+                        conf.data[i][j] = [
+                            conf.data[i][j].x,
+                            conf.data[i][j].y,
+                            conf.data[i][j].color || undefined,
+                            typeof conf.data[i][j].tooltip === 'string' ? conf.data[i][j].tooltip : undefined
+                        ];
+                    }
+                }
+            }
+        }
+
+
+
+        // Account for just one dataset being given
+        if (typeof conf.data === 'object' && typeof conf.data[0] === 'object' && (typeof conf.data[0][0] === 'number' || typeof conf.data[0][0] === 'string')) {
+            var tmp = RGraph.arrayClone(conf.data);
+            conf.data = new Array();
+            conf.data[0] = RGraph.arrayClone(tmp);
+        }
+        
+        this.data = RGraph.arrayClone(conf.data);
+        
+
+
+
+
+
+
+
+        // If necessary convert X/Y values passed as strings
+        // to numbers
+        for (var i=0,len=this.data.length; i<len; ++i) { // Datasets
+            for (var j=0,len2=this.data[i].length; j<len2; ++j) { // Points
+
+                // Handle the conversion of X values
+                if (typeof this.data[i][j] === 'object' && !RGraph.isNull(this.data[i][j]) && typeof this.data[i][j][0] === 'string') {
+                    if (this.data[i][j][0].match(/^[.0-9]+$/)) {
+                        this.data[i][j][0] = parseFloat(this.data[i][j][0]);
+                    } else if (this.data[i][j][0] === '') {
+                        this.data[i][j][0] = 0;
+                    }
+                }
+
+                // Handle the conversion of Y values
+                if (typeof this.data[i][j] === 'object' && !RGraph.isNull(this.data[i][j]) && typeof this.data[i][j][1] === 'string') {
+                    if (this.data[i][j][1].match(/[.0-9]+/)) {
+                        this.data[i][j][1] = parseFloat(this.data[i][j][1]);
+                    } else if (this.data[i][j][1] === '') {
+                        this.data[i][j][1] = 0;
+                    }
+                }
+            }
+        }
+        
+        // Store a copy of the data that won't be touched
+        this.unmodified_data = RGraph.arrayClone(this.data);
+
+        this.id                     = conf.id;
+        this.canvas                 = document.getElementById(this.id);
+        this.canvas.__object__      = this;
+        this.context                = this.canvas.getContext ? this.canvas.getContext('2d') : null;
+        this.max                    = 0;
+        this.coords                 = [];
+        this.type                   = 'scatter';
+        this.isRGraph               = true;
+        this.isrgraph               = true;
+        this.rgraph                 = true;
+        this.uid                    = RGraph.createUID();
+        this.canvas.uid             = this.canvas.uid ? this.canvas.uid : RGraph.createUID();
+        this.colorsParsed           = false;
+        this.coordsText             = [];
+        this.coordsBubble           = [];
+        this.coords_trendline       = [];
+        this.original_colors        = [];
+        this.firstDraw              = true; // After the first draw this will be false
+        this.stopAnimationRequested = false;// Used to control the animations
+
+
+
+
+        // Various config properties
+        this.properties = {
+            backgroundBarsCount:        null,
+            backgroundBarsColor1:       'rgba(0,0,0,0)',
+            backgroundBarsColor2:       'rgba(0,0,0,0)',
+            backgroundHbars:            null,
+            backgroundVbars:            null,
+            backgroundGrid:             true,
+            backgroundGridLinewidth:    1,
+            backgroundGridColor:        '#ddd',
+            backgroundGridHsize:        20,
+            backgroundGridVsize:        20,
+            backgroundGridVlines:       true,
+            backgroundGridHlines:       true,
+            backgroundGridBorder:       true,
+            backgroundGridAutofit:      true,
+            backgroundGridAutofitAlign: true,
+            backgroundGridHlinesCount:  5,
+            backgroundGridVlinesCount:  20,
+            backgroundImage:            null,
+            backgroundImageStretch:     true,
+            backgroundImageX:           null,
+            backgroundImageY:           null,
+            backgroundImageW:           null,
+            backgroundImageH:           null,
+            backgroundImageAlign:       null,
+            backgroundColor:            null,
+
+            colors:                     [], // This is used internally for the tooltip key
+            colorsBubbleGraduated:      true,
+            colorsBubbleStroke:         null,
+            
+            textColor:                  'black',
+            textFont:                   'Arial, Verdana, sans-serif',
+            textSize:                   12,
+            textBold:                   false,
+            textItalic:                 false,
+            textAccessible:             false,
+            textAccessibleOverflow:     'visible',
+            textAccessiblePointerevents:false,
+            text:                       null,
+            
+            tooltips:                   [], // Default must be an empty array
+            tooltipsEffect:             'slide',
+            tooltipsEvent:              'onmousemove',
+            tooltipsHotspot:            3,
+            tooltipsCssClass:           'RGraph_tooltip',
+            tooltipsCss:                null,
+            tooltipsHighlight:          true,
+            tooltipsCoordsPage:         false,
+            tooltipsFormattedThousand:  ',',
+            tooltipsFormattedPoint:     '.',
+            tooltipsFormattedDecimals:  0,
+            tooltipsFormattedUnitsPre:  '',
+            tooltipsFormattedUnitsPost: '',
+            tooltipsFormattedKeyColors: null,
+            tooltipsFormattedKeyColorsShape: 'square',
+            tooltipsFormattedKeyLabels: [],
+            tooltipsFormattedListType:  'ul',
+            tooltipsFormattedListItems: null,
+            tooltipsFormattedTableHeaders: null,
+            tooltipsFormattedTableData: null,
+            tooltipsPointer:            true,
+            tooltipsPointerOffsetx:     0,
+            tooltipsPointerOffsety:     0,
+            tooltipsPositionStatic:     true,
+            tooltipsHotspotIgnore:      null,
+
+
+            xaxis:                      true,
+            xaxisLinewidth:             1,
+            xaxisColor:                 'black',
+            xaxisTickmarks:             true,
+            xaxisTickmarksLength:       3,
+            xaxisTickmarksLastLeft:     null,
+            xaxisTickmarksLastRight:    null,
+            xaxisTickmarksCount:        null,
+            xaxisLabels:                null,
+            xaxisLabelsFormattedDecimals: 0,
+            xaxisLabelsFormattedPoint: '.',
+            xaxisLabelsFormattedThousand: ',',
+            xaxisLabelsFormattedUnitsPre: '',
+            xaxisLabelsFormattedUnitsPost: '',
+            xaxisLabelsCount:           null,
+            xaxisLabelsSize:            null,
+            xaxisLabelsFont:            null,
+            xaxisLabelsItalic:          null,
+            xaxisLabelsBold:            null,
+            xaxisLabelsColor:           null,
+            xaxisLabelsOffsetx:         0,
+            xaxisLabelsOffsety:         0,
+            xaxisLabelsHalign:          null,
+            xaxisLabelsValign:          null,
+            xaxisLabelsPosition:        'section',
+            xaxisLabelsSpecificAlign:   'left',
+            xaxisPosition:              'bottom',
+            xaxisLabelsAngle:           0,
+            xaxisTitle:                 '',
+            xaxisTitleBold:             null,
+            xaxisTitleSize:             null,
+            xaxisTitleFont:             null,
+            xaxisTitleColor:            null,
+            xaxisTitleItalic:           null,
+            xaxisTitlePos:              null,
+            xaxisTitleOffsetx:          0,
+            xaxisTitleOffsety:          0,
+            xaxisTitleX:                null,
+            xaxisTitleY:                null,
+            xaxisTitleHalign:           'center',
+            xaxisTitleValign:           'top',
+            xaxisScale:                 false,
+            xaxisScaleMin:              0,
+            xaxisScaleMax:              null,
+            xaxisScaleUnitsPre:         '',
+            xaxisScaleUnitsPost:        '',
+            xaxisScaleLabelsCount:      10,
+            xaxisScaleFormatter:        null,
+            xaxisScaleDecimals:         0,
+            xaxisScaleThousand:         ',',
+            xaxisScalePoint:            '.',
+
+            yaxis:                    true,
+            yaxisLinewidth:           1,
+            yaxisColor:               'black',
+            yaxisTickmarks:           true,
+            yaxisTickmarksCount:      null,
+            yaxisTickmarksLastTop:    null,
+            yaxisTickmarksLastBottom: null,
+            yaxisTickmarksLength:     3,
+            yaxisScale:               true,
+            yaxisScaleMin:            0,
+            yaxisScaleMax:            null,
+            yaxisScaleUnitsPre:       '',
+            yaxisScaleUnitsPost:      '',
+            yaxisScaleDecimals:       0,
+            yaxisScalePoint:          '.',
+            yaxisScaleThousand:       ',',
+            yaxisScaleRound:          false,
+            yaxisScaleInvert:         false,
+            yaxisScaleFormatter:      null,
+            yaxisLabelsSpecific:      null,
+            yaxisLabelsCount:         5,
+            yaxisLabelsOffsetx:       0,
+            yaxisLabelsOffsety:       0,
+            yaxisLabelsHalign:        null,
+            yaxisLabelsValign:        null,
+            yaxisLabelsFont:          null,
+            yaxisLabelsSize:          null,
+            yaxisLabelsColor:         null,
+            yaxisLabelsBold:          null,
+            yaxisLabelsItalic:        null,
+            yaxisLabelsPosition:      'edge',
+            yaxisPosition:            'left',
+            yaxisTitle:               '',
+            yaxisTitleBold:           null,
+            yaxisTitleSize:           null,
+            yaxisTitleFont:           null,
+            yaxisTitleColor:          null,
+            yaxisTitleItalic:         null,
+            yaxisTitlePos:            null,
+            yaxisTitleX:              null,
+            yaxisTitleY:              null,
+            yaxisTitleOffsetx:        0,
+            yaxisTitleOffsety:        0,
+            yaxisTitleHalign:         null,
+            yaxisTitleValign:         null,
+            yaxisTitleAccessible:     null,
+            
+            tickmarksStyle:             'cross',
+            tickmarksStyleImageHalign:  'center',
+            tickmarksStyleImageValign:  'center',
+            tickmarksStyleImageOffsetx: 0,
+            tickmarksStyleImageOffsety: 0,
+            tickmarksSize:              5,
+            
+            marginLeft:                 35,
+            marginRight:                35,
+            marginTop:                  35,
+            marginBottom:               35,
+
+            title:                      '',
+            titleBold:                  null,
+            titleItalic:                null,
+            titleFont:                  null,
+            titleSize:                  null,
+            titleItalic:                null,
+            titleX:                     null,
+            titleY:                     null,
+            titleHalign:                null,
+            titleValign:                null,
+            titleOffsetx:               0,
+            titleOffsety:               0,
+            titleSubtitle:        '',
+            titleSubtitleSize:    null,
+            titleSubtitleColor:   '#aaa',
+            titleSubtitleFont:    null,
+            titleSubtitleBold:    null,
+            titleSubtitleItalic:  null,
+            titleSubtitleOffsetx: 0,
+            titleSubtitleOffsety: 0,
+
+            labelsIngraph:              null,
+            labelsIngraphFont:          null,
+            labelsIngraphSize:          null,
+            labelsIngraphColor:         null,
+            labelsIngraphBold:          null,
+            labelsIngraphItalic:        null,
+            labelsIngraphOffsetx:       0,
+            labelsIngraphOffsety:       0,
+            labelsAbove:                false,
+            labelsAboveSize:            null,
+            labelsAboveFont:            null,
+            labelsAboveColor:           null,
+            labelsAboveBold:            null,
+            labelsAboveItalic:          null,
+            labelsAboveDecimals:        0,
+            labelsAboveOffsetx:         0,
+            labelsAboveOffsety:         0,
+            
+            contextmenu:                null,
+            
+            colorsDefault:              'black',
+
+            crosshairs:                 false,
+            crosshairsHline:            true,
+            crosshairsVline:            true,
+            crosshairsColor:            '#333',
+            crosshairsLinewidth:        1,
+            crosshairsCoords:           false,
+            crosshairsCoordsFixed:      true,
+            crosshairsCoordsLabelsX:    'X',
+            crosshairsCoordsLabelsY:    'Y',
+            crosshairsCoordsFormatterX: null,
+            crosshairsCoordsFormatterY: null,
+
+            annotatable:                false,
+            annotatableColor:           'black',
+            annotatableLinewidth:       1,
+            
+            lasso:                      false,
+            lassoFill:                  '#0064',
+            lassoStroke:                '#006',
+            lassoLinewidth:             1,
+            lassoHighlightLinewidth:    1,
+            lassoHighlightStroke:       'transparent',
+            lassoHighlightFill:         'red',
+            lassoCallback:              null,
+            lassoClearCallback:         null,
+            lassoPersist:               false,
+            lassoPersistLocal:          true,
+            lassoPersistLoad:           null,
+            lassoPersistSave:           null,
+
+            line:                       false,
+            lineLinewidth:              1,
+            lineColors:                 ['green', 'red','blue','orange','pink','brown','black','gray'],
+            lineShadowColor:            'rgba(0,0,0,0)',
+            lineShadowBlur:             2,
+            lineShadowOffsetx:          3,
+            lineShadowOffsety:          3,
+            lineStepped:                false,
+            lineVisible:                true,
+
+            key:                        null,
+            keyBackground:              'white',
+            keyPosition:                'graph',
+            keyHalign:                  'right',
+            keyShadow:                  false,
+            keyShadowColor:             '#666',
+            keyShadowBlur:              3,
+            keyShadowOffsetx:           2,
+            keyShadowOffsety:           2,
+            keyPositionGutterBoxed:     false,
+            keyPositionX:               null,
+            keyPositionY:               null,
+            keyInteractive:             false,
+            keyInteractiveHighlightChartFill: 'rgba(255,0,0,0.9)',
+            keyInteractiveHighlightLabel:     'rgba(255,0,0,0.2)',
+            keyColorShape:              'square',
+            keyRounded:                 true,
+            keyLinewidth:               1,
+            keyColors:                  null,
+            keyLabelsColor:             null,
+            keyLabelsFont:              null,
+            keyLabelsSize:              null,
+            keyLabelsBold:              null,
+            keyLabelsItalic:            null,
+            keyLabelsOffsetx:           0,
+            keyLabelsOffsety:           0,
+            keyFormattedDecimals:       0,
+            keyFormattedPoint:          '.',
+            keyFormattedThousand:       ',',
+            keyFormattedUnitsPre:       '',
+            keyFormattedUnitsPost:      '',
+            keyFormattedValueSpecific:  null,
+            keyFormattedItemsCount:     null,
+
+            boxplotWidth:               10,
+            boxplotCapped:              true,
+
+            trendline:                  false,
+            trendlineColors:            ['gray'],
+            trendlineLinewidth:         1,
+            trendlineMargin:            15,
+            trendlineDashed:            true,
+            trendlineDotted:            false,
+            trendlineDashArray:         null,
+            trendlineClipping:          null,
+
+            highlightStroke:            'rgba(0,0,0,0)',
+            highlightFill:              'rgba(255,255,255,0.7)',
+            
+            bubbleMin:                  0,
+            bubbleMax:                  null,
+            bubbleWidth:                null,
+            bubbleData:                 null,
+            bubbleLinewidth:            1,
+            bubbleShadow:               false,
+            bubbleShadowColor:          '#aaa',
+            bubbleShadowOffsetx:        2,
+            bubbleShadowOffsety:        2,
+            bubbleShadowBlur:           3,
+
+            marimekkoLinewidth:               10,
+            marimekkoColors:                  ['#faa', '#afa', '#aaf', '#ffa', '#faf', '#aff'],
+            marimekkoColorsSequential:        false,
+            marimekkoColorsStroke:            'white',
+            marimekkoLabels:                  null,
+            marimekkoLabelsColor:             null,
+            marimekkoLabelsSize:              null,
+            marimekkoLabelsFont:              null,
+            marimekkoLabelsBold:              null,
+            marimekkoLabelsItalic:            null,
+            marimekkoLabelsOffsetx:           0,
+            marimekkoLabelsOffsety:           0,
+            marimekkoLabelsFormattedDecimals: 0,
+            marimekkoLabelsFormattedPoint:    '.',
+            marimekkoLabelsFormattedThousand: ',',
+            marimekkoLabelsFormattedUnitsPre: '',
+            marimekkoLabelsFormattedUnitsPost:'',
+            marimekkoLabelsIngraph:           false,
+            marimekkoLabelsIngraphColor:      null,
+            marimekkoLabelsIngraphSize:       10,
+            marimekkoLabelsIngraphFont:       null,
+            marimekkoLabelsIngraphBold:       null,
+            marimekkoLabelsIngraphItalic:     null,
+            marimekkoLabelsIngraphUnitsPre:   '',
+            marimekkoLabelsIngraphUnitsPost:  '',
+            marimekkoLabelsIngraphPoint:      '.',
+            marimekkoLabelsIngraphThousand:   ',',
+            marimekkoLabelsIngraphDecimals:   0,
+            marimekkoLabelsIngraphOffsetx:    0,
+            marimekkoLabelsIngraphOffsety:    0,
+            marimekkoLabelsIngraphBackgroundFill: '#fffa',
+            marimekkoLabelsIngraphBackgroundStroke: 'transparent',
+            marimekkoLabelsIngraphSpecific:   null,
+            
+            adjustable:                 false,
+            adjustableOnly:             null,
+
+            clearto:                    'rgba(0,0,0,0)',
+            
+            outofbounds:                false,
+
+            animationTrace:             false,
+            animationTraceClip:         1,
+            
+            horizontalLines:            null
+        }
+
+        //
+        // This allows the data points to be given as dates as well as numbers. Formats supported by RGraph.parseDate() are accepted.
+        // 
+        // ALSO: unrelated but this loop is also used to convert null values to an
+        // empty array
+        //
+        for (var i=0; i<this.data.length; ++i) {
+            for (var j=0; j<this.data[i].length; ++j) {
+                
+                // Convert null data points to an empty erray
+                if ( RGraph.isNull(this.data[i][j]) ) {
+                    this.data[i][j] = [];
+                }
+
+                // Allow for the X point to be dates
+                if (this.data[i][j] && typeof this.data[i][j][0] == 'string') {
+                    this.data[i][j][0] = RGraph.parseDate(this.data[i][j][0]);
+                }
+            }
+        }
+
+
+        //
+        // Now make the data_arr array - all the data as one big
+        // array
+        //
+        this.data_arr = [];
+
+        for (var i=0; i<this.data.length; ++i) {
+            for (var j=0; j<this.data[i].length; ++j) {
+                this.data_arr.push(this.data[i][j]);
+            }
+        }
+
+        // Create the $ objects so that they can be used
+        for (var i=0; i<this.data_arr.length; ++i) {
+            this['$' + i] = {}
+        }
+
+
+        // Check for support
+        if (!this.canvas) {
+            alert('[SCATTER] No canvas support');
+            return;
+        }
+
+
+
+        // Easy access to  properties and the path function
+        var properties = this.properties;
+        this.path      = RGraph.pathObjectFunction;
+        
+        
+        //
+        // "Decorate" the object with the generic effects if the effects library has been included
+        //
+        if (RGraph.Effects && typeof RGraph.Effects.decorate === 'function') {
+            RGraph.Effects.decorate(this);
+        }
+        
+        
+        
+        // Add the responsive method. This method resides in the common file.
+        this.responsive = RGraph.responsive;
+
+
+
+
+
+
+
+
+        //
+        // A simple setter
+        // 
+        // @param string name  The name of the property to set
+        // @param string value The value of the property
+        //
+        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 arguments[0] === 'object') {
+                for (i in arguments[0]) {
+                    if (typeof i === 'string') {
+                        this.set(i, arguments[0][i]);
+                    }
+                }
+
+                return this;
+            }
+
+            properties[name] = value;
+
+
+            
+            // If a single tooltip has been given add it to each datapiece
+            if (name === 'tooltips' && typeof value === 'string') {
+                this.populateTooltips();
+            }
+
+            return this;
+        };
+
+
+
+
+
+
+
+
+        //
+        // A simple getter
+        // 
+        // @param string name  The name of the property to set
+        //
+        this.get = function (name)
+        {
+            return properties[name];
+        };
+
+
+
+
+
+
+
+
+        //
+        // The function you call to draw the Scatter chart
+        //
+        this.draw = function ()
+        {
+            // MUST be the first thing done!
+            if (typeof properties.backgroundImage === 'string') {
+                RGraph.drawBackgroundImage(this);
+            }
+
+
+            //
+            // Fire the onbeforedraw event
+            //
+            RGraph.fireCustomEvent(this, 'onbeforedraw');
+
+
+
+            // Translate half a pixel for antialiasing purposes - but only if it hasn't been
+            // done already
+            //
+            // MUST be the first thing done!
+            //
+            if (!this.canvas.__rgraph_aa_translated__) {
+                this.context.translate(0.5,0.5);
+            
+                this.canvas.__rgraph_aa_translated__ = true;
+            }
+    
+            //
+            // Parse the colors. This allows for simple gradient syntax
+            //
+            if (!this.colorsParsed) {
+                this.parseColors();
+                
+                // Don't want to do this again
+                this.colorsParsed = true;
+            }
+    
+
+
+
+            //
+            // Stop this growing uncontrollably
+            //
+            this.coordsText = [];
+
+
+            //
+            // Populate the labels string/array if its a string
+            //
+            if (properties.xaxisLabels && properties.xaxisLabels.length) {
+                //
+                // If the labels option is a string then turn it
+                // into an array.
+                //
+                if (typeof properties.xaxisLabels === 'string') {
+                    properties.xaxisLabels = RGraph.arrayPad({
+                        array:  [],
+                        length: properties.xaxisLabelsCount,
+                        value:  properties.xaxisLabels
+                    });
+                }
+
+                for (var i=0; i<properties.xaxisLabels.length; ++i) {
+                
+                    if (typeof properties.xaxisLabels[i] === 'object' && properties.xaxisLabels[i].length === 2) {
+                        var label = properties.xaxisLabels[i][0];
+                    } else {
+                        var label = properties.xaxisLabels[i];
+                    }
+                
+                    label = RGraph.labelSubstitution({
+                        object:    this,
+                        text:      label,
+                        index:     i,
+                        value:     this.data[0][i],
+                        decimals:  properties.xaxisLabelsFormattedDecimals  || 0,
+                        unitsPre:  properties.xaxisLabelsFormattedUnitsPre  || '',
+                        unitsPost: properties.xaxisLabelsFormattedUnitsPost || '',
+                        thousand:  properties.xaxisLabelsFormattedThousand  || ',',
+                        point:     properties.xaxisLabelsFormattedPoint     || '.'
+                    });
+
+                    if (typeof properties.xaxisLabels[i] === 'object' && properties.xaxisLabels[i].length === 2) {
+                        properties.xaxisLabels[i][0] = label;
+                    } else {
+                        properties.xaxisLabels[i] = label;
+                    }
+                }
+            }
+
+
+            //
+            // Make the margins easy ro access
+            //
+            this.marginLeft   = properties.marginLeft;
+            this.marginRight  = properties.marginRight;
+            this.marginTop    = properties.marginTop;
+            this.marginBottom = properties.marginBottom;
+    
+            // Go through all the data points and see if a tooltip has been given
+            this.hasTooltips = false;
+            var overHotspot  = false;
+
+            // Reset the coords array
+            this.coords = [];
+    
+            //
+            // This facilitates the xmax, xmin and X values being dates
+            //
+            if (typeof properties.xaxisScaleMin == 'string') properties.xaxisScaleMin = RGraph.parseDate(properties.xaxisScaleMin);
+            if (typeof properties.xaxisScaleMax == 'string') properties.xaxisScaleMax = RGraph.parseDate(properties.xaxisScaleMax);
+
+            //
+            // Look for tooltips and populate the tooltips
+            // 
+            // NB 26/01/2011 Updated so that the tooltips property is ALWAYS populated
+            //
+            //if (!RGraph.ISOLD) {
+                this.set('tooltips', []);
+                for (var i=0,len=this.data.length; i<len; i+=1) {
+                    for (var j =0,len2=this.data[i].length;j<len2; j+=1) {
+    
+                        if (this.data[i][j] && this.data[i][j][3]) {
+                            properties.tooltips.push(this.data[i][j][3]);
+                            this.hasTooltips = true;
+                        } else {
+                            properties.tooltips.push(null);
+                        }
+                    }
+                }
+            //}
+
+            // Reset the maximum value
+            this.max = 0;
+    
+            // Work out the maximum Y value
+            //if (properties.ymax && properties.ymax > 0) {
+            if (typeof properties.yaxisScaleMax === 'number') {
+
+                this.max   = properties.yaxisScaleMax;
+                this.min   = properties.yaxisScaleMin ? properties.yaxisScaleMin : 0;
+
+
+                this.scale2 = RGraph.getScale({object: this, options: {
+                    'scale.max':          this.max,
+                    'scale.min':          this.min,
+                    'scale.strict':       true,
+                    'scale.thousand':     properties.yaxisScaleThousand,
+                    'scale.point':        properties.yaxisScalePoint,
+                    'scale.decimals':     properties.yaxisScaleDecimals,
+                    'scale.labels.count': properties.yaxisLabelsCount,
+                    'scale.round':        properties.yaxisScaleRound,
+                    'scale.units.pre':    properties.yaxisScaleUnitsPre,
+                    'scale.units.post':   properties.yaxisScaleUnitsPost
+                }});
+                
+                this.max = this.scale2.max;
+                this.min = this.scale2.min;
+                var decimals = properties.yaxisScaleDecimals;
+    
+            } else {
+    
+                var i = 0;
+                var j = 0;
+
+                for (i=0,len=this.data.length; i<len; i+=1) {
+                    for (j=0,len2=this.data[i].length; j<len2; j+=1) {
+                        if (!RGraph.isNull(this.data[i][j]) && this.data[i][j][1] != null) {
+                            this.max = Math.max(this.max, typeof this.data[i][j][1] == 'object' ? RGraph.arrayMax(this.data[i][j][1]) : Math.abs(this.data[i][j][1]));
+                        }
+                    }
+                }
+    
+                this.min   = properties.yaxisScaleMin ? properties.yaxisScaleMin : 0;
+
+                this.scale2 = RGraph.getScale({object: this, options: {
+                    'scale.max':          this.max,
+                    'scale.min':          this.min,
+                    'scale.thousand':     properties.yaxisScaleThousand,
+                    'scale.point':        properties.yaxisScalePoint,
+                    'scale.decimals':     properties.yaxisScaleDecimals,
+                    'scale.labels.count': properties.yaxisLabelsCount,
+                    'scale.round':        properties.yaxisScaleRound,
+                    'scale.units.pre':    properties.yaxisScaleUnitsPre,
+                    'scale.units.post':   properties.yaxisScaleUnitsPost
+                }});
+
+                this.max = this.scale2.max;
+                this.min = this.scale2.min;
+            }
+    
+            this.grapharea = this.canvas.height - this.marginTop - this.marginBottom;
+    
+    
+
+            // Progressively Draw the chart
+            RGraph.Background.draw(this);
+    
+            //
+            // Draw any horizontal bars that have been specified
+            //
+            if (properties.backgroundHbars && properties.backgroundHbars.length) {
+                RGraph.drawBars(this);
+            }
+    
+            //
+            // Draw any vertical bars that have been specified
+            //
+            if (properties.backgroundVbars && properties.backgroundVbars.length) {
+                this.drawVBars();
+            }
+
+            //
+            // Draw an X scale
+            //
+            if (!properties.xaxisScaleMax) {
+              
+                var xmax = 0;
+                var xmin = properties.xaxisScaleMin;
+              
+                for (var ds=0,len=this.data.length; ds<len; ds+=1) {
+                    for (var point=0,len2=this.data[ds].length; point<len2; point+=1) {
+                        xmax = Math.max(xmax, this.data[ds][point][0]);
+                    }
+                }
+            } else {
+                xmax = properties.xaxisScaleMax;
+                xmin = properties.xaxisScaleMin
+            }
+
+            if (properties.xaxisScale) {
+                this.xscale2 = RGraph.getScale({object: this, options: {
+                    'scale.max':          xmax,
+                    'scale.min':          xmin,
+                    'scale.decimals':     properties.xaxisScaleDecimals,
+                    'scale.point':        properties.xaxisScalePoint,
+                    'scale.thousand':     properties.xaxisScaleThousand,
+                    'scale.units.pre':    properties.xaxisScaleUnitsPre,
+                    'scale.units.post':   properties.xaxisScaleUnitsPost,
+                    'scale.labels.count': properties.xaxisLabelsCount,
+                    'scale.strict':       true
+                }});
+
+                this.set('xaxisScaleMax', this.xscale2.max);
+            }
+
+            this.drawAxes();
+
+
+
+
+
+
+
+            this.drawLabels();
+
+            // Clip the canvas so that the trace2 effect is facilitated
+            if (properties.animationTrace) {
+                this.context.save();
+                this.context.beginPath();
+                this.context.rect(0, 0, this.canvas.width * properties.animationTraceClip, this.canvas.height);
+                this.context.clip();
+            }
+
+                for(i=0; i<this.data.length; ++i) {
+                    
+                    this.drawMarks(i);
+
+                    // Draw bubbles
+                    if (RGraph.isArray(properties.bubbleData)) {
+                        this.drawBubble(i);
+                    }
+        
+                    // Set the shadow
+                    this.context.shadowColor   = properties.lineShadowColor;
+                    this.context.shadowOffsetX = properties.lineShadowOffsetx;
+                    this.context.shadowOffsetY = properties.lineShadowOffsety;
+                    this.context.shadowBlur    = properties.lineShadowBlur;
+    
+                    this.drawLine(i);
+        
+                    // Turn the shadow off
+                    RGraph.noShadow(this);
+                }
+        
+        
+                if (properties.line) {
+                    for (var i=0,len=this.data.length;i<len; i+=1) {
+                        this.drawMarks(i); // Call this again so the tickmarks appear over the line
+                    }
+                }
+            
+            if (properties.animationTrace) {
+                this.context.restore();
+            }
+            
+            
+            //
+            // Draw a trendline if requested
+            //
+            if (properties.trendline) {
+                for (var i=0; i<this.data.length; ++i) {
+                    if (properties.trendline === true || (typeof properties.trendline === 'object' && properties.trendline[i] === true) ) {
+                        this.drawTrendline(i);
+                    }
+                }
+            }
+    
+    
+    
+            //
+            // Setup the context menu if required
+            //
+            if (properties.contextmenu) {
+                RGraph.showContext(this);
+            }
+    
+            
+            
+            //
+            // Draw the key if necessary
+            //
+
+            if (properties.key && properties.key.length) {
+                RGraph.drawKey(
+                    this,
+                    properties.key,
+                    this.isMarimekko ? properties.marimekkoColors : properties.lineColors
+                );
+            }
+    
+    
+            //
+            // Draw " above" labels if enabled
+            //
+            if (properties.labelsAbove) {
+                this.drawAboveLabels();
+            }
+    
+            //
+            // Draw the "in graph" labels, using the member function, NOT the shared function in RGraph.common.core.js
+            //
+            this.drawInGraphLabels(this);
+
+
+
+
+            //
+            // Add custom text thats specified
+            //
+            RGraph.addCustomText(this);
+
+
+
+
+
+
+
+            // Draw any custom lines that have been defined
+            RGraph.drawHorizontalLines(this);
+
+
+
+
+
+
+
+            // Draw any custom lines that have been defined
+            this.installLasso();
+
+
+            //
+            // Draw a Marimekko chart
+            //
+            if (this.isMarimekko) {
+                this.drawMarimekko();
+            }
+
+
+
+    
+    
+    
+    
+            //
+            // This installs the event listeners
+            //
+            RGraph.installEventListeners(this);
+
+
+            //
+            // Fire the onfirstdraw event
+            //
+            if (this.firstDraw) {
+                this.firstDraw = false;
+                RGraph.fireCustomEvent(this, 'onfirstdraw');
+                this.firstDrawFunc();
+            }
+
+
+
+            //
+            // Fire the RGraph draw event
+            //
+            RGraph.fireCustomEvent(this, 'ondraw');
+
+
+
+
+
+
+
+
+
+            //
+            // Install any inline responsive configuration. This
+            // should be last in the draw function - even after
+            // the draw events.
+            //
+            RGraph.installInlineResponsive(this);
+
+
+
+
+
+
+
+
+            return this;
+        }
+
+
+
+
+
+
+
+
+        //
+        // Draws the axes of the scatter graph
+        //
+        this.drawAxes = function ()
+        {
+            this.context.lineCap = 'square';
+
+            // Draw the X axis
+            RGraph.drawXAxis(this);
+            
+            // Draw the Y axis
+            RGraph.drawYAxis(this);
+
+            // Reset the linewidth back to one
+            //
+            this.context.lineWidth = 1;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws the labels on the scatter graph
+        //
+        this.drawLabels = function ()
+        {
+            // Nothing to do here because the labels are drawn in the RGraph.drawXAxis() and
+            // RGrapth.drawYAxis functions
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws the actual scatter graph marks
+        // 
+        // @param i integer The dataset index
+        //
+        this.drawMarks = function (i)
+        {
+            //
+            //  Reset the coords array
+            //
+            this.coords[i] = [];
+    
+            //
+            // Plot the values
+            //
+            var xmax          = properties.xaxisScaleMax;
+            var default_color = properties.colorsDefault;
+
+            for (var j=0,len=this.data[i].length; j<len; j+=1) {
+                //
+                // This is here because tooltips are optional
+                //
+                var data_points = this.data[i];
+                
+                // Allow for null points
+                if (RGraph.isNull(data_points[j])) {
+                    continue;
+                }
+
+                var xCoord  = data_points[j][0];
+                var yCoord  = data_points[j][1];
+                var color   = data_points[j][2] ? data_points[j][2] : default_color;
+                var tooltip = (data_points[j] && data_points[j][3]) ? data_points[j][3] : null;
+    
+
+                this.drawMark(
+                    i,
+                    xCoord,
+                    yCoord,
+                    xmax,
+                    this.scale2.max,
+                    color,
+                    tooltip,
+                    this.coords[i],
+                    data_points,
+                    j
+                );
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws a single scatter mark
+        //
+        this.drawMark = function (data_set_index, x, y, xMax, yMax, color, tooltip, coords, data, data_index)
+        {
+            var tickmarks = properties.tickmarksStyle,
+                tickSize  = properties.tickmarksSize,
+                xMin      = properties.xaxisScaleMin,
+                x         = ((x - xMin) / (xMax - xMin)) * (this.canvas.width - this.marginLeft - this.marginRight),
+                originalX = x,
+                originalY = y;
+
+            //
+            // This allows the tickmarks property to be an array
+            //
+            if (tickmarks && typeof tickmarks == 'object') {
+                tickmarks = tickmarks[data_set_index];
+            }
+    
+    
+            //
+            // This allows the ticksize property to be an array
+            //
+            if (typeof tickSize == 'object') {
+                var tickSize     = tickSize[data_set_index];
+                var halfTickSize = tickSize / 2;
+            } else {
+                var halfTickSize = tickSize / 2;
+            }
+    
+    
+            //
+            // This bit is for boxplots only
+            //
+            if (   y
+                && typeof y === 'object'
+                && typeof y[0] === 'number'
+                && typeof y[1] === 'number'
+                && typeof y[2] === 'number'
+                && typeof y[3] === 'number'
+                && typeof y[4] === 'number'
+               ) {
+    
+                this.set('boxplot', true);
+    
+    
+                var y0   = this.getYCoord(y[0], properties.outofbounds),
+                    y1   = this.getYCoord(y[1], properties.outofbounds),
+                    y2   = this.getYCoord(y[2], properties.outofbounds),
+                    y3   = this.getYCoord(y[3], properties.outofbounds),
+                    y4   = this.getYCoord(y[4], properties.outofbounds),
+                    col1 = y[5],
+                    col2 = y[6],
+                    boxWidth = typeof y[7]  == 'number' ? y[7] : properties.boxplotWidth;
+    
+    
+            } else {
+    
+                //
+                // The new way of getting the Y coord. This function (should) handle everything
+                //
+                var yCoord = this.getYCoord(y, properties.outofbounds);
+            }
+    
+            //
+            // Account for the X axis being at the centre
+            //
+            // This is so that points are on the graph, and not the gutter - which helps
+            x += this.marginLeft;
+    
+    
+    
+    
+            this.context.beginPath();
+            
+            // Color
+            this.context.strokeStyle = color;
+    
+    
+    
+            //
+            // Boxplots
+            //
+            if (properties.boxplot) {
+
+                // boxWidth is a scale value, so convert it to a pixel vlue
+                boxWidth = (boxWidth / properties.xaxisScaleMax) * (this.canvas.width - this.marginLeft - this.marginRight);
+    
+                var halfBoxWidth = boxWidth / 2;
+    
+                if (properties.lineVisible) {
+                    this.context.beginPath();
+                        
+                        // Set the outline color of the box
+
+                        if (typeof y[8] === 'string') {
+                            this.context.strokeStyle = y[8];
+                        }
+                        this.context.strokeRect(x - halfBoxWidth, y1, boxWidth, y3 - y1);
+            
+                        // Draw the upper coloured box if a value is specified
+                        if (col1) {
+                            this.context.fillStyle = col1;
+                            this.context.fillRect(x - halfBoxWidth, y1, boxWidth, y2 - y1);
+                        }
+            
+                        // Draw the lower coloured box if a value is specified
+                        if (col2) {
+                            this.context.fillStyle = col2;
+                            this.context.fillRect(x - halfBoxWidth, y2, boxWidth, y3 - y2);
+                        }
+                    this.context.stroke();
+        
+                    // Now draw the whiskers
+                    this.context.beginPath();
+                    if (properties.boxplotCapped) {
+                        this.context.moveTo(x - halfBoxWidth, Math.round(y0));
+                        this.context.lineTo(x + halfBoxWidth, Math.round(y0));
+                    }
+        
+                    this.context.moveTo(Math.round(x), y0);
+                    this.context.lineTo(Math.round(x ), y1);
+        
+                    if (properties.boxplotCapped) {
+                        this.context.moveTo(x - halfBoxWidth, Math.round(y4));
+                        this.context.lineTo(x + halfBoxWidth, Math.round(y4));
+                    }
+        
+                    this.context.moveTo(Math.round(x), y4);
+                    this.context.lineTo(Math.round(x), y3);
+
+                    this.context.stroke();
+                }
+            }
+    
+    
+            //
+            // Draw the tickmark, but not for boxplots
+            //
+            if (properties.lineVisible && typeof y == 'number' && !y0 && !y1 && !y2 && !y3 && !y4) {
+    
+                if (tickmarks == 'circle') {
+                    this.context.arc(x, yCoord, halfTickSize, 0, 6.28, 0);
+                    this.context.fillStyle = color;
+                    this.context.fill();
+                
+                } else if (tickmarks == 'plus') {
+    
+                    this.context.moveTo(x, yCoord - halfTickSize);
+                    this.context.lineTo(x, yCoord + halfTickSize);
+                    this.context.moveTo(x - halfTickSize, yCoord);
+                    this.context.lineTo(x + halfTickSize, yCoord);
+                    this.context.stroke();
+                
+                } else if (tickmarks == 'square') {
+                    this.context.strokeStyle = color;
+                    this.context.fillStyle = color;
+                    this.context.fillRect(
+                        x - halfTickSize,
+                        yCoord - halfTickSize,
+                        tickSize,
+                        tickSize
+                    );
+    
+                } else if (tickmarks == 'cross') {
+    
+                    this.context.moveTo(x - halfTickSize, yCoord - halfTickSize);
+                    this.context.lineTo(x + halfTickSize, yCoord + halfTickSize);
+                    this.context.moveTo(x + halfTickSize, yCoord - halfTickSize);
+                    this.context.lineTo(x - halfTickSize, yCoord + halfTickSize);
+                    
+                    this.context.stroke();
+                
+                //
+                // Diamond shape tickmarks
+                //
+                } else if (tickmarks == 'diamond') {
+                    this.context.fillStyle = this.context.strokeStyle;
+    
+                    this.context.moveTo(x, yCoord - halfTickSize);
+                    this.context.lineTo(x + halfTickSize, yCoord);
+                    this.context.lineTo(x, yCoord + halfTickSize);
+                    this.context.lineTo(x - halfTickSize, yCoord);
+                    this.context.lineTo(x, yCoord - halfTickSize);
+    
+                    this.context.fill();
+                    this.context.stroke();
+    
+                //
+                // Custom tickmark style
+                //
+                } else if (typeof tickmarks == 'function') {
+    
+                    var graphWidth  = this.canvas.width - this.marginLeft - this.marginRight,
+                        graphheight = this.canvas.height - this.marginTop - this.marginBottom,
+                        xVal = ((x - this.marginLeft) / graphWidth) * xMax,
+                        yVal = ((graphheight - (yCoord - this.marginTop)) / graphheight) * yMax;
+    
+                    tickmarks(this, data, x, yCoord, xVal, yVal, xMax, yMax, color, data_set_index, data_index)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                //
+                // Image based tickmark
+                //
+                // lineData, xPos, yPos, color, isShadow, prevX, prevY, tickmarks, index
+                } else if (
+                           typeof tickmarks === 'string' &&
+                            (
+                             tickmarks.substr(0, 6) === 'image:'  ||
+                             tickmarks.substr(0, 5) === 'data:'   ||
+                             tickmarks.substr(0, 1) === '/'       ||
+                             tickmarks.substr(0, 3) === '../'     ||
+                             tickmarks.substr(0, 7) === 'images/'
+                            )
+                          ) {
+    
+                    var img = new Image();
+                    
+                    if (tickmarks.substr(0, 6) === 'image:') {
+                        img.src = tickmarks.substr(6);
+                    } else {
+                        img.src = tickmarks;
+                    }
+    
+                    var obj = this;
+                    img.onload = function ()
+                    {
+                        if (properties.tickmarksStyleImageHalign === 'center') x -= (this.width / 2);
+                        if (properties.tickmarksStyleImageHalign === 'right')  x -= this.width;
+
+                        if (properties.tickmarksStyleImageValign === 'center') yCoord -= (this.height / 2);
+                        if (properties.tickmarksStyleImageValign === 'bottom') yCoord -= this.height;
+                        
+                        x += properties.tickmarksStyleImageOffsetx;
+                        yCoord += properties.tickmarksStyleImageOffsety;
+    
+                        obj.context.drawImage(this, x, yCoord);
+                    }
+
+
+
+
+
+                //
+                // No tickmarks
+                //
+                } else if (tickmarks === null) {
+        
+                //
+                // Unknown tickmark type
+                //
+                } else {
+                    alert('[SCATTER] (' + this.id + ') Unknown tickmark style: ' + tickmarks );
+                }
+            }
+    
+            //
+            // Add the tickmark to the coords array
+            //
+
+            if (   properties.boxplot
+                && typeof y0 === 'number'
+                && typeof y1 === 'number'
+                && typeof y2 === 'number'
+                && typeof y3 === 'number'
+                && typeof y4 === 'number') {
+    
+                x      = [x - halfBoxWidth, x + halfBoxWidth];
+                yCoord = [y0, y1, y2, y3, y4];
+            }
+    
+            coords.push([x, yCoord, tooltip]);
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws an optional line connecting the tick marks.
+        // 
+        // @param i The index of the dataset to use
+        //
+        this.drawLine = function (i)
+        {
+            if (typeof properties.lineVisible == 'boolean' && properties.lineVisible == false) {
+                return;
+            }
+    
+            if (properties.line && this.coords[i].length >= 2) {
+            
+                if (properties.lineDash && typeof this.context.setLineDash === 'function') {
+                    this.context.setLineDash(properties.lineDash);
+                }
+
+                this.context.lineCap     = 'round';
+                this.context.lineJoin    = 'round';
+                this.context.lineWidth   = this.getLineWidth(i);// i is the index of the set of coordinates
+                this.context.strokeStyle = properties.lineColors[i];
+
+                this.context.beginPath();
+
+                    var prevY = null;
+                    var currY = null;
+        
+                    for (var j=0,len=this.coords[i].length; j<len; j+=1) {
+                    
+        
+                        var xPos = this.coords[i][j][0];
+                        var yPos = this.coords[i][j][1];
+                        
+                        if (j > 0) prevY = this.coords[i][j - 1][1];
+                        currY = yPos;
+    
+                        if (j == 0 || RGraph.isNull(prevY) || RGraph.isNull(currY)) {
+                            this.context.moveTo(xPos, yPos);
+                        } else {
+                        
+                            // Stepped?
+                            var stepped = properties.lineStepped;
+        
+                            if (   (typeof stepped == 'boolean' && stepped)
+                                || (typeof stepped == 'object' && stepped[i])
+                               ) {
+                                this.context.lineTo(this.coords[i][j][0], this.coords[i][j - 1][1]);
+                            }
+        
+                            this.context.lineTo(xPos, yPos);
+                        }
+                    }
+                this.context.stroke();
+            
+                //
+                // Set the linedash back to the default
+                //
+                if (properties.lineDash && typeof this.context.setLineDash === 'function') {
+                    this.context.setLineDash([1,0]);
+                }
+            }
+
+            //
+            // Set the linewidth back to 1
+            //
+            this.context.lineWidth = 1;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Returns the linewidth
+        // 
+        // @param number i The index of the "line" (/set of coordinates)
+        //
+        this.getLineWidth = function (i)
+        {
+            var linewidth = properties.lineLinewidth;
+            
+            if (typeof linewidth == 'number') {
+                return linewidth;
+            
+            } else if (typeof linewidth == 'object') {
+                if (linewidth[i]) {
+                    return linewidth[i];
+                } else {
+                    return linewidth[0];
+                }
+    
+                alert('[SCATTER] Error! The linewidth property should be a single number or an array of one or more numbers');
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws vertical bars. Line chart doesn't use a horizontal scale, hence this function
+        // is not common
+        //
+        this.drawVBars = function ()
+        {
+            var vbars = properties.backgroundVbars;
+            var graphWidth = this.canvas.width - this.marginLeft - this.marginRight;
+
+            if (vbars) {
+            
+                var xmax = properties.xaxisScaleMax;
+                var xmin = properties.xaxisScaleMin;
+                
+                for (var i=0,len=vbars.length; i<len; i+=1) {
+                    
+                    var key = i;
+                    var value = vbars[key];
+
+                    //
+                    // Accomodate date/time values
+                    //
+                    if (typeof value[0] == 'string') value[0] = RGraph.parseDate(value[0]);
+                    if (typeof value[1] == 'string') value[1] = RGraph.parseDate(value[1]) - value[0];
+
+                    var x     = (( (value[0] - xmin) / (xmax - xmin) ) * graphWidth) + this.marginLeft;
+                    var width = (value[1] / (xmax - xmin) ) * graphWidth;
+
+                    this.context.fillStyle = value[2];
+                    this.context.fillRect(x, this.marginTop, width, (this.canvas.height - this.marginTop - this.marginBottom));
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws in-graph labels.
+        // 
+        // @param object obj The graph object
+        //
+        this.drawInGraphLabels = function (obj)
+        {
+            var labels  = obj.get('labelsIngraph');
+            var labels_processed = [];
+    
+            if (!labels) {
+                return;
+            }
+    
+            // Defaults
+            var fgcolor   = 'black';
+            var bgcolor   = 'white';
+            var direction = 1;
+
+    
+            var textConf = RGraph.getTextConf({
+                object: this,
+                prefix: 'labelsIngraph'
+            });
+
+            //
+            // Preprocess the labels array. Numbers are expanded
+            //
+            for (var i=0,len=labels.length; i<len; i+=1) {
+                if (typeof labels[i] == 'number') {
+                    for (var j=0; j<labels[i]; ++j) {
+                        labels_processed.push(null);
+                    }
+                } else if (typeof labels[i] == 'string' || typeof labels[i] == 'object') {
+                    labels_processed.push(labels[i]);
+                
+                } else {
+                    labels_processed.push('');
+                }
+            }
+
+            //
+            // Turn off any shadow
+            //
+            RGraph.noShadow(obj);
+    
+            if (labels_processed && labels_processed.length > 0) {
+    
+                var i=0;
+    
+                for (var set=0; set<obj.coords.length; ++set) {
+                    for (var point = 0; point<obj.coords[set].length; ++point) {
+                        if (labels_processed[i]) {
+                            var x = obj.coords[set][point][0] + properties.labelsIngraphOffsetx;
+                            var y = obj.coords[set][point][1] + properties.labelsIngraphOffsety;
+                            var length = typeof labels_processed[i][4] == 'number' ? labels_processed[i][4] : 25;
+                                
+                            var text_x = x;
+                            var text_y = y - 5 - length;
+    
+                            this.context.moveTo(x, y - 5);
+                            this.context.lineTo(x, y - 5 - length);
+                            
+                            this.context.stroke();
+                            this.context.beginPath();
+                            
+                            // This draws the arrow
+                            this.context.moveTo(x, y - 5);
+                            this.context.lineTo(x - 3, y - 10);
+                            this.context.lineTo(x + 3, y - 10);
+                            this.context.closePath();
+
+                            this.context.beginPath();
+                                // Fore ground color
+                                this.context.fillStyle = (typeof labels_processed[i] == 'object' && typeof labels_processed[i][1] == 'string') ? labels_processed[i][1] : 'black';
+                                
+                                RGraph.text({
+                                    
+                              object: this,
+                                
+                                font:   textConf.font,
+                                size:   textConf.size,
+                                color:  textConf.color,
+                                bold:   textConf.bold,
+                                italic: textConf.italic,
+
+                                    x:            text_x,
+                                    y:            text_y,
+                                    text:         (typeof labels_processed[i] == 'object' && typeof labels_processed[i][0] == 'string') ? labels_processed[i][0] : labels_processed[i],
+                                    valign:       'bottom',
+                                    halign:       'center',
+                                    bounding:     true,
+                                    boundingFill: (typeof labels_processed[i] == 'object' && typeof labels_processed[i][2] == 'string') ? labels_processed[i][2] : 'white',
+                                    tag:          'labels.ingraph'
+                                });
+                            this.context.fill();
+                        }
+                        
+                        i++;
+                    }
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // This function makes it much easier to get the (if any) point that is currently being hovered over.
+        // 
+        // @param object e The event object
+        //
+        this.getShape = function (e)
+        {
+            var mouseXY     = RGraph.getMouseXY(e);
+            var mouseX      = mouseXY[0];
+            var mouseY      = mouseXY[1];
+            var overHotspot = false;
+            var offset      = properties.tooltipsHotspot; // This is how far the hotspot extends
+
+            if (this.isMarimekko) {
+
+                for (var i=0,seq=0; i<this.coordsMarimekko.length; ++i) {
+                    for (var j=0; j<this.coordsMarimekko[i].length; ++j) {
+
+                        let coords = this.coordsMarimekko[i][j];
+
+                        if (    mouseX > coords[0] && mouseX < (coords[0] + coords[2])
+                             && mouseY > coords[1] && mouseY < (coords[1] + coords[3])
+                            ) {
+                            // Determine the tooltip
+                            var tooltip = null;
+                            if (RGraph.isString(this.get('marimekkoTooltips'))) {
+                                tooltip = this.get('marimekkoTooltips');
+                            } else if ( RGraph.isArray(this.get('marimekkoTooltips')) && RGraph.isString(this.get('marimekkoTooltips')[seq])) {
+                                tooltip = this.get('marimekkoTooltips')[seq];
+                            }
+                            
+                            if (RGraph.parseTooltipText) {
+                                tooltip = RGraph.parseTooltipText(tooltip, seq);
+                            }
+
+                            // Return the shape array
+                            return {
+                            object: this,
+                                 x: coords[0],
+                                 y: coords[1],
+                             width: coords[2],
+                            height: coords[3],
+                           tooltip: tooltip,
+                           dataset: i,
+                             index: j,
+                   sequentialIndex: seq
+                            };
+                        }
+
+                        ++seq;
+                        
+                    }
+                }
+
+            } else {
+                for (var set=0,len=this.coords.length; set<len; ++set) {
+                    for (var i=0,len2=this.coords[set].length; i<len2; ++i) {
+    
+                        var x = this.coords[set][i][0];
+                        var y = this.coords[set][i][1];
+                        var tooltip = this.data[set][i][3];
+        
+                        if (typeof y == 'number') {
+                            if (mouseX <= (x + offset) &&
+                                mouseX >= (x - offset) &&
+                                mouseY <= (y + offset) &&
+                                mouseY >= (y - offset)) {
+                        
+    
+    
+                                if (RGraph.parseTooltipText) {
+                                    var tooltip = RGraph.parseTooltipText(this.data[set][i][3], 0);
+                                }
+    
+                                var sequentialIndex = i;
+        
+                                for (var ds=(set-1); ds >=0; --ds) {
+                                    sequentialIndex += this.data[ds].length;
+                                }
+    
+                                
+                                
+                                
+    
+                                // Should the point be ignored?
+                                if (RGraph.tooltipsHotspotIgnore(this, sequentialIndex)) {
+                                    return;
+                                }
+    
+    
+    
+    
+                                return {
+                                    object: this,
+                                         x: x,
+                                         y: y,
+                                   tooltip: typeof tooltip === 'string' ? tooltip : null,
+                                   dataset: set,
+                                     index: i,
+                           sequentialIndex: sequentialIndex
+                                };
+                            }
+    
+    
+    
+    
+                        } else if (RGraph.isNull(y)) {
+                            // Nothing to see here
+    
+    
+    
+    
+    
+                        // Boxplots
+                        } else {
+    
+                            var mark = this.data[set][i];
+    
+                            //
+                            // Determine the width
+                            //
+                            var width = properties.boxplotWidth;
+                            
+                            if (typeof mark[1][7] === 'number') {
+                                width = mark[1][7];
+                            }
+    
+                            if (   typeof x === 'object'
+                                && mouseX > x[0]
+                                && mouseX < x[1]
+                                && mouseY > y[1]
+                                && mouseY < y[3]
+                                ) {
+    
+                                var tooltip = RGraph.parseTooltipText(this.data[set][i][3], 0);
+    
+                                // Determine the sequential index
+                                var sequentialIndex = i;    
+                                for (var ds=(set-1); ds >=0; --ds) {
+                                    sequentialIndex += this.data[ds].length;
+                                }
+    
+                                return {
+                                 object: this,
+                                      x: x[0],
+                                      y: y[3],
+                                  width: Math.abs(x[1] - x[0]),
+                                 height: Math.abs(y[1] - y[3]),
+                                dataset: set,
+                                  index: i,
+                        sequentialIndex: sequentialIndex,
+                                tooltip: tooltip
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws the above line labels
+        //
+        this.drawAboveLabels = function ()
+        {
+            var size       = properties.labelsAboveSize;
+            var font       = properties.textFont;
+            var units_pre  = properties.yaxisScaleUnitsPre;
+            var units_post = properties.yaxisScaleUnitsPost;
+            
+            var textConf = RGraph.getTextConf({
+                object: this,
+                prefix: 'labelsAbove'
+            });
+    
+            for (var set=0,len=this.coords.length; set<len; ++set) {
+                for (var point=0,len2=this.coords[set].length; point<len2; ++point) {
+                    
+                    var x_val = this.data[set][point][0];
+                    var y_val = this.data[set][point][1];
+                    
+                    if (!RGraph.isNull(y_val)) {
+                        
+                        // Use the top most value from a box plot
+                        if (RGraph.isArray(y_val)) {
+                            var max = 0;
+                            for (var i=0; i<y_val; ++i) {
+                                max = Math.max(max, y_val[i]);
+                            }
+                            
+                            y_val = max;
+                        }
+                        
+                        var x_pos = this.coords[set][point][0];
+                        var y_pos = this.coords[set][point][1];
+
+
+                        var xvalueFormatter = properties.labelsAboveFormatterX;
+                        var yvalueFormatter = properties.labelsAboveFormatterY;
+
+                        RGraph.text({
+                                    
+                      object: this,
+
+                        font:   textConf.font,
+                        size:   textConf.size,
+                        color:  textConf.color,
+                        bold:   textConf.bold,
+                        italic: textConf.italic,
+
+                            x:            x_pos + properties.labelsAboveOffsetx,
+                            y:            y_pos - 5 - size + properties.labelsAboveOffsety,
+                            
+                            text:         
+                                (typeof xvalueFormatter === 'function' ? xvalueFormatter(this, x_val) : x_val.toFixed(properties.labelsAboveDecimals)) +
+                                ', ' +
+                                (typeof yvalueFormatter === 'function' ? yvalueFormatter(this, y_val) : y_val.toFixed(properties.labelsAboveDecimals)),
+                            
+                            valign:       'bottom',
+                            halign:       'center',
+                            bounding:     true,
+                            boundingFill: 'rgba(255, 255, 255, 0.7)',
+                            boundingStroke: 'rgba(0,0,0,0.1)',
+                            tag:          'labels.above'
+                        });
+                    }
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // When you click on the chart, this method can return the Y 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.getYValue = function (arg)
+        {
+            if (arg.length == 2) {
+                var mouseX = arg[0];
+                var mouseY = arg[1];
+            } else {
+                var mouseCoords = RGraph.getMouseXY(arg);
+                var mouseX      = mouseCoords[0];
+                var mouseY      = mouseCoords[1];
+            }
+            
+            var obj = this;
+    
+            if (   mouseY < this.marginTop
+                || mouseY > (this.canvas.height - this.marginBottom)
+                //|| mouseX < this.marginLeft
+                //|| mouseX > (this.canvas.width - this.marginRight)
+               ) {
+                return null;
+            }
+            
+            if (properties.xaxisPosition == 'center') {
+                var value = (((this.grapharea / 2) - (mouseY - this.marginTop)) / this.grapharea) * (this.max - this.min)
+                value *= 2;
+                
+                
+                // Account for each side of the X axis
+                if (value >= 0) {
+                    value += this.min
+
+                    if (properties.yaxisScaleInvert) {
+                        value -= this.min;
+                        value = this.max - value;
+                    }
+                
+                } else {
+
+                    value -= this.min;
+                    if (properties.yaxisScaleInvert) {
+                        value += this.min;
+                        value = this.max + value;
+                        value *= -1;
+                    }
+                }
+
+            } else {
+
+                var value = ((this.grapharea - (mouseY - this.marginTop)) / this.grapharea) * (this.max - this.min)
+                value += this.min;
+                
+                if (properties.yaxisScaleInvert) {
+                    value -= this.min;
+                    value = this.max - value;
+                }
+            }
+    
+            return value;
+        };
+
+
+
+
+
+
+
+
+        //
+        // When you click on the chart, this method can return the X value at that point.
+        // 
+        // @param mixed  arg This can either be an event object or the X coordinate
+        // @param number     If specifying the X coord as the first arg then this should be the Y coord
+        //
+        this.getXValue = function (arg)
+        {
+            if (arg.length == 2) {
+                var mouseX = arg[0];
+                var mouseY = arg[1];
+            } else {
+                var mouseXY = RGraph.getMouseXY(arg);
+                var mouseX  = mouseXY[0];
+                var mouseY  = mouseXY[1];
+            }
+            var obj = this;
+            
+            if (//|| mouseY < this.marginTop
+                //|| mouseY > (this.canvas.height - this.marginBottom)
+                mouseX < this.marginLeft
+                || mouseX > (this.canvas.width - this.marginRight)
+               ) {
+                return null;
+            }
+    
+            var width = (this.canvas.width - this.marginLeft - this.marginRight);
+            var value = ((mouseX - this.marginLeft) / width) * (properties.xaxisScaleMax - properties.xaxisScaleMin)
+            value += properties.xaxisScaleMin;
+
+            return value;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Each object type has its own Highlight() function which highlights the appropriate shape
+        // 
+        // @param object shape The shape to highlight
+        //
+        this.highlight = function (shape)
+        {
+            if (typeof properties.highlightStyle === 'function') {
+                (properties.highlightStyle)(shape);
+            
+            // Inverted highlight style
+            } else if (properties.highlightStyle === 'invert') {
+            
+                var tickmarksSize = properties.tickmarksSize;
+
+                // Clip to the graph area
+                this.path(
+                    'sa b r % % % % cl',
+                    properties.marginLeft - tickmarksSize, properties.marginTop - tickmarksSize,
+                    this.canvas.width - properties.marginLeft - properties.marginRight + tickmarksSize + tickmarksSize,
+                    this.canvas.height - properties.marginTop - properties.marginBottom + tickmarksSize + tickmarksSize
+                );
+
+                this.path(
+                    'b m % % a % % 25 4.71 4.72 true l % % l % % l % % l % % l % % c f %',
+                    shape.x, properties.marginTop,
+                    shape.x, shape.y,
+                    shape.x, 0,
+                    this.canvas.width, 0,
+                    this.canvas.width, this.canvas.height,
+                    0, this.canvas.height,
+                    0, 0,
+                    properties.highlightFill
+                );
+                
+                // Draw a border around the circular cutout
+                this.path(
+                    'b a % % 25 0 6.29 false s % rs',
+                    shape.x, shape.y,
+                    properties.highlightStroke
+                );
+            } else {
+                // Boxplot highlight
+                if (shape.height) {
+                    RGraph.Highlight.rect(this, shape);
+        
+                // Point highlight
+                } else {
+                    RGraph.Highlight.point(this, shape);
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // The getObjectByXY() worker method. Don't call this call:
+        // 
+        // RGraph.ObjectRegistry.getObjectByXY(e)
+        // 
+        // @param object e The event object
+        //
+        this.getObjectByXY = function (e)
+        {
+            var mouseXY = RGraph.getMouseXY(e);
+    
+            if (
+                   mouseXY[0] > (this.marginLeft - 3)
+                && mouseXY[0] < (this.canvas.width - this.marginRight + 3)
+                && mouseXY[1] > (this.marginTop - 3)
+                && mouseXY[1] < ((this.canvas.height - this.marginBottom) + 3)
+                ) {
+    
+                return this;
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // This function can be used when the canvas is clicked on (or similar - depending on the event)
+        // to retrieve the relevant X coordinate for a particular value.
+        // 
+        // @param int value The value to get the X coordinate for
+        //
+        this.getXCoord = function (value)
+        {
+            if (typeof value != 'number' && typeof value != 'string') {
+                return null;
+            }
+            
+            // Allow for date strings to be passed
+            if (typeof value === 'string') {
+                value = RGraph.parseDate(value);
+            }
+
+            var xmin = properties.xaxisScaleMin;
+            var xmax = properties.xaxisScaleMax;
+            var x;
+    
+            if (value < xmin) return null;
+            if (value > xmax) return null;
+    
+            if (properties.yaxisPosition == 'right') {
+                x = ((value - xmin) / (xmax - xmin)) * (this.canvas.width - this.marginLeft - this.marginRight);
+                x = (this.canvas.width - this.marginRight - x);
+            } else {
+                x = ((value - xmin) / (xmax - xmin)) * (this.canvas.width - this.marginLeft - this.marginRight);
+                x = x + this.marginLeft;
+            }
+            
+            return x;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Returns the applicable Y COORDINATE when given a Y value
+        // 
+        // @param int value The value to use
+        // @return int The appropriate Y coordinate
+        //
+        this.getYCoord = function (value)
+        {
+            var outofbounds = arguments[1];
+
+            if (typeof value != 'number') {
+
+                return null;
+            }
+
+            var invert          = properties.yaxisScaleInvert;
+            var xaxispos        = properties.xaxisPosition;
+            var graphHeight     = this.canvas.height - this.marginTop - this.marginBottom;
+            var halfGraphHeight = graphHeight / 2;
+            var ymax            = this.max;
+            var ymin            = properties.yaxisScaleMin;
+            var coord           = 0;
+    
+            if (   (value > ymax && !outofbounds)
+                || (properties.xaxisPosition === 'bottom' && value < ymin && !outofbounds)
+                || (properties.xaxisPosition === 'center' && ((value > 0 && value < ymin) || (value < 0 && value > (-1 * ymin))))
+               ) {
+                return null;
+            }
+
+            //
+            // This calculates scale values if the X axis is in the center
+            //
+            if (xaxispos == 'center') {
+    
+                coord = ((Math.abs(value) - ymin) / (ymax - ymin)) * halfGraphHeight;
+    
+                if (invert) {
+                    coord = halfGraphHeight - coord;
+                }
+                
+                if (value < 0) {
+                    coord += this.marginTop;
+                    coord += halfGraphHeight;
+                } else {
+                    coord  = halfGraphHeight - coord;
+                    coord += this.marginTop;
+                }
+    
+            //
+            // And this calculates scale values when the X axis is at the bottom
+            //
+            } else {
+    
+                coord = ((value - ymin) / (ymax - ymin)) * graphHeight;
+
+                if (invert) {
+                    coord = graphHeight - coord;
+                }
+    
+                // Invert the coordinate because the Y scale starts at the top
+                coord = graphHeight - coord;
+
+                // And add on the top gutter
+                coord = this.marginTop + coord;
+            }
+    
+            return coord;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws a bubble chart
+        //
+        // @param dataset int The dataset index
+        //
+        this.drawBubble = function (dataset)
+        {
+            var data  = RGraph.isArray(properties.bubbleData) && RGraph.isArray(properties.bubbleData[dataset]) ? properties.bubbleData[dataset] : properties.bubbleData;
+            var min   = RGraph.isArray(properties.bubbleMin) ? properties.bubbleMin[dataset] : properties.bubbleMin;
+            var max   = RGraph.isArray(properties.bubbleMax) ? properties.bubbleMax[dataset] : properties.bubbleMax;
+            var width = RGraph.isArray(properties.bubbleWidth) ? properties.bubbleWidth[dataset] : properties.bubbleWidth;
+
+            // Initialise the coordinates array
+            this.coordsBubble[dataset] = [];
+
+            // Loop through all the points (first dataset)
+            for (var i=0; i<this.coords[dataset].length; ++i) {
+
+                data[i] = Math.max(data[i], min);
+                data[i] = Math.min(data[i], max);
+
+                var radius = (((data[i] - min) / (max - min) ) * width) / 2,
+                    color  = this.data[dataset][i][2] ? this.data[dataset][i][2] : properties.colorsDefault;
+
+
+
+
+
+
+
+
+
+
+
+
+                // Set a shadow for the bubbles if requested
+                if (this.properties.bubbleShadow) {
+                    RGraph.setShadow({
+                        object: this,
+                        prefix:'bubbleShadow'
+                    });
+                }
+
+                this.context.beginPath();
+                this.context.fillStyle = RGraph.radialGradient({
+                    object: this,
+                    x1:     this.coords[dataset][i][0] + (radius / 2.5),
+                    y1:     this.coords[dataset][i][1] - (radius / 2.5),
+                    r1:     0,
+                    x2:     this.coords[dataset][i][0] + (radius / 2.5),
+                    y2:     this.coords[dataset][i][1] - (radius / 2.5),
+                    r2:     radius,
+                    colors: [
+                        properties.colorsBubbleGraduated ? 'white' : color,
+                        color
+                    ]
+                });
+
+                // Draw the bubble
+                this.context.arc(
+                    this.coords[dataset][i][0],
+                    this.coords[dataset][i][1],
+                    radius,
+                    0,
+                    RGraph.TWOPI,
+                    false
+                );
+
+                if (this.properties.colorsBubbleStroke) {
+                    this.context.lineWidth = this.properties.bubbleLinewidth;
+                    this.context.strokeStyle = this.properties.colorsBubbleStroke;
+                    this.context.stroke();
+                }
+
+                this.context.fill();
+
+                // Clear the shadow
+                if (this.properties.bubbleShadow) {
+                    RGraph.noShadow(this);
+                }
+
+                this.coordsBubble[dataset][i] = [
+                    this.coords[dataset][i][0],
+                    this.coords[dataset][i][1],
+                    radius,
+                    this.context.fillStyle
+                ];
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // This allows for easy specification of gradients
+        //
+        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.data                 = RGraph.arrayClone(this.data);
+                this.original_colors.backgroundVbars      = RGraph.arrayClone(properties.backgroundVbars);
+                this.original_colors.backgroundHbars      = RGraph.arrayClone(properties.backgroundHbars);
+                this.original_colors.lineColors           = RGraph.arrayClone(properties.lineColors);
+                this.original_colors.colorsDefault        = RGraph.arrayClone(properties.colorsDefault);
+                this.original_colors.crosshairsColor      = RGraph.arrayClone(properties.crosshairsColor);
+                this.original_colors.highlightStroke      = RGraph.arrayClone(properties.highlightStroke);
+                this.original_colors.highlightFill        = RGraph.arrayClone(properties.highlightFill);
+                this.original_colors.backgroundBarsColor1 = RGraph.arrayClone(properties.backgroundBarsColor1);
+                this.original_colors.backgroundBarsColor2 = RGraph.arrayClone(properties.backgroundBarsColor2);
+                this.original_colors.backgroundGridColor  = RGraph.arrayClone(properties.backgroundGridColor);
+                this.original_colors.backgroundColor      = RGraph.arrayClone(properties.backgroundColor);
+                this.original_colors.axesColor            = RGraph.arrayClone(properties.axesColor);
+                this.original_colors.marimekkoColors      = RGraph.arrayClone(properties.marimekkoColors);
+                this.original_colors.marimekkoColorsStroke= RGraph.arrayClone(properties.marimekkoColorsStroke);
+                this.original_colors.marimekkoLabelsIngraphBackgroundStroke= RGraph.arrayClone(properties.marimekkoLabelsIngraphBackgroundStroke);
+                this.original_colors.marimekkoLabelsIngraphBackgroundFill  = RGraph.arrayClone(properties.marimekkoLabelsIngraphBackgroundFill);
+            }
+
+
+
+
+
+            // Colors
+            var data = this.data;
+            if (data) {
+                for (var dataset=0; dataset<data.length; ++dataset) {
+                    for (var i=0; i<this.data[dataset].length; ++i) {
+
+                        // Boxplots
+                        if (this.data[dataset][i] && typeof this.data[dataset][i][1] == 'object' && this.data[dataset][i][1]) {
+
+                            if (typeof this.data[dataset][i][1][5] == 'string') this.data[dataset][i][1][5] = this.parseSingleColorForGradient(this.data[dataset][i][1][5]);
+                            if (typeof this.data[dataset][i][1][6] == 'string') this.data[dataset][i][1][6] = this.parseSingleColorForGradient(this.data[dataset][i][1][6]);
+                        }
+                        
+                        if (!RGraph.isNull(this.data[dataset][i])) {
+                            this.data[dataset][i][2] = this.parseSingleColorForGradient(this.data[dataset][i][2]);
+                        }
+                    }
+                }
+            }
+            
+            // Parse HBars
+            var hbars = properties.backgroundHbars;
+            if (hbars) {
+                for (i=0; i<hbars.length; ++i) {
+                    hbars[i][2] = this.parseSingleColorForGradient(hbars[i][2]);
+                }
+            }
+            
+            // Parse HBars
+            var vbars = properties.backgroundVbars;
+            if (vbars) {
+                for (i=0; i<vbars.length; ++i) {
+                    vbars[i][2] = this.parseSingleColorForGradient(vbars[i][2]);
+                }
+            }
+            
+            // Parse line colors
+            var colors = properties.lineColors;
+            if (colors) {
+                for (i=0; i<colors.length; ++i) {
+                    colors[i] = this.parseSingleColorForGradient(colors[i]);
+                }
+            }
+            
+            // Parse colors for marimekko charts
+            var colors = properties.marimekkoColors;
+            if (colors) {
+                for (i=0; i<colors.length; ++i) {
+                    colors[i] = this.parseSingleColorForGradient(colors[i]);
+                }
+            }
+    
+             properties.colorsDefault         = this.parseSingleColorForGradient(properties.colorsDefault);
+             properties.crosshairsColor       = this.parseSingleColorForGradient(properties.crosshairsColor);
+             properties.highlightStroke       = this.parseSingleColorForGradient(properties.highlightStroke);
+             properties.highlightFill         = this.parseSingleColorForGradient(properties.highlightFill);
+             properties.backgroundBarsColor1  = this.parseSingleColorForGradient(properties.backgroundBarsColor1);
+             properties.backgroundBarsColor2  = this.parseSingleColorForGradient(properties.backgroundBarsColor2);
+             properties.backgroundGridColor   = this.parseSingleColorForGradient(properties.backgroundGridColor);
+             properties.backgroundColor       = this.parseSingleColorForGradient(properties.backgroundColor);
+             properties.axesColor             = this.parseSingleColorForGradient(properties.axesColor);
+             properties.marimekkoColorsStroke = this.parseSingleColorForGradient(properties.marimekkoColorsStroke);
+             properties.marimekkoLabelsIngraphBackgroundStroke = this.parseSingleColorForGradient(properties.marimekkoLabelsIngraphBackgroundStroke);
+             properties.marimekkoLabelsIngraphBackgroundFill   = this.parseSingleColorForGradient(properties.marimekkoLabelsIngraphBackgroundFill);
+        };
+
+
+
+
+
+
+
+
+        //
+        // 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 for a gradient
+        //
+        this.parseSingleColorForGradient = function (color)
+        {
+            if (!color || typeof color != 'string') {
+                return color;
+            }
+    
+            if (color.match(/^gradient\((.*)\)$/i)) {
+
+
+                // Allow for JSON gradients
+                if (color.match(/^gradient\(({.*})\)$/i)) {
+                    return RGraph.parseJSONGradient({object: this, def: RegExp.$1});
+                }
+
+                // Allow for JSON gradients
+                if (color.match(/^gradient\(({.*})\)$/i)) {
+                    return RGraph.parseJSONGradient({object: this, def: RegExp.$1});
+                }
+
+                var parts = RegExp.$1.split(':');
+    
+                // Create the gradient
+                var grad = this.context.createLinearGradient(0,this.canvas.height - properties.marginBottom, 0, properties.marginTop);
+    
+                var diff = 1 / (parts.length - 1);
+    
+                grad.addColorStop(0, RGraph.trim(parts[0]));
+    
+                for (var j=1; j<parts.length; ++j) {
+                    grad.addColorStop(j * diff, RGraph.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)
+        {
+            if (this.coords && this.coords[index] && this.coords[index].length) {
+                
+                var obj = this;
+                
+                this.coords[index].forEach(function (value, idx, arr)
+                {
+                    obj.context.beginPath();
+                    obj.context.fillStyle = properties.keyInteractiveHighlightChartFill;
+                    obj.context.arc(value[0], value[1], properties.tickmarksSize + 3, 0, RGraph.TWOPI, false);
+                    obj.context.fill();
+                });
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Using a function to add events makes it easier to facilitate method chaining
+        // 
+        // @param string   type The type of even to add
+        // @param function func 
+        //
+        this.on = function (type, func)
+        {
+            if (type.substr(0,2) !== 'on') {
+                type = 'on' + type;
+            }
+            
+            if (typeof this[type] !== 'function') {
+                this[type] = func;
+            } else {
+                RGraph.addCustomEventListener(this, type, func);
+            }
+    
+            return this;
+        };
+
+
+
+
+
+
+
+
+        //
+        // This function runs once only
+        // (put at the end of the file (before any effects))
+        //
+        this.firstDrawFunc = function ()
+        {
+        };
+
+
+
+
+
+
+
+
+        //
+        // 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;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws a trendline on the Scatter chart. This is also known
+        // as a "best-fit line"
+        //
+        //@param dataset The index of the dataset to use
+        //
+        this.drawTrendline = function  ()
+        {
+            var args = RGraph.getArgs(arguments, 'dataset');
+
+
+            var color     = properties.trendlineColor,
+                linewidth = properties.trendlineLinewidth,
+                margin    = properties.trendlineMargin;
+            
+
+            // Allow for trendlineColors as well
+            if (RGraph.isArray(properties.trendlineColors)) {
+                color = properties.trendlineColors;
+            }
+
+
+
+            // handle the options being arrays
+            if (typeof color === 'object' && color[args.dataset]) {
+                color = color[args.dataset];
+            } else if (typeof color === 'object') {
+                color = 'gray';
+            }
+            
+            if (typeof linewidth === 'object' && typeof linewidth[args.dataset] === 'number') {
+                linewidth = linewidth[args.dataset];
+            } else if (typeof linewidth === 'object') {
+                linewidth = 1;
+            }
+            
+            if (typeof margin === 'object' && typeof margin[args.dataset] === 'number') {
+                margin = margin[args.dataset];
+            } else if (typeof margin === 'object'){
+                margin = 25;
+            }
+            
+
+            // Step 1: Calculate the mean values of the X coords and the Y coords
+            for (var i=0,totalX=0,totalY=0; i<this.data[args.dataset].length; ++i) {
+                totalX += this.data[args.dataset][i][0];
+                totalY += this.data[args.dataset][i][1];
+            }
+            
+            var averageX = totalX / this.data[args.dataset].length;
+            var averageY = totalY / this.data[args.dataset].length;
+
+            // Step 2: Calculate the slope of the line
+            
+            // a: The X/Y values minus the average X/Y value
+            for (var i=0,xCoordMinusAverageX=[],yCoordMinusAverageY=[],valuesMultiplied=[],xCoordMinusAverageSquared=[]; i<this.data[args.dataset].length; ++i) {
+                xCoordMinusAverageX[i] = this.data[args.dataset][i][0] - averageX;
+                yCoordMinusAverageY[i] = this.data[args.dataset][i][1] - averageY;
+                
+                // b. Multiply the averages
+                valuesMultiplied[i] = xCoordMinusAverageX[i] * yCoordMinusAverageY[i];
+                xCoordMinusAverageSquared[i] = xCoordMinusAverageX[i] * xCoordMinusAverageX[i];
+            }
+                
+            var sumOfValuesMultiplied = RGraph.arraySum(valuesMultiplied);
+            var sumOfXCoordMinusAverageSquared = RGraph.arraySum(xCoordMinusAverageSquared);
+
+            // Calculate m (???)
+            var m = sumOfValuesMultiplied / sumOfXCoordMinusAverageSquared;
+            var b = averageY - (m * averageX);
+
+            // y = mx + b
+            
+            coords =  [
+                [properties.xaxisScaleMin, m * properties.xaxisScaleMin + b],
+                [properties.xaxisScaleMax, m * properties.xaxisScaleMax + b]
+            ];
+
+            //
+            // Draw the line
+            //
+            
+            // Set dotted, dash or a custom dash array
+            if (properties.trendlineDashed) {
+                this.context.setLineDash([4,4]);
+            }
+            
+            if (properties.trendlineDotted) {
+                this.context.setLineDash([1,4]);
+            }
+            
+            if (!RGraph.isNull(properties.trendlineDashArray) && typeof properties.trendlineDashArray === 'object') {
+                this.context.setLineDash(properties.trendlineDashArray);
+            }
+
+
+            // Clip the canvas again so that the line doesn't look overly long
+            // (use the minimum an maximum points for this)
+            for (var i=0,xValues=[],yValues=[]; i<this.data[args.dataset].length; ++i) {
+                if (typeof this.data[args.dataset][i][0] === 'number') {
+                    xValues.push(this.data[args.dataset][i][0]);
+                }
+            
+                if (typeof this.data[args.dataset][i][1] === 'number') {
+                    yValues.push(this.data[args.dataset][i][1]);
+                }
+            }
+
+            // These are the minimum and maximum X/Y values for this dataset
+            var x1 = RGraph.arrayMin({array: xValues});
+            var y1 = RGraph.arrayMin({array: yValues});
+            var x2 = RGraph.arrayMax({array: xValues});
+            var y2 = RGraph.arrayMax({array: yValues});
+            
+            
+            // Convert the X/Y values into coordinates on the canvas
+            x1 = this.getXCoord(x1);
+            y1 = this.getYCoord(y1, properties.outofbounds);
+            x2 = this.getXCoord(x2);
+            y2 = this.getYCoord(y2, properties.outofbounds);
+
+
+            // Draw the line
+            this.path(
+                ' lw % sa b r % % % % cl b r % % % % cl b m % % l % % s % rs',
+                linewidth,
+                    
+                // These are the rect arguments
+                properties.marginLeft + margin,
+                properties.marginTop + margin,
+                this.canvas.width - properties.marginLeft - properties.marginRight - margin - margin,
+                this.canvas.height - properties.marginTop - properties.marginBottom - margin - margin,
+                    
+                // These are the second rect arguments
+                properties.trendlineClipping === false ? 0 : x1 - 25,
+                properties.trendlineClipping === false ? 0 : y2 - 25,
+                properties.trendlineClipping === false ? this.canvas.width  : x2 - x1 + 25 + 25,
+                properties.trendlineClipping === false ? this.canvas.height : y1 - y2 + 25 + 25,
+                
+                // moveTo
+                this.getXCoord(coords[0][0]), this.getYCoord(coords[0][1], true),
+                
+                // lineTo
+                this.getXCoord(coords[1][0]), this.getYCoord(coords[1][1], true),
+                
+                // stroke color
+                color
+            );
+
+            // Reset the line dash array
+            this.context.setLineDash([5,0]);
+        };
+
+
+
+
+
+
+
+        //
+        // Trace2
+        // 
+        // This is a new version of the Trace effect which no longer requires jQuery and is more compatible
+        // with other effects (eg Expand). This new effect is considerably simpler and less code.
+        // 
+        // @param object     Options for the effect. Currently only "frames" is available.
+        // @param int        A function that is called when the ffect is complete
+        //
+        this.trace = function ()
+        {
+            // Cancel any stop request if one is pending
+            this.cancelStopAnimation();
+
+            var obj       = this,
+                callback  = arguments[2],
+                opt       = arguments[0] || {},
+                frames    = opt.frames || 30,
+                frame     = 0,
+                callback  = arguments[1] || function () {}
+
+            this.set('animationTrace', true);
+            this.set('animationTraceClip', 0);
+    
+            function iterator ()
+            {
+                if (obj.stopAnimationRequested) {
+    
+                    // Reset the flag
+                    obj.stopAnimationRequested = false;
+    
+                    return;
+                }
+
+                RGraph.clear(obj.canvas);
+
+                RGraph.redrawCanvas(obj.canvas);
+
+                if (frame++ < frames) {
+                    obj.set('animationTraceClip', frame / frames);
+                    RGraph.Effects.updateCanvas(iterator);
+                } else {
+                    callback(obj);
+                }
+            }
+            
+            iterator();
+            
+            return this;
+        };
+
+
+
+
+
+
+
+
+        //
+        // The explode effect.
+        // 
+        // @param object     Options for the effect.
+        // @param int        A function that is called when the ffect is complete
+        //
+        this.explode = function ()
+        {
+            // Cancel any stop request if one is pending
+            this.cancelStopAnimation();
+
+            var obj       = this,
+                callback  = arguments[2],
+                opt       = arguments[0] || {},
+                frames    = opt.frames || 15,
+                frame     = 0,
+                callback  = arguments[1] || function () {},
+                originX   = this.properties.xaxisScaleMax / 2,
+                originY   = 0,
+                step      = 1 / frames,
+                original  = RGraph.arrayClone(this.unmodified_data);
+
+            // First draw the chart, set the yaxisScaleMax to the maximum value that's calculated
+            // and then animate
+            this.draw();
+            this.set('yaxisScaleMax', this.scale2.max);
+            
+            // Determine the X origin - it defaults to the center
+            if (opt.originx === 'left') {
+                originX = 0;
+            } else if (opt.originx === 'right') {
+                originX = this.properties.xaxisScaleMax;
+            } else {
+                originX = this.properties.xaxisScaleMax / 2;
+            }
+            
+            // Determine the Y origin - it defaults to the bottom
+            if (opt.originy === 'center') {
+                originY = this.scale2.max / 2;
+            } else if (opt.originy === 'top') {
+                originY = this.scale2.max;
+            } else {
+                originY = 0;
+            }
+
+
+
+            function iterator ()
+            {
+                if (obj.stopAnimationRequested) {
+    
+                    // Reset the flag
+                    obj.stopAnimationRequested = false;
+    
+                    return;
+                }
+                RGraph.clear(obj.canvas);
+
+                for (var i=0; i<obj.data.length; ++i) { // Loop through each dataset
+                    for (var j=0; j<obj.data[i].length; ++j) { // Loop through each point
+                        obj.data[i][j][0] = 
+                            originX + (
+                                    (original[i][j][0] - originX)
+                                * step
+                                * frame
+                            );
+                        obj.data[i][j][1] = originY + ((original[i][j][1] - originY) * step * frame);
+                    }
+                }
+
+                RGraph.redrawCanvas(obj.canvas);
+                if (frame++ < frames) {
+                    RGraph.Effects.updateCanvas(iterator);
+                } else {
+                    RGraph.redrawCanvas(obj.canvas);
+                    callback(obj);
+                }
+            }
+
+            iterator();
+            
+            return this;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Couple of functions that allow you to control the
+        // animation effect
+        //
+        this.stopAnimation = function ()
+        {
+            // Reset the clip area
+            this.set('animationTraceClip', 1);
+            
+            // Reset the data
+            this.data = RGraph.arrayClone(this.unmodified_data);
+
+            this.stopAnimationRequested = true;
+        };
+
+        this.cancelStopAnimation = function ()
+        {
+            this.stopAnimationRequested = false;
+        };
+
+
+
+
+
+
+
+
+        //
+        // This helps the Gantt reset colors when the reset function is called.
+        // It handles going through the data and resetting the colors.
+        //
+        this.resetColorsToOriginalValues = function ()
+        {
+            //
+            // Copy the original colors over for single-event-per-line data
+            //
+            for (var i=0,len=this.original_colors.data.length; i<len; ++i) {
+                for (var j=0,len2=this.original_colors.data[i].length; j<len2;++j) {
+
+                    // The color for the point
+                    this.data[i][j][2] = RGraph.arrayClone(this.original_colors.data[i][j][2]);
+                    
+                    // Handle boxplots
+                    if (typeof this.data[i][j][1] === 'object') {
+                        this.data[i][j][1][5] = RGraph.arrayClone(this.original_colors.data[i][j][1][5]);
+                        this.data[i][j][1][6] = RGraph.arrayClone(this.original_colors.data[i][j][1][6]);
+                    }
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        // If only one tooltip has been given populate each data-piece with it
+        this.populateTooltips = function ()
+        {
+            for (var i=0; i<this.data.length; ++i) { // for each dataset...
+                for (var j=0; j<this.data[i].length; ++j) { // For each point in the dataset
+                    this.data[i][j][3] = properties.tooltips;
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // A worker function that handles Bar chart specific tooltip substitutions
+        //
+        this.tooltipSubstitutions = function (opt)
+        {
+            // Create the data for marimekko charts
+            if (this.isMarimekko) {
+                var marimekko_data = [];
+                for (var i=0; i<this.properties.marimekkoData.length; ++i) {
+                    marimekko_data[i] = [];
+                    for (var j=0; j<this.properties.marimekkoData[i][1].length; ++j) {
+                        marimekko_data[i].push(this.properties.marimekkoData[i][1][j]);
+                    }
+                }
+            }
+
+
+            // Marimekko charts
+            if (this.isMarimekko) {
+                var indexes = RGraph.sequentialIndexToGrouped(
+                    opt.index,
+                    marimekko_data
+                );
+                
+                var  value = marimekko_data[indexes[0]][indexes[1]];
+                var values = [marimekko_data[indexes[0]][indexes[1]]];
+            
+            // Regular Scatter charts
+            } else {
+                var indexes = RGraph.sequentialIndexToGrouped(
+                    opt.index,
+                    this.data
+                );
+                
+                var value  = this.data[indexes[0]][indexes[1]][1];
+                var values = [this.data[indexes[0]][indexes[1]][1]];
+            }
+
+
+
+            return {
+                  index: indexes[1],
+                dataset: indexes[0],
+        sequentialIndex: opt.index,
+                  value: value,
+                 values: values
+            };
+        };
+
+
+
+
+
+
+
+
+        //
+        // A worker function that returns the correct color/label/value
+        //
+        // @param object specific The indexes that are applicable
+        // @param number index    The appropriate index
+        //
+        this.tooltipsFormattedCustom = function (specific, index)
+        {
+            // The tooltipsFormattedKeyColors property has been specified so use that if
+            // there's a relevant color
+            if (   !RGraph.isNull(properties.tooltipsFormattedKeyColors)
+                && typeof properties.tooltipsFormattedKeyColors === 'object'
+                && typeof properties.tooltipsFormattedKeyColors[specific.dataset] === 'string'
+               ) {
+                var color = properties.tooltipsFormattedKeyColors[specific.dataset];
+            }
+
+            // If a color is defined for this point then use it
+            if (!this.isMarimekko && this.data[specific.dataset][specific.index][2]) {
+                color = this.data[specific.dataset][specific.index][2];
+            }
+
+
+            var label = properties.tooltipsFormattedKeyLabels[specific.index]
+                           ? properties.tooltipsFormattedKeyLabels[specific.index]
+                           : '';
+
+            return {
+                label: label,
+                color: color
+            };
+        };
+
+
+
+
+
+
+
+
+        //
+        // This allows for static tooltip positioning
+        //
+        this.positionTooltipStatic = function (args)
+        {
+            // Make the data into a bog standard 2D array
+            if (this.isMarimekko) {
+                var marimekko_data = [];
+                for (var i=0; i<this.properties.marimekkoData.length; ++i) {
+                    marimekko_data[i] = [];
+                    for (var j=0; j<this.properties.marimekkoData[i][1].length; ++j) {
+                        marimekko_data[i].push(this.properties.marimekkoData[i][1][j]);
+                    }
+                }
+            }
+
+
+
+
+            var obj      = args.object,
+                e        = args.event,
+                tooltip  = args.tooltip,
+                index    = args.index,
+                canvasXY = RGraph.getCanvasXY(obj.canvas),
+                indexes  = RGraph.sequentialIndexToGrouped(args.index, this.isMarimekko ? marimekko_data : this.data),
+                coords   = this.isMarimekko ? this.coordsMarimekko[indexes[0]][indexes[1]] : this.coords[indexes[0]][indexes[1]];
+
+
+
+            // Position the tooltip in the X direction
+            args.tooltip.style.left = (
+                canvasXY[0]                      // The X coordinate of the canvas
+                + (this.isMarimekko ? (coords[0] + (coords[2] / 2) ) : coords[0]) // The X coordinate of the point on the chart
+                - (tooltip.offsetWidth / 2)      // Subtract half of the tooltip width
+                + obj.properties.tooltipsOffsetx // Add any user defined offset
+            ) + 'px';
+
+            args.tooltip.style.top  = (
+                  canvasXY[1]                    // The Y coordinate of the canvas
+                + coords[1]                      // The Y coordinate of the bar on the chart
+                - tooltip.offsetHeight           // The height of the tooltip
+                - 15                             // An arbitrary amount
+                + obj.properties.tooltipsOffsety // Add any user defined offset
+            ) + 'px';
+        };
+
+
+
+
+
+
+
+
+        //
+        // This returns the relevant value for the formatted key
+        // macro %{value}. THIS VALUE SHOULD NOT BE FORMATTED.
+        //
+        // @param number index The index in the dataset to get
+        //                     the value for
+        //
+        this.getKeyValue = function (index)
+        {
+            if (   RGraph.isArray(this.properties.keyFormattedValueSpecific)
+                && RGraph.isNumber(this.properties.keyFormattedValueSpecific[index])) {
+
+                return this.properties.keyFormattedValueSpecific[index];
+            
+            
+            
+            
+            } else {
+                var totalX = 0;
+                var totalY = 0;
+
+                if (this.data[index]) {
+                    for (var i=0; i<this.data[index].length; ++i) {
+                        totalX += this.data[index][i][0];
+                        totalY += this.data[index][i][1];
+                    }
+                }
+                
+                return [totalX, totalY];
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Returns how many data-points there should be when a string
+        // based key property has been specified. For example, this:
+        //
+        // key: '%{property:_labels[%{index}]} %{value_formatted}'
+        //
+        // ...depending on how many bits of data ther is might get
+        // turned into this:
+        //
+        // key: [
+        //     '%{property:_labels[%{index}]} %{value_formatted}',
+        //     '%{property:_labels[%{index}]} %{value_formatted}',
+        //     '%{property:_labels[%{index}]} %{value_formatted}',
+        //     '%{property:_labels[%{index}]} %{value_formatted}',
+        //     '%{property:_labels[%{index}]} %{value_formatted}',
+        // ]
+        //
+        // ... ie in that case there would be 4 data-points so the
+        // template is repeated 4 times.
+        //
+        this.getKeyNumDatapoints = function ()
+        {
+            return this.data[0].length;
+        };
+
+
+
+
+
+
+
+
+        //
+        // The lasso fature allows you to draw around points.
+        // The callback is passed an array of datapoints and
+        // indexes (NOT values!) which you can use to get the
+        // points from the scatter chart object.
+        //
+        this.installLasso = function ()
+        {            
+            // Set this so that the event listeners can
+            // access the object
+            var obj = this;
+            
+
+
+            if (this.properties.lasso) {
+            
+                var localData_key = 'rgraph-scatter-chart-' + RGraph.md5(location.href + obj.id) + '-lasso-data';
+
+                //
+                // So the default object isn't repeated
+                //
+                obj.lassoGetDefaultObject = function ()
+                {
+                    return {state: {
+                        coords:    [],
+                        mousedown: false
+                    }};
+                };
+
+
+
+
+
+
+                // 
+                // Save the lasso data to localstorage so
+                // that it persists acoss refreshes
+                //
+                obj.lassoSaveData = function (data)
+                {
+                    //
+                    // Save the state to localStorage by
+                    // default
+                    //
+                    if (obj.properties.lassoPersistLocal) {
+                        var str = JSON.stringify(data);
+                        window.localStorage[localData_key] = str;
+                    }
+                    
+                    // Call the event if it's defined
+                    if (RGraph.isFunction(obj.properties.lassoPersistSave)) {
+                        obj.properties.lassoPersistSave(data);
+                    }
+                };
+
+                // 
+                // Load the lasso data from localstorage
+                //
+                obj.lassoLoadData = function ()
+                {
+                    // Load the data from localData
+                    if (obj.properties.lassoPersistLocal) {
+                        var str  = window.localStorage[localData_key];
+                    }
+                    
+                    var data = str ? JSON.parse(str) : obj.lassoGetDefaultObject().state;
+
+                    // Call the event if it's defined
+                    if (RGraph.isFunction(obj.properties.lassoPersistLoad)) {
+                        data = obj.properties.lassoPersistLoad();
+                    }
+
+                    return data;
+                };
+
+                // 
+                // Reset the localStorageData
+                //
+                obj.lassoResetData = function ()
+                {
+                    window.localStorage[localData_key] = obj.lassoGetDefaultObject();
+                };
+
+
+
+
+
+
+
+
+                //
+                // Initialise the lasso state
+                //
+                RGraph.runOnce('scatter-chart-lasso-state-object-initialisation', function ()
+                {
+                    //
+                    // Load the persistence data from the
+                    // localData array. Create an
+                    // obj.lassoLoadData() function.
+                    if (obj.properties.lassoPersist) {
+                        obj.lasso = {state: obj.lassoLoadData()};
+
+                    } else {
+                        // This is repeated in the doubleclick/clear function below
+                        obj.lasso = obj.lassoGetDefaultObject();
+                        
+                    }
+                });
+
+
+
+
+
+
+
+
+                //
+                // A function that draws the highlight
+                //
+                this.drawLassoRects = function ()
+                {
+                    if (!obj.lasso || !obj.lasso.state) {
+                        return;
+                    }
+
+                    //
+                    // Loop through the coords
+                    //
+
+                    for (let i=0; i<obj.lasso.state.coords.length; ++i) {
+
+                        if (obj.lasso.state.coords[i]) {
+                            //
+                            // Start the path
+                            //
+                            obj.path('b ss % fs % lw % lc square',
+                                obj.properties.lassoStroke,
+                                obj.properties.lassoFill,
+                                obj.properties.lassoLinewidth
+                            );
+    
+                            for (let j=0; j<obj.lasso.state.coords[i].length; ++j) {
+    
+                                obj.context.rect(
+                                    obj.lasso.state.coords[i][0],
+                                    obj.lasso.state.coords[i][1],
+                                    obj.lasso.state.coords[i][2],
+                                    obj.lasso.state.coords[i][3]
+                                );
+                            }
+    
+                            //
+                            // Finish the and fill/stroke it
+                            //
+                            obj.context.closePath();                    
+                            obj.context.fill();
+                            obj.context.stroke();
+                        }
+                    }
+                };
+
+
+
+
+
+
+
+
+                //
+                // Highlightpoints that have been selected
+                // by the lasso
+                //
+                obj.drawLassoHighlightPoints = function (x, y = null)
+                {
+                    // An array of points datasets/indexes has been given
+                    if (RGraph.isArray(x)) {
+                
+                        for (let i=0; i<x.length; ++i) {
+                            obj.path(
+                                'b lw % a % % % 0 6.29 false s % f %',
+                                obj.properties.lassoHighlightLinewidth,
+                                obj.coords[x[i].dataset][x[i].index][0],
+                                obj.coords[x[i].dataset][x[i].index][1],
+                                obj.properties.tickmarksSize / 2 + 2,
+                                obj.properties.lassoHighlightStroke,
+                                obj.properties.lassoHighlightFill
+                            );
+                        }
+                
+                    // An x/y coordinates combo has been given
+                    } else {
+                
+                        obj.path(
+                            'b lw % a % % % 0 6.29 false s % f %',
+                            obj.properties.lassoHighlightLinewidth,
+                            x,
+                            y,
+                            obj.properties.tickmarksSize / 2 + 2,
+                            obj.properties.lassoHighlightStroke,
+                            obj.properties.lassoHighlightFill
+                        );
+                    }
+                };
+
+
+
+
+
+
+
+
+                //
+                // Clear the lasso state
+                //
+                this.clearLassoState = function ()
+                {
+                    if (confirm('Are you sure that you want to clear ALL of the highlight rectangles?')) {
+                        
+                        // This is repeated above
+                        obj.lasso = obj.lassoGetDefaultObject();
+
+                        //
+                        // Save the reset state to localData
+                        // if persistence is enabled
+                        //
+                        if (obj.properties.lassoPersist) {
+                            obj.lassoSaveData(obj.lasso.state);
+                        }
+
+                        RGraph.redrawCanvas(obj.canvas);
+                        
+                        // Call the user defined function if necessary
+                        if (RGraph.isFunction(obj.properties.lassoClearCallback)) {
+                            obj.properties.lassoClearCallback(obj.lasso.state);
+                        }
+                    }
+                };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                //
+                // This is the lasso mousedown event listener
+                //
+                this.lassoMousedownEventListener = function (e)
+                {
+                    if (e.button === 2) {
+                        return;
+                    }
+
+                    var [mouseX, mouseY] = RGraph.getMouseXY(e);
+
+                    // Reset the state
+                    if (!obj.lasso || !obj.lasso.state) {
+                        obj.lasso = obj.lassoGetDefaultObject();
+                    }
+                    obj.lasso.state.mousedown       = true;
+                    obj.lasso.state.coordsLastIndex = obj.lasso.state.coords.length;
+
+                    // Create a new lasso coords array
+                    obj.lasso.state.originX = mouseX;
+                    obj.lasso.state.originY = mouseY;
+                };
+
+
+
+
+
+
+
+
+                //
+                // This is the lasso mousemove event listener
+                //
+                obj.lassoMousemoveEventListener = function (e)
+                {
+                    var [mouseX, mouseY] = RGraph.getMouseXY(e);
+
+                    if (   obj.lasso
+                        && obj.lasso.state
+                        && obj.lasso.state.mousedown
+                       ) {
+
+                        RGraph.redrawCanvas(obj.canvas);
+
+
+                        // Store the coordinates of the
+                        // rectngle such that the X/Y
+                        // coordinates are always the top
+                        // left corner
+                        obj.lasso.state.coords[obj.lasso.state.coordsLastIndex] = [
+                            mouseX > obj.lasso.state.originX ? obj.lasso.state.originX : mouseX,
+                            mouseY > obj.lasso.state.originY ? obj.lasso.state.originY : mouseY,
+                            Math.abs(mouseX - obj.lasso.state.originX),
+                            Math.abs(mouseY - obj.lasso.state.originY)
+                        ];
+
+                        // Set the strokestyle and the fillstyle
+                        obj.path('b ss % fs % lw %',
+                            obj.properties.lassoStroke,
+                            obj.properties.lassoFill,
+                            obj.properties.lassoLinewidth
+                        );
+
+                        // Highlight the already-selected points
+                        obj.drawLassoRects();
+                        obj.drawLassoHighlightPoints(obj.lasso.state.points);
+                    }
+                };
+
+
+
+
+
+
+
+
+                //
+                // This is the lasso mouseup event listener - where
+                // the magic happens!
+                //
+                this.lassoWindowMouseupEventListener = function (e)
+                {
+                    if (obj.lasso && obj.lasso.state && obj.lasso.state.mousedown) {
+
+                        obj.lasso.state.mousedown = false;
+
+                        // Start a new path for the
+                        // rectangles that will be used to
+                        // test the points
+                        obj.path('b');
+
+                        for (let i=0; i<obj.lasso.state.coords.length; ++i) {
+                            if (RGraph.isArray(obj.lasso.state.coords[i])) {
+                                obj.path(
+                                    'r % % % % f % s %',
+                                    obj.lasso.state.coords[i][0],
+                                    obj.lasso.state.coords[i][1],
+                                    obj.lasso.state.coords[i][2],
+                                    obj.lasso.state.coords[i][3],
+                                    'transparent',
+                                    'transparent'
+                                );
+                            }
+                        }
+                        
+                        // Reset the points array to stop it growing
+                        // uncontrollably
+                        obj.lasso.state.points = [];
+                        
+                        // Determine all of the relevant points
+                        for (let i=0; i<obj.coords.length; ++i) {
+                            for (let j=0; j<obj.coords[i].length; ++j) {
+                            
+
+                                var [valueX, valueY] = obj.data[i][j];
+                                var coordX = obj.getXCoord(valueX);
+                                var coordY = obj.getYCoord(valueY);
+
+                                if (obj.context.isPointInPath(coordX, coordY)) {
+                                    obj.lasso.state.points = obj.lasso.state.points || [];
+                                    obj.lasso.state.points.push({
+                                        dataset: i,
+                                        index: j
+                                    });
+                                }
+                            }
+                        }
+
+                        // Now highlight the selected points
+                        if (obj.lasso.state.points) {
+
+                            for (let i=0; i<obj.lasso.state.points.length; ++i) {
+                                
+                                var dataset = obj.lasso.state.points[i].dataset;
+                                var index   = obj.lasso.state.points[i].index;
+
+                                obj.drawLassoHighlightPoints(
+                                    obj.coords[dataset][index][0],
+                                    obj.coords[dataset][index][1]
+                                );
+                            }
+                        }
+
+
+                        //
+                        // Save the highlight data to
+                        // localStorage
+                        //
+                        if (obj.properties.lassoPersist) {
+                            obj.lassoSaveData(obj.lasso.state);
+                        }
+
+
+
+
+
+                        // Call the callback function
+                        if (RGraph.isFunction(obj.properties.lassoCallback)) {
+                            obj.properties.lassoCallback(obj.lasso.state);
+                        }
+                    }
+                };
+
+
+
+
+
+
+
+
+                //
+                // Allow people to clear the lasso state using
+                // a double-click
+                //
+                this.lassoDblclickEventListener = function (e)
+                {
+                    // Go through all of the rects to see if one
+                    // has been clicked and if so - remove it.
+                    if (obj.lasso.state.coords && obj.lasso.state.coords.length) {
+                        
+                        var [mouseX, mouseY] = RGraph.getMouseXY(e);
+                    
+                        for (let i=(obj.lasso.state.coords.length - 1); i>=0; --i) {
+                            
+                            if (   RGraph.isArray(obj.lasso.state.coords)
+                                && obj.lasso.state.coords.length
+                                && obj.lasso.state.coords[i]
+                                && mouseX >= obj.lasso.state.coords[i][0]
+                                && mouseX <= (obj.lasso.state.coords[i][0] + obj.lasso.state.coords[i][2])
+                                && mouseY >= obj.lasso.state.coords[i][1]
+                                && mouseY <= (obj.lasso.state.coords[i][1] + obj.lasso.state.coords[i][3])
+                               ) {
+                                if (confirm('Are you sure that you want to remove this highlight rectangle?')) {
+                                    obj.lasso.state.coords[i] = null;
+    
+                                    // Call the window mouseup
+                                    // event listener to
+                                    // recalulate the points which
+                                    // should be highlighted
+                                    obj.lasso.state.mousedown = true;
+                                    obj.lassoWindowMouseupEventListener(e);
+    
+                                    //RGraph.redrawCanvas(obj.canvas);
+                                    RGraph.redraw();
+                                }
+                                return;
+                            }
+                        }
+                    }
+
+
+
+                    obj.clearLassoState();
+                };
+
+
+
+
+
+
+
+
+                // Install the above event listeners
+                RGraph.runOnce('rgraph-install-scatter-chart-lasso-event-listeners', function ()
+                {
+                    obj.canvas.addEventListener('mousedown',  obj.lassoMousedownEventListener,     false);
+                    obj.canvas.addEventListener('mousemove',  obj.lassoMousemoveEventListener,     false);
+                    obj.canvas.addEventListener('dblclick',   obj.lassoDblclickEventListener,      false);
+                    window.addEventListener('mouseup',        obj.lassoWindowMouseupEventListener, false);
+                });
+                
+                // If the mouse button isn't pressed then redraw the
+                // rectangles and point highlights
+                if (
+                       this.lasso
+                    && this.lasso.state
+                    && !this.lasso.state.mousedown
+                   ) {
+                    
+                    this.drawLassoRects();
+                    this.drawLassoHighlightPoints(this.lasso.state.points);
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Draws a Marimekko chart
+        //
+        this.drawMarimekko = function ()
+        {
+            var data = RGraph.arrayClone(this.properties.marimekkoData);
+
+            // Calculate the total of all the X values
+            for (var i=0,totalX=0; i<data.length; ++i) {
+                totalX += data[i][0];
+            }
+
+
+            var graphWidth  = this.canvas.width - this.properties.marginLeft - this.properties.marginRight;
+            var graphHeight = this.canvas.height - this.properties.marginTop - this.properties.marginBottom;
+            var x           = this.properties.marginLeft;
+            var coords      = [];
+
+
+
+
+
+
+
+
+            ////////////////////////////////
+            // Draw the data on the chart //
+            ////////////////////////////////
+            for (var i=0,seq=0; i<data.length; ++i) {
+
+                var width     = (data[i][0] / totalX) * graphWidth;
+                var y         = this.canvas.height - this.properties.marginBottom;
+                    coords[i] = [];
+             
+                // Calulate the total Y value
+                for (var j=0,totalY=0; j<data[i][1].length; ++j) {
+                    totalY += data[i][1][j];
+                }
+
+                // Loop through the vertical values
+                for (var j=0; j<data[i][1].length; ++j) {
+
+                    var value  = data[i][1][j];
+                    var height = (value / totalY) * graphHeight;
+                    var pc     = (value / RGraph.arraySum(data[i][1])) * 100;
+
+                    this.path(
+                        'b r % % % % lw % s % f %',
+                        x, y - height, width, height,
+                        this.properties.marimekkoLinewidth,
+                        this.properties.marimekkoLinewidth ? this.properties.marimekkoColorsStroke : 'transparent',
+                        this.properties.marimekkoColorsSequential ? this.properties.marimekkoColors[seq] : this.properties.marimekkoColors[j]
+                    );
+                    
+                    coords[i].push([x, y - height, width, height]);
+
+
+
+                    //
+                    // Draw the ingraph label if requested
+                    //
+                    if (this.properties.marimekkoLabelsIngraph) {
+
+                        if (!marimekkoLabelsIngraphTextConf) {
+                            
+                            var marimekkoLabelsIngraphTextConf = RGraph.getTextConf({
+                                object: this,
+                                prefix: 'marimekkoLabelsIngraph'
+                            });
+                        }
+                        
+                        var text = (this.properties.marimekkoLabelsIngraphSpecific && RGraph.isString(this.properties.marimekkoLabelsIngraphSpecific[seq]) ) ? (this.properties.marimekkoLabelsIngraphSpecific[seq] || '') : RGraph.numberFormat({
+                            object:    this,
+                            number:    Number(pc).toFixed(this.properties.marimekkoLabelsIngraphDecimals),
+                            value:     Number(pc).toFixed(this.properties.marimekkoLabelsIngraphDecimals),
+                            unitspre:  this.properties.marimekkoLabelsIngraphUnitsPre,
+                            unitspost: this.properties.marimekkoLabelsIngraphUnitsPost,
+                            point:     this.properties.marimekkoLabelsIngraphPoint,
+                            thousand:  this.properties.marimekkoLabelsIngraphThousand
+                        });
+                        
+                        seq++;
+
+
+
+
+
+                        RGraph.text({
+                            object: this,
+                            text:   text,
+                            x:      x + (width / 2) + this.properties.marimekkoLabelsIngraphOffsetx,
+                            y:      y - (height / 2) + 5 + this.properties.marimekkoLabelsIngraphOffsety,
+                            color:  marimekkoLabelsIngraphTextConf.color,
+                            italic: marimekkoLabelsIngraphTextConf.italic,
+                            bold:   marimekkoLabelsIngraphTextConf.bold,
+                            font:   marimekkoLabelsIngraphTextConf.font,
+                            size:   marimekkoLabelsIngraphTextConf.size,
+                            halign: 'center',
+                            valign: 'center',
+                            tag:    'marimekkoLabelsIngraph',
+                            bounding: true,
+                            'bounding.stroke': this.properties.marimekkoLabelsIngraphBackgroundStroke,
+                            'bounding.fill':   this.properties.marimekkoLabelsIngraphBackgroundFill
+                        });
+                    }
+
+
+
+
+
+
+                    y -= height;
+                }
+
+
+
+
+
+                //
+                // Draw the regular (horizonatal) Marimekko
+                // label if it's been given
+                //
+                if (this.properties.marimekkoLabels) {
+                
+                
+                    var textConf = RGraph.getTextConf({
+                        object: this,
+                        prefix: 'marimekkoLabels'
+                    });
+                
+                    // Get the label
+                    if (RGraph.isString(this.properties.marimekkoLabels)) {
+                        var label = this.properties.marimekkoLabels;
+                    } else if (RGraph.isArray(this.properties.marimekkoLabels)) {
+                        var label = this.properties.marimekkoLabels[i];
+                    } else {
+                        var label = '';
+                    }
+
+                    // Now do substitution on the label
+                    var label = RGraph.labelSubstitution({
+                        index:     i,
+                        text:      label || '',
+                        object:    this,
+                        value:     RGraph.arraySum(data[i][1]),
+                        decimals:  this.properties.marimekkoLabelsFormattedDecimals,
+                        point:     this.properties.marimekkoLabelsFormattedPoint,
+                        thousand:  this.properties.marimekkoLabelsFormattedThousand,
+                        unitsPre:  this.properties.marimekkoLabelsFormattedUnitsPre,
+                        unitsPost: this.properties.marimekkoLabelsFormattedUnitsPost
+                    });
+                
+                    RGraph.text({
+                        object: this,
+                        x:      coords[i].at(-1)[0] + (coords[i].at(-1)[2] / 2) + this.properties.marimekkoLabelsOffsetx,
+                        y:      coords[i].at(-1)[1]  - 5 + this.properties.marimekkoLabelsOffsety,
+                        text:   label,
+                        color:  textConf.color,
+                        font:   textConf.font,
+                        size:   textConf.size,
+                        bold:   textConf.bold,
+                        italic: textConf.italic,
+                        halign: 'center',
+                        valign: 'bottom'
+                    });
+                }
+                x += width;
+            }
+
+
+
+
+
+            //
+            // Store the coordinates
+            //
+            this.coordsMarimekko = coords;
+
+            return this;
+        };
+
+
+
+
+
+
+
+
+        //
+        // This method handles the adjusting calculation for
+        // when the mouse is moved
+        // 
+        // @param object e The event object
+        //
+        this.adjusting_mousemove = function (e)
+        {
+            //
+            // Handle adjusting for the Bar
+            //
+            if (properties.adjustable && RGraph.Registry.get('adjusting') && RGraph.Registry.get('adjusting').uid == this.uid) {
+    
+                var shape = RGraph.Registry.get('adjusting.shape');
+
+                if (shape) {
+    
+                    RGraph.Registry.set('adjusting.shape', shape);
+
+                    var x = this.getXValue(e);
+                    var y = this.getYValue(e);
+                    var [mouseX, mouseY] = RGraph.getMouseXY(e);
+
+
+                    // Y coordinate bounding
+                    if (mouseY <= shape.object.properties.marginTop) {
+                        y = shape.object.scale2.max;
+                    } else if (mouseY > (shape.object.canvas.height - shape.object.properties.marginBottom) ) {
+                        y = shape.object.scale2.min;
+
+                    }
+
+                    // X coordinate bounding
+                    if (mouseX <= shape.object.properties.marginLeft) {
+                        x = shape.object.properties.xaxisScaleMin;
+                    } else if (mouseX > (shape.object.canvas.width - shape.object.properties.marginRight) ) {
+                        x = shape.object.properties.xaxisScaleMax;
+                    }
+
+
+                    // Set the new X and Y values
+                    this.data[shape.dataset][shape.index][0] = x;
+                    this.data[shape.dataset][shape.index][1] = y;
+    
+                    RGraph.redrawCanvas(e.target);
+                    
+                    RGraph.fireCustomEvent(this, 'onadjust');
+                }
+            }
+        };
+
+
+
+
+
+
+
+
+        //
+        // Determines whether a point is adjustable or not.
+        //
+        // @param object A shape object
+        //
+        this.isAdjustable = function (shape)
+        {
+            if (RGraph.isNull(properties.adjustableOnly)) {
+                return true;
+            }
+
+            if (shape && RGraph.isArray(properties.adjustableOnly) && properties.adjustableOnly[shape.sequentialIndex]) {
+                return true;
+            }
+
+            return false;
+        };
+
+
+
+
+
+
+
+
+        //
+        // Register the object
+        //
+        RGraph.register(this);
+
+
+
+
+
+
+
+
+        //
+        // This is the 'end' of the constructor so if the first argument
+        // contains configuration data - handle that.
+        //
+        RGraph.parseObjectStyleConfig(this, conf.options);
+    };
+
+
+
+
+
+
+
+
+    //
+    // This is a shortcut-style function that makes making
+    // drilldown chart much easier for the user.
+    //
+    RGraph.Scatter.drilldown = function (opt)
+    {
+        var original = {
+            xaxisScaleMin: opt.options.xaxisScaleMin,
+            xaxisScaleMax: opt.options.xaxisScaleMax
+        };
+
+        //
+        // Set the initial max and min for the scale
+        //
+        opt.options.xaxisScaleMin = opt.options.xaxisScaleMin;
+        opt.options.xaxisScaleMax = opt.options.xaxisScaleMax;
+
+        // Create the Scatter chart (it's actually an XY line chart
+        var obj = new RGraph.Scatter({
+            id: opt.id,
+            data: RGraph.arrayClone(opt.data),
+            options: opt.options
+        });
+
+        if (opt.options.animation && typeof obj[opt.options.animation] === 'function') {
+            obj[opt.options.animation]();
+        } else {
+            obj.draw();
+        }
+
+        state = {};
+
+        // The mousedown listener
+        obj.canvas.onmousedown = function (e)
+        {
+            if (e.button === 0 && obj.getXValue(e)) {
+                var x = obj.getXValue(e);
+                
+                state.start = x;
+            }
+        };
+
+        // The mouseup listener. This is where the magic
+        // happens and the chart is updated.
+        obj.canvas.onmouseup = function (e)
+        {
+            if (e.button === 0) {
+                var x = obj.getXValue(e),
+                    min = Math.min(state.start, x),
+                    max = Math.max(state.start, x);
+
+                state.end = x;
+                
+                obj.set({
+                    xaxisScaleMin: min,
+                    xaxisScaleMax: max
+                });
+
+                obj.data[0].forEach(function (v, k, arr)
+                {
+                    if (v[0] < min || v[0] > max) {
+                        arr[k] = [];
+                    }
+                });
+                
+                obj.set({
+                    contextmenu: [['Reset', function ()
+                    {
+                        obj.set({
+                            xaxisScaleMin: original.xaxisScaleMin,
+                            xaxisScaleMax: original.xaxisScaleMax,
+                            xaxisLabels: RGraph.arrayClone(opt.options.xaxisLabels)
+                        });
+                
+                        obj.data[0] = RGraph.arrayClone(opt.data);
+                        
+                        RGraph.redraw();
+                    }]]
+                });
+
+                // Set the labels
+                var newlabels = [];
+
+                opt.options.xaxisLabels.forEach(function (v, k, arr)
+                {
+                    if (v[1] > min && v[1] < max) {
+                        newlabels.push(v);
+                    }
+                });
+                obj.set('xaxisLabels', newlabels);
+
+                RGraph.redraw();
+    
+                state = {};
+            }
+        };
+
+        // The mousemove handler. This simply highlights from
+        // the mousedown start point to the current position.
+        obj.canvas.onmousemove = function (e)
+        {
+            if (typeof state.start === 'number' && !state.end) {
+                
+                var coordX1 = obj.getXCoord(state.start);
+                var coordX2 = obj.getXCoord(obj.getXValue(e));
+                
+                RGraph.redraw();
+
+                obj.context.fillStyle = 'rgba(0,0,0,0.15)';
+                obj.context.fillRect(
+                    coordX1,
+                    obj.properties.marginTop,
+                    coordX2 - coordX1,
+                    obj.canvas.height - obj.properties.marginTop - obj.properties.marginBottom
+                );
+            }
+        };
+        
+        return obj;
+    };
+
+
+
+
+
+
+
+
+    //
+    // This is a place holder - it doesn't do anything
+    //
+    RGraph.Scatter.drilldown.draw = function (options)
+    {
+        return RGraph.Scatter.drilldown(options);
+    };
+
+
+
+
+
+
+
+
+    //
+    // This is a function that facilitates creating a
+    // Marimekko chart.
+    //
+    RGraph.Scatter.Marimekko = function (opt)
+    {
+        this.options = opt.options;
+        this.data    = opt.data;
+        this.id      = opt.id;
+
+        //
+        // The draw function for the Marimekko chart
+        //
+        this.draw = function ()
+        {
+            return new RGraph.Scatter({
+                id: this.id,
+                data: opt.data,
+                options: {
+                    xaxisScaleMax: 100,
+                    yaxisScaleMax: 100,
+                    backgroundGrid: false,
+                    xaxis: false,
+                    yaxis: false,
+                    yaxisScaleUnitsPost: '%',
+                    ...this.options
+                }
+            }).exec(function (obj)
+            {
+                // Set this flag so that we can tell if this
+                // is a marimekko chart
+                obj.isMarimekko = true;
+            }).draw();
+        };
+    };