AutorÃa | Ultima modificación | Ver Log |
/*** o-------------------------------------------------------------------------------o* | This file is part of the RGraph package. RGraph is Free software, licensed |* | under the MIT license - so it's free to use for all purposes. Extended |* | support is available if required and donations are always welcome! You can |* | read more here: |* | http://www.rgraph.net/support |* o-------------------------------------------------------------------------------o*/if (typeof(RGraph) == 'undefined') RGraph = {};/*** The horizontal bar chart constructor. The horizontal bar is a minor variant* on the bar chart. If you have big labels, this may be useful as there is usually* more space available for them.** @param object canvas The canvas object* @param array data The chart data*/RGraph.HBar = function (id, data){// Get the canvas and context objectsthis.id = id;this.canvas = document.getElementById(typeof id === 'object' ? id.id : id);this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;this.canvas.__object__ = this;this.data = data;this.type = 'hbar';this.isRGraph = true;this.uid = RGraph.CreateUID();this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();this.colorsParsed = false;this.coords = [];this.coords2 = [];this.coordsText = [];/*** Compatibility with older browsers*/RGraph.OldBrowserCompat(this.context);this.max = 0;this.stackedOrGrouped = false;// Default propertiesthis.properties = {'chart.gutter.left': 75,'chart.gutter.right': 25,'chart.gutter.top': 25,'chart.gutter.bottom': 25,'chart.background.grid': true,'chart.background.grid.color': '#ddd','chart.background.grid.width': 1,'chart.background.grid.hsize': 25,'chart.background.grid.vsize': 25,'chart.background.barcolor1': 'rgba(0,0,0,0)','chart.background.barcolor2': 'rgba(0,0,0,0)','chart.background.grid.hlines': true,'chart.background.grid.vlines': true,'chart.background.grid.border': true,'chart.background.grid.autofit':true,'chart.background.grid.autofit.numhlines': 14,'chart.background.grid.autofit.numvlines': 20,'chart.background.grid.dashed': false,'chart.background.grid.dotted': false,'chart.linewidth': 1,'chart.title': '','chart.title.background': null,'chart.title.xaxis': '','chart.title.xaxis.bold': true,'chart.title.xaxis.size': null,'chart.title.xaxis.font': null,'chart.title.yaxis': '','chart.title.yaxis.bold': true,'chart.title.yaxis.size': null,'chart.title.yaxis.font': null,'chart.title.yaxis.color': null,'chart.title.xaxis.pos': null,'chart.title.yaxis.pos': 0.8,'chart.title.yaxis.x': null,'chart.title.yaxis.y': null,'chart.title.xaxis.x': null,'chart.title.xaxis.y': null,'chart.title.hpos': null,'chart.title.vpos': null,'chart.title.bold': true,'chart.title.font': null,'chart.title.x': null,'chart.title.y': null,'chart.title.halign': null,'chart.title.valign': null,'chart.text.size': 10,'chart.text.color': 'black','chart.text.font': 'Arial','chart.colors': ['Gradient(white:red)', 'Gradient(white:blue)', 'Gradient(white:green)', 'Gradient(white:pink)', 'Gradient(white:yellow)', 'Gradient(white:cyan)', 'Gradient(white:navy)', 'Gradient(white:gray)', 'Gradient(white:black)'],'chart.colors.sequential': false,'chart.xlabels.specific': null,'chart.labels': [],'chart.labels.above': false,'chart.labels.above.decimals': 0,'chart.labels.above.specific': null,'chart.xlabels': true,'chart.xlabels.count': 5,'chart.contextmenu': null,'chart.key': null,'chart.key.background': 'white','chart.key.position': 'graph','chart.key.halign': 'right','chart.key.shadow': false,'chart.key.shadow.color': '#666','chart.key.shadow.blur': 3,'chart.key.shadow.offsetx': 2,'chart.key.shadow.offsety': 2,'chart.key.position.gutter.boxed': false,'chart.key.position.x': null,'chart.key.position.y': null,'chart.key.color.shape': 'square','chart.key.rounded': true,'chart.key.linewidth': 1,'chart.key.colors': null,'chart.key.interactive': false,'chart.key.interactive.highlight.chart.stroke': 'black','chart.key.interactive.highlight.chart.fill':'rgba(255,255,255,0.7)','chart.key.interactive.highlight.label':'rgba(255,0,0,0.2)','chart.key.text.color': 'black','chart.units.pre': '','chart.units.post': '','chart.units.ingraph': false,'chart.strokestyle': 'rgba(0,0,0,0)','chart.xmin': 0,'chart.xmax': 0,'chart.axis.color': 'black','chart.shadow': false,'chart.shadow.color': '#666','chart.shadow.blur': 3,'chart.shadow.offsetx': 3,'chart.shadow.offsety': 3,'chart.vmargin': 2,'chart.vmargin.grouped': 2,'chart.grouping': 'grouped','chart.tooltips': null,'chart.tooltips.event': 'onclick','chart.tooltips.effect': 'fade','chart.tooltips.css.class': 'RGraph_tooltip','chart.tooltips.highlight': true,'chart.highlight.fill': 'rgba(255,255,255,0.7)','chart.highlight.stroke': 'rgba(0,0,0,0)','chart.annotatable': false,'chart.annotate.color': 'black','chart.zoom.factor': 1.5,'chart.zoom.fade.in': true,'chart.zoom.fade.out': true,'chart.zoom.hdir': 'right','chart.zoom.vdir': 'down','chart.zoom.frames': 25,'chart.zoom.delay': 16.666,'chart.zoom.shadow': true,'chart.zoom.background': true,'chart.zoom.action': 'zoom','chart.resizable': false,'chart.resize.handle.adjust': [0,0],'chart.resize.handle.background': null,'chart.scale.point': '.','chart.scale.thousand': ',','chart.scale.decimals': null,'chart.noredraw': false,'chart.events.click': null,'chart.events.mousemove': null,'chart.noxaxis': false,'chart.noyaxis': false,'chart.noaxes': false,'chart.noxtickmarks': false,'chart.noytickmarks': false,'chart.numyticks': data.length,'chart.numxticks': 10}// Check for supportif (!this.canvas) {alert('[HBAR] No canvas support');return;}for (i=0; i<this.data.length; ++i) {if (typeof(this.data[i]) == 'object') {this.stackedOrGrouped = true;}}/*** Create the dollar objects so that functions can be added to them*/var linear_data = RGraph.array_linearize(data);for (var i=0; i<linear_data.length; ++i) {this['$' + i] = {};}/*** Create the linear data array*/this.data_arr = RGraph.array_linearize(this.data);/*** Translate half a pixel for antialiasing purposes - but only if it hasn't beeen* done already*/if (!this.canvas.__rgraph_aa_translated__) {this.context.translate(0.5,0.5);this.canvas.__rgraph_aa_translated__ = true;}///////////////////////////////// SHORT PROPERTIES /////////////////////////////////var RG = RGraph;var ca = this.canvas;var co = ca.getContext('2d');var prop = this.properties;//var $jq = jQuery;//////////////////////////////////// METHODS ////////////////////////////////////////*** A setter** @param name string The name of the property to set* @param value mixed The value of the property*/this.Set = function (name, value){name = name.toLowerCase();/*** This should be done first - prepend the propertyy name with "chart." if necessary*/if (name.substr(0,6) != 'chart.') {name = 'chart.' + name;}if (name == 'chart.labels.abovebar') {name = 'chart.labels.above';}prop[name] = value;return this;}/*** A getter** @param name string The name of the property to get*/this.Get = function (name){/*** This should be done first - prepend the property name with "chart." if necessary*/if (name.substr(0,6) != 'chart.') {name = 'chart.' + name;}if (name == 'chart.labels.abovebar') {name = 'chart.labels.above';}return prop[name];}/*** The function you call to draw the bar chart*/this.Draw = function (){/*** Fire the onbeforedraw event*/RG.FireCustomEvent(this, 'onbeforedraw');/*** Parse the colors. This allows for simple gradient syntax*/if (!this.colorsParsed) {this.parseColors();// Don't want to do this againthis.colorsParsed = true;}/*** This is new in May 2011 and facilitates indiviual gutter settings,* eg chart.gutter.left*/this.gutterLeft = prop['chart.gutter.left'];this.gutterRight = prop['chart.gutter.right'];this.gutterTop = prop['chart.gutter.top'];this.gutterBottom = prop['chart.gutter.bottom'];/*** Stop the coords array from growing uncontrollably*/this.coords = [];this.coords2 = [];this.max = 0;/*** Check for chart.xmin in stacked charts*/if (prop['chart.xmin'] > 0 && prop['chart.grouping'] == 'stacked') {alert('[HBAR] Using chart.xmin is not supported with stacked charts, resetting chart.xmin to zero');this.Set('chart.xmin', 0);}/*** Work out a few things. They need to be here because they depend on things you can change before you* call Draw() but after you instantiate the object*/this.graphwidth = ca.width - this.gutterLeft - this.gutterRight;this.graphheight = ca.height - this.gutterTop - this.gutterBottom;this.halfgrapharea = this.grapharea / 2;this.halfTextHeight = prop['chart.text.size'] / 2;// Progressively Draw the chartRG.background.Draw(this);this.Drawbars();this.DrawAxes();this.DrawLabels();// Draw the key if necessaryif (prop['chart.key'] && prop['chart.key'].length) {RG.DrawKey(this, prop['chart.key'], prop['chart.colors']);}/*** Setup the context menu if required*/if (prop['chart.contextmenu']) {RG.ShowContext(this);}/*** Draw "in graph" labels*/RG.DrawInGraphLabels(this);/*** This function enables resizing*/if (prop['chart.resizable']) {RG.AllowResizing(this);}/*** This installs the event listeners*/RG.InstallEventListeners(this);/*** Fire the RGraph ondraw event*/RG.FireCustomEvent(this, 'ondraw');return this;}/*** This draws the axes*/this.DrawAxes = function (){var halfway = Math.round((this.graphwidth / 2) + this.gutterLeft);co.beginPath();co.lineWidth = prop['chart.axis.linewidth'] ? prop['chart.axis.linewidth'] + 0.001 : 1.001;co.strokeStyle = prop['chart.axis.color'];// Draw the Y axisif (prop['chart.noyaxis'] == false && prop['chart.noaxes'] == false) {if (prop['chart.yaxispos'] == 'center') {co.moveTo(halfway, this.gutterTop);co.lineTo(halfway, ca.height - this.gutterBottom);} else {co.moveTo(this.gutterLeft, this.gutterTop);co.lineTo(this.gutterLeft, ca.height - this.gutterBottom);}}// Draw the X axisif (prop['chart.noxaxis'] == false && prop['chart.noaxes'] == false) {co.moveTo(this.gutterLeft +0.001, ca.height - this.gutterBottom + 0.001);co.lineTo(ca.width - this.gutterRight + 0.001, ca.height - this.gutterBottom + 0.001);}// Draw the Y tickmarksif ( prop['chart.noytickmarks'] == false&& prop['chart.noyaxis'] == false&& prop['chart.numyticks'] > 0&& prop['chart.noaxes'] == false) {var yTickGap = (ca.height - this.gutterTop - this.gutterBottom) / (prop['chart.numyticks'] > 0 ? prop['chart.numyticks'] : this.data.length);for (y=this.gutterTop; y<(ca.height - this.gutterBottom - 1); y+=yTickGap) {if (prop['chart.yaxispos'] == 'center') {co.moveTo(halfway + 3, Math.round(y));co.lineTo(halfway - 3, Math.round(y));} else {co.moveTo(this.gutterLeft, Math.round(y));co.lineTo( this.gutterLeft - 3, Math.round(y));}}// If the X axis isn't being shown draw the end tickif (prop['chart.noxaxis'] == true) {if (prop['chart.yaxispos'] == 'center') {co.moveTo(halfway + 3, Math.round(y));co.lineTo(halfway - 3, Math.round(y));} else {co.moveTo(this.gutterLeft, Math.round(y));co.lineTo( this.gutterLeft - 3, Math.round(y));}}}// Draw the X tickmarksif ( prop['chart.noxtickmarks'] == false&& prop['chart.noxaxis'] == false&& prop['chart.numxticks'] > 0&& prop['chart.noaxes'] == false) {xTickGap = (ca.width - this.gutterLeft - this.gutterRight ) / prop['chart.numxticks'];yStart = ca.height - this.gutterBottom;yEnd = (ca.height - this.gutterBottom) + 3;for (x=(ca.width - this.gutterRight), i=0; prop['chart.yaxispos'] == 'center' ? x>=this.gutterLeft : x>this.gutterLeft; x-=xTickGap) {if (prop['chart.yaxispos'] != 'center' || i != 5) {co.moveTo(Math.round(x), yStart);co.lineTo(Math.round(x), yEnd);}i++;}// If the Y axis isn't being shown draw the end tickif (prop['chart.noyaxis'] == true) {co.moveTo(this.gutterLeft, Math.round(yStart));co.lineTo( this.gutterLeft, Math.round(yEnd));}}co.stroke();/*** Reset the linewidth*/co.lineWidth = 1;}/*** This draws the labels for the graph*/this.DrawLabels = function (){var units_pre = prop['chart.units.pre'];var units_post = prop['chart.units.post'];var text_size = prop['chart.text.size'];var font = prop['chart.text.font'];/*** Set the units to blank if they're to be used for ingraph labels only*/if (prop['chart.units.ingraph']) {units_pre = '';units_post = '';}/*** Draw the X axis labels*/if (prop['chart.xlabels']) {/*** Specific X labels*/if (RGraph.is_array(prop['chart.xlabels.specific'])) {if (prop['chart.yaxispos'] == 'center') {var halfGraphWidth = this.graphwidth / 2;var labels = prop['chart.xlabels.specific'];var interval = (this.graphwidth / 2) / (labels.length - 1);co.fillStyle = prop['chart.text.color'];for (var i=0; i<labels.length; i+=1) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + halfGraphWidth + (interval * i),'y':ca.height - this.gutterBottom,'text':labels[i],'valign':'top','halign':'center','tag': 'scale'});}for (var i=(labels.length - 1); i>0; i-=1) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + (interval * (labels.length - i - 1)),'y':ca.height - this.gutterBottom,'text':labels[i],'valign':'top','halign':'center','tag': 'scale'});}} else {var labels = prop['chart.xlabels.specific'];var interval = this.graphwidth / (labels.length - 1);co.fillStyle = prop['chart.text.color'];for (var i=0; i<labels.length; i+=1) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + (interval * i),'y':ca.height - this.gutterBottom,'text':labels[i],'valign':'top','halign':'center','tag': 'scale'});}}/*** Draw an X scale*/} else {var gap = 7;co.beginPath();co.fillStyle = prop['chart.text.color'];if (prop['chart.yaxispos'] == 'center') {for (var i=0; i<this.scale2.labels.length; ++i) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + (this.graphwidth / 2) - ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)),'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,'text':this.scale2.labels[i],'valign':'center','halign':'center','tag': 'scale'});}for (var i=0; i<this.scale2.labels.length; ++i) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)) + (this.graphwidth / 2),'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,'text':this.scale2.labels[i],'valign':'center','halign':'center','tag': 'scale'});}} else {for (var i=0; i<this.scale2.labels.length; ++i) {RG.Text2(this, {'font':font,'size':text_size,'x':this.gutterLeft + (this.graphwidth * ((i+1)/this.scale2.labels.length)),'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,'text':this.scale2.labels[i],'valign':'center','halign':'center','tag': 'scale'});}}/*** If xmin is not zero - draw that*/if (prop['chart.xmin'] > 0 || prop['chart.noyaxis'] == true) {var x = prop['chart.yaxispos'] == 'center' ? this.gutterLeft + (this.graphwidth / 2): this.gutterLeft;RG.Text2(this, {'font':font,'size':text_size,'x':x,'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,'text':RG.number_format(this, prop['chart.xmin'].toFixed(prop['chart.scale.decimals']), units_pre, units_post),'valign':'center','halign':'center','tag': 'scale'});}co.fill();co.stroke();}}/*** The Y axis labels*/if (typeof(prop['chart.labels']) == 'object') {var xOffset = 5;var font = prop['chart.text.font'];// Draw the X axis labelsco.fillStyle = prop['chart.text.color'];// How wide is each barvar barHeight = (ca.height - this.gutterTop - this.gutterBottom ) / prop['chart.labels'].length;// Reset the xTickGapyTickGap = (ca.height - this.gutterTop - this.gutterBottom) / prop['chart.labels'].length// Draw the X tickmarksvar i=0;for (y=this.gutterTop + (yTickGap / 2); y<=ca.height - this.gutterBottom; y+=yTickGap) {RG.Text2(this, {'font':font,'size':prop['chart.text.size'],'x':this.gutterLeft - xOffset,'y':y,'text':String(prop['chart.labels'][i++]),'halign':'right','valign':'center','tag': 'labels'});}}}/*** This function draws the bars*/this.Drawbars = function (){co.lineWidth = prop['chart.linewidth'];co.strokeStyle = prop['chart.strokestyle'];co.fillStyle = prop['chart.colors'][0];var prevX = 0;var prevY = 0;/*** Work out the max value*/if (prop['chart.xmax']) {this.scale2 = RG.getScale2(this, {'max':prop['chart.xmax'],'min':prop['chart.xmin'],'scale.decimals':Number(prop['chart.scale.decimals']),'scale.point':prop['chart.scale.point'],'scale.thousand':prop['chart.scale.thousand'],'scale.round':prop['chart.scale.round'],'units.pre':prop['chart.units.pre'],'units.post':prop['chart.units.post'],'ylabels.count':prop['chart.xlabels.count'],'strict':true});this.max = this.scale2.max;} else {var grouping = prop['chart.grouping'];for (i=0; i<this.data.length; ++i) {if (typeof(this.data[i]) == 'object') {var value = grouping == 'grouped' ? Number(RG.array_max(this.data[i], true)) : Number(RG.array_sum(this.data[i])) ;} else {var value = Number(Math.abs(this.data[i]));}this.max = Math.max(Math.abs(this.max), Math.abs(value));}this.scale2 = RG.getScale2(this, {'max':this.max,'min':prop['chart.xmin'],'scale.decimals':Number(prop['chart.scale.decimals']),'scale.point':prop['chart.scale.point'],'scale.thousand':prop['chart.scale.thousand'],'scale.round':prop['chart.scale.round'],'units.pre':prop['chart.units.pre'],'units.post':prop['chart.units.post'],'ylabels.count':prop['chart.xlabels.count']});this.max = this.scale2.max;this.min = this.scale2.min;}if (prop['chart.scale.decimals'] == null && Number(this.max) == 1) {this.Set('chart.scale.decimals', 1);}/*** This is here to facilitate sequential colors*/var colorIdx = 0;/*** The bars are drawn HERE*/var graphwidth = (ca.width - this.gutterLeft - this.gutterRight);var halfwidth = graphwidth / 2;for (i=0; i<this.data.length; ++i) {// Work out the width and heightvar width = (this.data[i] / this.max) * graphwidth;var height = this.graphheight / this.data.length;var orig_height = height;var x = this.gutterLeft;var y = this.gutterTop + (i * height);var vmargin = prop['chart.vmargin'];// Account for negative lengths - Some browsers (eg Chrome) don't like a negative valueif (width < 0) {x -= width;width = Math.abs(width);}/*** Turn on the shadow if need be*/if (prop['chart.shadow']) {co.shadowColor = prop['chart.shadow.color'];co.shadowBlur = prop['chart.shadow.blur'];co.shadowOffsetX = prop['chart.shadow.offsetx'];co.shadowOffsetY = prop['chart.shadow.offsety'];}/*** Draw the bar*/co.beginPath();if (typeof(this.data[i]) == 'number') {var barHeight = height - (2 * vmargin);var barWidth = ((this.data[i] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * this.graphwidth;var barX = this.gutterLeft;// Account for Y axis posif (prop['chart.yaxispos'] == 'center') {barWidth /= 2;barX += halfwidth;if (this.data[i] < 0) {barWidth = (Math.abs(this.data[i]) - prop['chart.xmin']) / (this.max - prop['chart.xmin']);barWidth = barWidth * (this.graphwidth / 2);barX = ((this.graphwidth / 2) + this.gutterLeft) - barWidth;}}// Set the fill colorco.strokeStyle = prop['chart.strokestyle'];co.fillStyle = prop['chart.colors'][0];// Sequential colorsif (prop['chart.colors.sequential']) {co.fillStyle = prop['chart.colors'][colorIdx++];}co.strokeRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);co.fillRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);this.coords.push([barX,y + vmargin,barWidth,height - (2 * vmargin),co.fillStyle,this.data[i],true]);/*** Stacked bar chart*/} else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'stacked') {if (prop['chart.yaxispos'] == 'center') {alert('[HBAR] You can\'t have a stacked chart with the Y axis in the center, change it to grouped');}var barHeight = height - (2 * vmargin);if (typeof this.coords2[i] == 'undefined') {this.coords2[i] = [];}for (j=0; j<this.data[i].length; ++j) {// Set the fill/stroke colorsco.strokeStyle = prop['chart.strokestyle'];co.fillStyle = prop['chart.colors'][j];// Sequential colorsif (prop['chart.colors.sequential']) {co.fillStyle = prop['chart.colors'][colorIdx++];}var width = (((this.data[i][j]) / (this.max))) * this.graphwidth;var totalWidth = (RG.array_sum(this.data[i]) / this.max) * this.graphwidth;co.strokeRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );co.fillRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );/*** Store the coords for tooltips*/// The last property of this array is a boolean which tells you whether the value is the last or notthis.coords.push([x,y + vmargin,width,height - (2 * vmargin),co.fillStyle,RG.array_sum(this.data[i]),j == (this.data[i].length - 1)]);this.coords2[i].push([x,y + vmargin,width,height - (2 * vmargin),co.fillStyle,RG.array_sum(this.data[i]),j == (this.data[i].length - 1)]);x += width;}/*** A grouped bar chart*/} else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'grouped') {var vmarginGrouped = prop['chart.vmargin.grouped'];var individualBarHeight = ((height - (2 * vmargin) - ((this.data[i].length - 1) * vmarginGrouped)) / this.data[i].length)if (typeof this.coords2[i] == 'undefined') {this.coords2[i] = [];}for (j=0; j<this.data[i].length; ++j) {/*** Turn on the shadow if need be*/if (prop['chart.shadow']) {RG.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);}// Set the fill/stroke colorsco.strokeStyle = prop['chart.strokestyle'];co.fillStyle = prop['chart.colors'][j];// Sequential colorsif (prop['chart.colors.sequential']) {co.fillStyle = prop['chart.colors'][colorIdx++];}var startY = this.gutterTop + (height * i) + (individualBarHeight * j) + vmargin + (vmarginGrouped * j);var width = ((this.data[i][j] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * (ca.width - this.gutterLeft - this.gutterRight );var startX = this.gutterLeft;// Account for the Y axis being in the middleif (prop['chart.yaxispos'] == 'center') {width /= 2;startX += halfwidth;}if (width < 0) {startX += width;width *= -1;}co.strokeRect(startX, startY, width, individualBarHeight);co.fillRect(startX, startY, width, individualBarHeight);this.coords.push([startX,startY,width,individualBarHeight,co.fillStyle,this.data[i][j],true]);this.coords2[i].push([startX,startY,width,individualBarHeight,co.fillStyle,this.data[i][j],true]);}startY += vmargin;}co.closePath();}co.stroke();co.fill();/*** Now the bars are stroke()ed, turn off the shadow*/RG.NoShadow(this);this.RedrawBars();}/*** This function goes over the bars after they been drawn, so that upwards shadows are underneath the bars*/this.RedrawBars = function (){if (prop['chart.noredraw']) {return;}var coords = this.coords;var font = prop['chart.text.font'];var size = prop['chart.text.size'];var color = prop['chart.text.color'];RG.NoShadow(this);co.strokeStyle = prop['chart.strokestyle'];for (var i=0; i<coords.length; ++i) {if (prop['chart.shadow']) {co.beginPath();co.strokeStyle = prop['chart.strokestyle'];co.fillStyle = coords[i][4];co.lineWidth = prop['chart.linewidth'];co.strokeRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]);co.fillRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]);co.fill();co.stroke();}/*** Draw labels "above" the bar*/if (prop['chart.labels.above'] && coords[i][6]) {co.fillStyle = prop['chart.text.color'];co.strokeStyle = 'black';RG.NoShadow(this);var border = (coords[i][0] + coords[i][2] + 7 + co.measureText(prop['chart.units.pre'] + this.coords[i][5] + prop['chart.units.post']).width) > ca.width ? true : false;/*** Default to the value - then check for specific labels*/var text = RG.number_format(this, (this.coords[i][5]).toFixed(prop['chart.labels.above.decimals']), prop['chart.units.pre'], prop['chart.units.post']);if (typeof prop['chart.labels.above.specific'] == 'object' && prop['chart.labels.above.specific'] && prop['chart.labels.above.specific'][i]) {text = prop['chart.labels.above.specific'][i];}RG.Text2(this, {'font':font,'size':size,'x':coords[i][0] + coords[i][2] + 5,'y':coords[i][1] + (coords[i][3] / 2),'text': text,'valign':'center','halign':'left','tag': 'labels.above'});}}}/*** This function can be used to get the appropriate bar information (if any)** @param e Event object* @return Appriate bar information (if any)*/this.getShape =this.getBar = function (e){var mouseCoords = RG.getMouseXY(e);/*** Loop through the bars determining if the mouse is over a bar*/for (var i=0,len=this.coords.length; i<len; i++) {var mouseX = mouseCoords[0]; // In relation to the canvasvar mouseY = mouseCoords[1]; // In relation to the canvasvar left = this.coords[i][0];var top = this.coords[i][1];var width = this.coords[i][2];var height = this.coords[i][3];var idx = i;if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {var tooltip = RG.parseTooltipText(prop['chart.tooltips'], i);return {0: this, 'object': this,1: left, 'x': left,2: top, 'y': top,3: width, 'width': width,4: height, 'height': height,5: idx, 'index': idx,'tooltip': tooltip};}}}/*** When you click on the chart, this method can return the X value at that point. It works for any point on the* chart (that is inside the gutters) - not just points within the Bars.** @param object e The event object*/this.getValue = function (arg){if (arg.length == 2) {var mouseX = arg[0];var mouseY = arg[1];} else {var mouseCoords = RG.getMouseXY(arg);var mouseX = mouseCoords[0];var mouseY = mouseCoords[1];}if ( mouseY < this.gutterTop|| mouseY > (ca.height - this.gutterBottom)|| mouseX < this.gutterLeft|| mouseX > (ca.width - this.gutterRight)) {return null;}if (prop['chart.yaxispos'] == 'center') {var value = ((mouseX - this.gutterLeft) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);value = value - this.max// Special case if xmin is definedif (prop['chart.xmin'] > 0) {value = ((mouseX - this.gutterLeft - (this.graphwidth / 2)) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);value += prop['chart.xmin'];if (mouseX < (this.gutterLeft + (this.graphwidth / 2))) {value -= (2 * prop['chart.xmin']);}}} else {var value = ((mouseX - this.gutterLeft) / this.graphwidth) * (this.max - prop['chart.xmin']);value += prop['chart.xmin'];}return value;}/*** Each object type has its own Highlight() function which highlights the appropriate shape** @param object shape The shape to highlight*/this.Highlight = function (shape){// Add the new highlightRG.Highlight.Rect(this, shape);}/*** The getObjectByXY() worker method. Don't call this call:** RG.ObjectRegistry.getObjectByXY(e)** @param object e The event object*/this.getObjectByXY = function (e){var mouseXY = RG.getMouseXY(e);if (mouseXY[0] > this.gutterLeft&& mouseXY[0] < (ca.width - this.gutterRight)&& mouseXY[1] > this.gutterTop&& mouseXY[1] < (ca.height - this.gutterBottom)) {return this;}}/*** This function positions a tooltip when it is displayed** @param obj object The chart object* @param int x The X coordinate specified for the tooltip* @param int y The Y coordinate specified for the tooltip* @param objec tooltip The tooltips DIV element*/this.positionTooltip = function (obj, x, y, tooltip, idx){var coordX = obj.coords[tooltip.__index__][0];var coordY = obj.coords[tooltip.__index__][1];var coordW = obj.coords[tooltip.__index__][2];var coordH = obj.coords[tooltip.__index__][3];var canvasXY = RG.getCanvasXY(obj.canvas);var gutterLeft = obj.gutterLeft;var gutterTop = obj.gutterTop;var width = tooltip.offsetWidth;var height = tooltip.offsetHeight;// Set the top positiontooltip.style.left = 0;tooltip.style.top = canvasXY[1] + coordY + (coordH / 2) - height + 'px';// By default any overflow is hiddentooltip.style.overflow = '';// The arrowvar img = new Image();img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';img.style.position = 'absolute';img.id = '__rgraph_tooltip_pointer__';img.style.top = (tooltip.offsetHeight - 2) + 'px';tooltip.appendChild(img);// Reposition the tooltip if at the edges:// LEFT edgeif ((canvasXY[0] + coordX + (coordW / 2) - (width / 2)) < 10) {tooltip.style.left = (canvasXY[0] + coordX - (width * 0.1)) + (coordW / 2) + 'px';img.style.left = ((width * 0.1) - 8.5) + 'px';// RIGHT edge} else if ((canvasXY[0] + (coordW / 2) + coordX + (width / 2)) > document.body.offsetWidth) {tooltip.style.left = canvasXY[0] + coordX - (width * 0.9) + (coordW / 2) + 'px';img.style.left = ((width * 0.9) - 8.5) + 'px';// Default positioning - CENTERED} else {tooltip.style.left = (canvasXY[0] + coordX + (coordW / 2) - (width * 0.5)) + 'px';img.style.left = ((width * 0.5) - 8.5) + 'px';}}/*** Returns the appropriate Y coord for the given value** @param number value The value to get the coord for*/this.getXCoord = function (value){if (prop['chart.yaxispos'] == 'center') {// Range checkingif (value > this.max || value < (-1 * this.max)) {return null;}var width = (ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right']) / 2;var coord = (((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width) + width;coord = prop['chart.gutter.left'] + coord;} else {// Range checkingif (value > this.max || value < 0) {return null;}var width = ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'];var coord = ((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width;coord = prop['chart.gutter.left'] + coord;}return coord;}/****/this.parseColors = function (){var colors = prop['chart.colors'];for (var i=0; i<colors.length; ++i) {colors[i] = this.parseSingleColorForGradient(colors[i]);}prop['chart.background.grid.color'] = this.parseSingleColorForGradient(prop['chart.background.grid.color']);prop['chart.background.barcolor1'] = this.parseSingleColorForGradient(prop['chart.background.barcolor1']);prop['chart.background.barcolor2'] = this.parseSingleColorForGradient(prop['chart.background.barcolor2']);prop['chart.text.color'] = this.parseSingleColorForGradient(prop['chart.text.color']);prop['chart.labels.colors'] = this.parseSingleColorForGradient(prop['chart.labels.colors']);prop['chart.strokestyle'] = this.parseSingleColorForGradient(prop['chart.strokestyle']);prop['chart.axis.color'] = this.parseSingleColorForGradient(prop['chart.axis.color']);prop['chart.highlight.fill'] = this.parseSingleColorForGradient(prop['chart.highlight.fill']);prop['chart.highlight.stroke'] = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);}/*** This parses a single color value*/this.parseSingleColorForGradient = function (color){if (!color || typeof(color) != 'string') {return color;}if (color.match(/^gradient\((.*)\)$/i)) {var parts = RegExp.$1.split(':');// Create the gradientvar grad = co.createLinearGradient(prop['chart.gutter.left'],0,ca.width - prop['chart.gutter.right'],0);var diff = 1 / (parts.length - 1);grad.addColorStop(0, RG.trim(parts[0]));for (var j=1; j<parts.length; ++j) {grad.addColorStop(j * diff, RG.trim(parts[j]));}}return grad ? grad : color;}/*** This function handles highlighting an entire data-series for the interactive* key** @param int index The index of the data series to be highlighted*/this.interactiveKeyHighlight = function (index){var obj = this;this.coords2.forEach(function (value, idx, arr){var shape = obj.coords2[idx][index]var pre_linewidth = co.lineWidth;co.lineWidth = 2;co.fillStyle = prop['chart.key.interactive.highlight.chart.fill'];co.strokeStyle = prop['chart.key.interactive.highlight.chart.stroke'];co.fillRect(shape[0], shape[1], shape[2], shape[3]);co.strokeRect(shape[0], shape[1], shape[2], shape[3]);// Reset the lineWidthco.lineWidth = pre_linewidth;});}/*** Charts are now always registered*/RG.Register(this);}