/** * o------------------------------------------------------------------------------o * | This file is part of the RGraph package - you can learn more at: | * | | * | http://www.rgraph.net | * | | * | This package is licensed under the RGraph license. For all kinds of business | * | purposes there is a small one-time licensing fee to pay and for non | * | commercial purposes it is free to use. You can read the full license here: | * | | * | http://www.rgraph.net/license | * o------------------------------------------------------------------------------o */ /** * Initialise the various objects */ if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; RGraph.Highlight = {}; RGraph.Registry = {}; RGraph.Registry.store = []; RGraph.Registry.store['chart.event.handlers'] = []; RGraph.Registry.store['__rgraph_event_listeners__'] = []; // Used in the new system for tooltips RGraph.background = {}; RGraph.objects = []; RGraph.Resizing = {}; RGraph.events = []; RGraph.cursor = []; RGraph.ObjectRegistry = {}; RGraph.ObjectRegistry.objects = {}; RGraph.ObjectRegistry.objects.byUID = []; RGraph.ObjectRegistry.objects.byCanvasID = []; /** * Some "constants" */ PI = Math.PI; HALFPI = PI / 2; TWOPI = PI * 2; ISFF = navigator.userAgent.indexOf('Firefox') != -1; ISOPERA = navigator.userAgent.indexOf('Opera') != -1; ISCHROME = navigator.userAgent.indexOf('Chrome') != -1; ISSAFARI = navigator.userAgent.indexOf('Safari') != -1 && !ISCHROME; ISWEBKIT = navigator.userAgent.indexOf('WebKit') != -1; //ISIE is defined below //ISIE6 is defined below //ISIE7 is defined below //ISIE8 is defined below //ISIE9 is defined below //ISIE9 is defined below //ISIE9UP is defined below //ISIE10 is defined below //ISIE10UP is defined below //ISOLD is defined below /** * Returns five values which are used as a nice scale * * @param max int The maximum value of the graph * @param obj object The graph object * @return array An appropriate scale */ RGraph.getScale = function (max, obj) { /** * Special case for 0 */ if (max == 0) { return ['0.2', '0.4', '0.6', '0.8', '1.0']; } var original_max = max; /** * Manually do decimals */ if (max <= 1) { if (max > 0.5) { return [0.2,0.4,0.6,0.8, Number(1).toFixed(1)]; } else if (max >= 0.1) { return obj.Get('chart.scale.round') ? [0.2,0.4,0.6,0.8,1] : [0.1,0.2,0.3,0.4,0.5]; } else { var tmp = max; var exp = 0; while (tmp < 1.01) { exp += 1; tmp *= 10; } var ret = ['2e-' + exp, '4e-' + exp, '6e-' + exp, '8e-' + exp, '10e-' + exp]; if (max <= ('5e-' + exp)) { ret = ['1e-' + exp, '2e-' + exp, '3e-' + exp, '4e-' + exp, '5e-' + exp]; } return ret; } } // Take off any decimals if (String(max).indexOf('.') > 0) { max = String(max).replace(/\.\d+$/, ''); } var interval = Math.pow(10, Number(String(Number(max)).length - 1)); var topValue = interval; while (topValue < max) { topValue += (interval / 2); } // Handles cases where the max is (for example) 50.5 if (Number(original_max) > Number(topValue)) { topValue += (interval / 2); } // Custom if the max is greater than 5 and less than 10 if (max < 10) { topValue = (Number(original_max) <= 5 ? 5 : 10); } /** * Added 02/11/2010 to create "nicer" scales */ if (obj && typeof(obj.Get('chart.scale.round')) == 'boolean' && obj.Get('chart.scale.round')) { topValue = 10 * interval; } return [topValue * 0.2, topValue * 0.4, topValue * 0.6, topValue * 0.8, topValue]; } /** * Returns an appropriate scale. The return value is actualy anm object consiosting of: * scale.max * scale.min * scale.scale * * @param obj object The graph object * @param prop object An object consisting of configuration properties * @return object An object containg scale information */ RGraph.getScale2 = function (obj, opt) { var RG = RGraph; var ca = obj.canvas; var co = obj.context; var prop = obj.properties; var numlabels = typeof(opt['ylabels.count']) == 'number' ? opt['ylabels.count'] : 5; var units_pre = typeof(opt['units.pre']) == 'string' ? opt['units.pre'] : ''; var units_post = typeof(opt['units.post']) == 'string' ? opt['units.post'] : ''; var max = Number(opt['max']); var min = typeof(opt['min']) == 'number' ? opt['min'] : 0; var strict = opt['strict']; var decimals = Number(opt['scale.decimals']); // Sometimes the default is null var point = opt['scale.point']; // Default is a string in all chart libraries so no need to cast it var thousand = opt['scale.thousand']; // Default is a string in all chart libraries so no need to cast it var original_max = max; var round = opt['scale.round']; var scale = {'max':1,'labels':[]}; /** * Special case for 0 * * ** Must be first ** */ if (!max) { var max = 1; var scale = {max:1,min:0,labels:[]}; for (var i=0; i 0.5) { max = 1; min = min; scale.min = min; for (var i=0; i= 0.1) { max = 0.5; min = min; scale = {'max': 0.5, 'min':min,'labels':[]} for (var i=0; i 0) { var numdecimals = Math.abs(max_str.substring(max_str.indexOf('e') + 1)); } else { var numdecimals = String(max).length - 2; } var max = 1 / Math.pow(10,numdecimals - 1); for (var i=0; i Number(topValue)) { topValue += (interval / 2); } // Custom if the max is greater than 5 and less than 10 if (max <= 10) { topValue = (Number(original_max) <= 5 ? 5 : 10); } // Added 02/11/2010 to create "nicer" scales if (obj && typeof(round) == 'boolean' && round) { topValue = 10 * interval; } scale.max = topValue; // Now generate the scale. Temporarily set the objects chart.scale.decimal and chart.scale.point to those //that we've been given as the number_format functuion looks at those instead of using argumrnts. var tmp_point = prop['chart.scale.point']; var tmp_thousand = prop['chart.scale.thousand']; obj.Set('chart.scale.thousand', thousand); obj.Set('chart.scale.point', point); for (var i=0; i 0) { x += parseInt(document.body.style.borderLeftWidth) || 0; y += parseInt(document.body.style.borderTopWidth) || 0; } return [x + paddingLeft + borderLeft, y + paddingTop + borderTop]; } /** * This function determines whther a canvas is fixed (CSS positioning) or not. If not it returns * false. If it is then the element that is fixed is returned (it may be a parent of the canvas). * * @return Either false or the fixed positioned element */ RGraph.isFixed = function (canvas) { var obj = canvas; var i = 0; while (obj && obj.tagName.toLowerCase() != 'body' && i < 99) { if (obj.style.position == 'fixed') { return obj; } obj = obj.offsetParent; } return false; } /** * Registers a graph object (used when the canvas is redrawn) * * @param object obj The object to be registered */ RGraph.Register = function (obj) { // Checking this property ensures the object is only registered once if (!obj.Get('chart.noregister')) { // As of 21st/1/2012 the object registry is now used RGraph.ObjectRegistry.Add(obj); obj.Set('chart.noregister', true); } } /** * Causes all registered objects to be redrawn * * @param string An optional color to use to clear the canvas */ RGraph.Redraw = function () { var objectRegistry = RGraph.ObjectRegistry.objects.byCanvasID; // Get all of the canvas tags on the page var tags = document.getElementsByTagName('canvas'); for (var i=0,len=tags.length; i (ca.height - gutterBottom) ? ca.height - (gutterBottom + i) : 40); } //context.stroke(); co.beginPath(); // Draw the background grid if (prop['chart.background.grid']) { // If autofit is specified, use the .numhlines and .numvlines along with the width to work // out the hsize and vsize if (prop['chart.background.grid.autofit']) { /** * Align the grid to the tickmarks */ if (prop['chart.background.grid.autofit.align']) { // Align the horizontal lines obj.Set('chart.background.grid.autofit.numhlines', prop['chart.ylabels.count']); // Align the vertical lines for the line if (obj.type == 'line') { if (prop['chart.labels'] && prop['chart.labels'].length) { obj.Set('chart.background.grid.autofit.numvlines', prop['chart.labels'].length - 1); } else { obj.Set('chart.background.grid.autofit.numvlines', obj.data[0].length - 1); } // Align the vertical lines for the bar } else if (obj.type == 'bar' && prop['chart.labels'] && prop['chart.labels'].length) { obj.Set('chart.background.grid.autofit.numvlines', prop['chart.labels'].length); } } var vsize = ((ca.width - gutterLeft - gutterRight)) / prop['chart.background.grid.autofit.numvlines']; var hsize = (ca.height - gutterTop - gutterBottom) / prop['chart.background.grid.autofit.numhlines']; obj.Set('chart.background.grid.vsize', vsize); obj.Set('chart.background.grid.hsize', hsize); } co.beginPath(); co.lineWidth = prop['chart.background.grid.width'] ? prop['chart.background.grid.width'] : 1; co.strokeStyle = prop['chart.background.grid.color']; // Dashed background grid if (prop['chart.background.grid.dashed'] && typeof co.setLineDash == 'function') { co.setLineDash([3,2]); } // Dotted background grid if (prop['chart.background.grid.dotted'] && typeof co.setLineDash == 'function') { co.setLineDash([1,2]); } // Draw the horizontal lines if (prop['chart.background.grid.hlines']) { height = (ca.height - gutterBottom) for (y=gutterTop; y 0) { return String(prepend + String(num) + append); } // We need then number as a string num = String(num); // Take off the decimal part - we re-append it later if (num.indexOf('.') > 0) { var tmp = num; num = num.replace(/\.(.*)/, ''); // The front part of the number decimal = tmp.replace(/(.*)\.(.*)/, '$2'); // The decimal part of the number } // Thousand seperator //var seperator = arguments[1] ? String(arguments[1]) : ','; var seperator = thousand_seperator; /** * Work backwards adding the thousand seperators */ var foundPoint; for (i=(num.length - 1),j=0; i>=0; j++,i--) { var character = num.charAt(i); if ( j % 3 == 0 && j != 0) { output += seperator; } /** * Build the output */ output += character; } /** * Now need to reverse the string */ var rev = output; output = ''; for (i=(rev.length - 1); i>=0; i--) { output += rev.charAt(i); } // Tidy up //output = output.replace(/^-,/, '-'); if (output.indexOf('-' + prop['chart.scale.thousand']) == 0) { output = '-' + output.substr(('-' + prop['chart.scale.thousand']).length); } // Reappend the decimal if (decimal.length) { output = output + decimal_seperator + decimal; decimal = ''; RegExp.$1 = ''; } // Minor bugette if (output.charAt(0) == '-') { output = output.replace(/-/, ''); prepend = '-' + prepend; } return prepend + output + append; } /** * Draws horizontal coloured bars on something like the bar, line or scatter */ RGraph.DrawBars = function (obj) { var prop = obj.properties; var co = obj.context; var ca = obj.canvas; var RG = RGraph; var hbars = prop['chart.background.hbars']; if (hbars === null) { return; } /** * Draws a horizontal bar */ co.beginPath(); for (i=0,len=hbars.length; i obj.scale2.max) start = obj.scale2.max; if (RG.is_null(length)) length = obj.scale2.max - start; if (start + length > obj.scale2.max) length = obj.scale2.max - start; if (start + length < (-1 * obj.scale2.max) ) length = (-1 * obj.scale2.max) - start; if (prop['chart.xaxispos'] == 'center' && start == obj.scale2.max && length < (obj.scale2.max * -2)) { length = obj.scale2.max * -2; } /** * Draw the bar */ var x = prop['chart.gutter.left']; var y = obj.getYCoord(start); var w = ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right']; var h = obj.getYCoord(start + length) - y; // Accommodate Opera :-/ if (ISOPERA != -1 && prop['chart.xaxispos'] == 'center' && h < 0) { h *= -1; y = y - h; } /** * Account for X axis at the top */ if (prop['chart.xaxispos'] == 'top') { y = ca.height - y; h *= -1; } co.fillStyle = color; co.fillRect(x, y, w, h); } /* // If the X axis is at the bottom, and a negative max is given, warn the user if (obj.Get('chart.xaxispos') == 'bottom' && (hbars[i][0] < 0 || (hbars[i][1] + hbars[i][1] < 0)) ) { alert('[' + obj.type.toUpperCase() + ' (ID: ' + obj.id + ') BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center'); } var ystart = (obj.grapharea - (((hbars[i][0] - obj.scale2.min) / (obj.scale2.max - obj.scale2.min)) * obj.grapharea)); //var height = (Math.min(hbars[i][1], obj.max - hbars[i][0]) / (obj.scale2.max - obj.scale2.min)) * obj.grapharea; var height = obj.getYCoord(hbars[i][0]) - obj.getYCoord(hbars[i][1]); // Account for the X axis being in the center if (obj.Get('chart.xaxispos') == 'center') { ystart /= 2; //height /= 2; } ystart += obj.Get('chart.gutter.top') var x = obj.Get('chart.gutter.left'); var y = ystart - height; var w = obj.canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right'); var h = height; // Accommodate Opera :-/ if (navigator.userAgent.indexOf('Opera') != -1 && obj.Get('chart.xaxispos') == 'center' && h < 0) { h *= -1; y = y - h; } /** * Account for X axis at the top */ //if (obj.Get('chart.xaxispos') == 'top') { // y = obj.canvas.height - y; // h *= -1; //} //obj.context.fillStyle = hbars[i][2]; //obj.context.fillRect(x, y, w, h); //} } /** * Draws in-graph labels. * * @param object obj The graph object */ RGraph.DrawInGraphLabels = function (obj) { var RG = RGraph; var ca = obj.canvas; var co = obj.context; var prop = obj.properties; var labels = prop['chart.labels.ingraph']; var labels_processed = []; // Defaults var fgcolor = 'black'; var bgcolor = 'white'; var direction = 1; if (!labels) { return; } /** * Preprocess the labels array. Numbers are expanded */ for (var i=0,len=labels.length; i 0) { for (var i=0,len=labels_processed.length; i 0) { var x = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]); var y = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]); var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25; co.beginPath(); co.fillStyle = 'black'; co.strokeStyle = 'black'; if (obj.type == 'bar') { /** * X axis at the top */ if (obj.Get('chart.xaxispos') == 'top') { length *= -1; } if (prop['chart.variant'] == 'dot') { co.moveTo(Math.round(x), obj.coords[i][1] - 5); co.lineTo(Math.round(x), obj.coords[i][1] - 5 - length); var text_x = Math.round(x); var text_y = obj.coords[i][1] - 5 - length; } else if (prop['chart.variant'] == 'arrow') { co.moveTo(Math.round(x), obj.coords[i][1] - 5); co.lineTo(Math.round(x), obj.coords[i][1] - 5 - length); var text_x = Math.round(x); var text_y = obj.coords[i][1] - 5 - length; } else { co.arc(Math.round(x), y, 2.5, 0, 6.28, 0); co.moveTo(Math.round(x), y); co.lineTo(Math.round(x), y - length); var text_x = Math.round(x); var text_y = y - length; } co.stroke(); co.fill(); } else if (obj.type == 'line') { if ( typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][3]) == 'number' && labels_processed[i][3] == -1 ) { co.moveTo(Math.round(x), y + 5); co.lineTo(Math.round(x), y + 5 + length); co.stroke(); co.beginPath(); // This draws the arrow co.moveTo(Math.round(x), y + 5); co.lineTo(Math.round(x) - 3, y + 10); co.lineTo(Math.round(x) + 3, y + 10); co.closePath(); var text_x = x; var text_y = y + 5 + length; } else { var text_x = x; var text_y = y - 5 - length; co.moveTo(Math.round(x), y - 5); co.lineTo(Math.round(x), y - 5 - length); co.stroke(); co.beginPath(); // This draws the arrow co.moveTo(Math.round(x), y - 5); co.lineTo(Math.round(x) - 3, y - 10); co.lineTo(Math.round(x) + 3, y - 10); co.closePath(); } co.fill(); } // Taken out on the 10th Nov 2010 - unnecessary //var width = context.measureText(labels[i]).width; co.beginPath(); // Fore ground color co.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black'; RG.Text2(obj,{'font':prop['chart.text.font'], 'size':prop['chart.text.size'], '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, 'bounding.fill': (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white', 'tag':'labels ingraph' }); co.fill(); } } } } } /** * This function "fills in" key missing properties that various implementations lack * * @param object e The event object */ RGraph.FixEventObject = function (e) { if (ISOLD) { var e = event; e.pageX = (event.clientX + document.body.scrollLeft); e.pageY = (event.clientY + document.body.scrollTop); e.target = event.srcElement; if (!document.body.scrollTop && document.documentElement.scrollTop) { e.pageX += parseInt(document.documentElement.scrollLeft); e.pageY += parseInt(document.documentElement.scrollTop); } } // Any browser that doesn't implement stopPropagation() (MSIE) if (!e.stopPropagation) { e.stopPropagation = function () {window.event.cancelBubble = true;} } return e; } /** * Thisz function hides the crosshairs coordinates */ RGraph.HideCrosshairCoords = function () { var RG = RGraph; var div = RG.Registry.Get('chart.coordinates.coords.div'); if ( div && div.style.opacity == 1 && div.__object__.Get('chart.crosshairs.coords.fadeout') ) { setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.9;}, 50); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.8;}, 100); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.7;}, 150); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.6;}, 200); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.5;}, 250); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.4;}, 300); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.3;}, 350); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.2;}, 400); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.1;}, 450); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.opacity = 0;}, 500); setTimeout(function() {RG.Registry.Get('chart.coordinates.coords.div').style.display = 'none';}, 550); } } /** * Draws the3D axes/background */ RGraph.Draw3DAxes = function (obj) { var prop = obj.properties; var co = obj.context; var ca = obj.canvas; var gutterLeft = prop['chart.gutter.left']; var gutterRight = prop['chart.gutter.right']; var gutterTop = prop['chart.gutter.top']; var gutterBottom = prop['chart.gutter.bottom']; co.strokeStyle = '#aaa'; co.fillStyle = '#ddd'; // Draw the vertical left side co.beginPath(); co.moveTo(gutterLeft, gutterTop); co.lineTo(gutterLeft + 10, gutterTop - 5); co.lineTo(gutterLeft + 10, ca.height - gutterBottom - 5); co.lineTo(gutterLeft, ca.height - gutterBottom); co.closePath(); co.stroke(); co.fill(); // Draw the bottom floor co.beginPath(); co.moveTo(gutterLeft, ca.height - gutterBottom); co.lineTo(gutterLeft + 10, ca.height - gutterBottom - 5); co.lineTo(ca.width - gutterRight + 10, ca.height - gutterBottom - 5); co.lineTo(ca.width - gutterRight, ca.height - gutterBottom); co.closePath(); co.stroke(); co.fill(); } /** * This function attempts to "fill in" missing functions from the canvas * context object. Only two at the moment - measureText() nd fillText(). * * @param object context The canvas 2D context */ RGraph.OldBrowserCompat = function (co) { if (!co) { return; } if (!co.measureText) { // This emulates the measureText() function co.measureText = function (text) { var textObj = document.createElement('DIV'); textObj.innerHTML = text; textObj.style.position = 'absolute'; textObj.style.top = '-100px'; textObj.style.left = 0; document.body.appendChild(textObj); var width = {width: textObj.offsetWidth}; textObj.style.display = 'none'; return width; } } if (!co.fillText) { // This emulates the fillText() method co.fillText = function (text, targetX, targetY) { return false; } } // If IE8, add addEventListener() if (!co.canvas.addEventListener) { window.addEventListener = function (ev, func, bubble) { return this.attachEvent('on' + ev, func); } co.canvas.addEventListener = function (ev, func, bubble) { return this.attachEvent('on' + ev, func); } } } /** * Draws a rectangle with curvy corners * * @param co object The context * @param x number The X coordinate (top left of the square) * @param y number The Y coordinate (top left of the square) * @param w number The width of the rectangle * @param h number The height of the rectangle * @param number The radius of the curved corners * @param boolean Whether the top left corner is curvy * @param boolean Whether the top right corner is curvy * @param boolean Whether the bottom right corner is curvy * @param boolean Whether the bottom left corner is curvy */ RGraph.strokedCurvyRect = function (co, x, y, w, h) { // The corner radius var r = arguments[5] ? arguments[5] : 3; // The corners var corner_tl = (arguments[6] || arguments[6] == null) ? true : false; var corner_tr = (arguments[7] || arguments[7] == null) ? true : false; var corner_br = (arguments[8] || arguments[8] == null) ? true : false; var corner_bl = (arguments[9] || arguments[9] == null) ? true : false; co.beginPath(); // Top left side co.moveTo(x + (corner_tl ? r : 0), y); co.lineTo(x + w - (corner_tr ? r : 0), y); // Top right corner if (corner_tr) { co.arc(x + w - r, y + r, r, PI + HALFPI, TWOPI, false); } // Top right side co.lineTo(x + w, y + h - (corner_br ? r : 0) ); // Bottom right corner if (corner_br) { co.arc(x + w - r, y - r + h, r, TWOPI, HALFPI, false); } // Bottom right side co.lineTo(x + (corner_bl ? r : 0), y + h); // Bottom left corner if (corner_bl) { co.arc(x + r, y - r + h, r, HALFPI, PI, false); } // Bottom left side co.lineTo(x, y + (corner_tl ? r : 0) ); // Top left corner if (corner_tl) { co.arc(x + r, y + r, r, PI, PI + HALFPI, false); } co.stroke(); } /** * Draws a filled rectangle with curvy corners * * @param context object The context * @param x number The X coordinate (top left of the square) * @param y number The Y coordinate (top left of the square) * @param w number The width of the rectangle * @param h number The height of the rectangle * @param number The radius of the curved corners * @param boolean Whether the top left corner is curvy * @param boolean Whether the top right corner is curvy * @param boolean Whether the bottom right corner is curvy * @param boolean Whether the bottom left corner is curvy */ RGraph.filledCurvyRect = function (co, x, y, w, h) { // The corner radius var r = arguments[5] ? arguments[5] : 3; // The corners var corner_tl = (arguments[6] || arguments[6] == null) ? true : false; var corner_tr = (arguments[7] || arguments[7] == null) ? true : false; var corner_br = (arguments[8] || arguments[8] == null) ? true : false; var corner_bl = (arguments[9] || arguments[9] == null) ? true : false; co.beginPath(); // First draw the corners // Top left corner if (corner_tl) { co.moveTo(x + r, y + r); co.arc(x + r, y + r, r, PI, PI + HALFPI, false); } else { co.fillRect(x, y, r, r); } // Top right corner if (corner_tr) { co.moveTo(x + w - r, y + r); co.arc(x + w - r, y + r, r, PI + HALFPI, 0, false); } else { co.moveTo(x + w - r, y); co.fillRect(x + w - r, y, r, r); } // Bottom right corner if (corner_br) { co.moveTo(x + w - r, y + h - r); co.arc(x + w - r, y - r + h, r, 0, HALFPI, false); } else { co.moveTo(x + w - r, y + h - r); co.fillRect(x + w - r, y + h - r, r, r); } // Bottom left corner if (corner_bl) { co.moveTo(x + r, y + h - r); co.arc(x + r, y - r + h, r, HALFPI, PI, false); } else { co.moveTo(x, y + h - r); co.fillRect(x, y + h - r, r, r); } // Now fill it in co.fillRect(x + r, y, w - r - r, h); co.fillRect(x, y + r, r + 1, h - r - r); co.fillRect(x + w - r - 1, y + r, r + 1, h - r - r); co.fill(); } /** * Hides the zoomed canvas */ RGraph.HideZoomedCanvas = function () { var interval = 15; var frames = 10; if (typeof(__zoomedimage__) == 'object') { var obj = __zoomedimage__.obj; var prop = obj.properties; } else { return; } if (prop['chart.zoom.fade.out']) { for (var i=frames,j=1; i>=0; --i, ++j) { if (typeof(__zoomedimage__) == 'object') { setTimeout("__zoomedimage__.style.opacity = " + String(i / 10), j * interval); } } if (typeof(__zoomedbackground__) == 'object') { setTimeout("__zoomedbackground__.style.opacity = " + String(i / frames), j * interval); } } if (typeof(__zoomedimage__) == 'object') { setTimeout("__zoomedimage__.style.display = 'none'", prop['chart.zoom.fade.out'] ? (frames * interval) + 10 : 0); } if (typeof(__zoomedbackground__) == 'object') { setTimeout("__zoomedbackground__.style.display = 'none'", prop['chart.zoom.fade.out'] ? (frames * interval) + 10 : 0); } } /** * Adds an event handler * * @param object obj The graph object * @param string event The name of the event, eg ontooltip * @param object func The callback function */ RGraph.AddCustomEventListener = function (obj, name, func) { var RG = RGraph; if (typeof(RG.events[obj.uid]) == 'undefined') { RG.events[obj.uid] = []; } RG.events[obj.uid].push([obj, name, func]); return RG.events[obj.uid].length - 1; } /** * Used to fire one of the RGraph custom events * * @param object obj The graph object that fires the event * @param string event The name of the event to fire */ RGraph.FireCustomEvent = function (obj, name) { var RG = RGraph; if (obj && obj.isRGraph) { // New style of adding custom events if (obj[name]) { (obj[name])(obj); } var uid = obj.uid; if ( typeof(uid) == 'string' && typeof(RG.events) == 'object' && typeof(RG.events[uid]) == 'object' && RG.events[uid].length > 0) { for(var j=0; j=0; --i) { var obj = objects[i].getObjectByXY(e); if (obj) { return obj; } } } /** * Retrieves the relevant objects based on the X/Y position. * NOTE This function returns an array of objects * * @param object e The event object * @return An array of pertinent objects. Note the there may be only one object */ RGraph.ObjectRegistry.getObjectsByXY = function (e) { var canvas = e.target; var ret = []; var objects = RGraph.ObjectRegistry.getObjectsByCanvasID(canvas.id); // Retrieve objects "front to back" for (var i=(objects.length - 1); i>=0; --i) { var obj = objects[i].getObjectByXY(e); if (obj) { ret.push(obj); } } return ret; } /** * Retrieves the object with the corresponding UID * * @param string uid The UID to get the relevant object for */ RGraph.ObjectRegistry.getObjectByUID = function (uid) { var objects = RGraph.ObjectRegistry.objects.byUID; for (var i=0; i= cx && y >= cy) { angle += TWOPI; } else if (x >= cx && y < cy) { angle = (HALFPI - angle) + (PI + HALFPI); } else if (x < cx && y < cy) { angle += PI; } else { angle = PI - angle; } /** * Upper and lower limit checking */ if (angle > TWOPI) { angle -= TWOPI; } return angle; } /** * This function returns the distance between two points. In effect the * radius of an imaginary circle that is centered on x1 and y1. The name * of this function is derived from the word "Hypoteneuse", which in * trigonmetry is the longest side of a triangle * * @param number x1 The original X coordinate * @param number y1 The original Y coordinate * @param number x2 The target X coordinate * @param number y2 The target Y coordinate */ RGraph.getHypLength = function (x1, y1, x2, y2) { var ret = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1))); return ret; } /** * This function gets the end point (X/Y coordinates) of a given radius. * You pass it the center X/Y and the radius and this function will return * the endpoint X/Y coordinates. * * @param number cx The center X coord * @param number cy The center Y coord * @param number r The lrngth of the radius */ RGraph.getRadiusEndPoint = function (cx, cy, angle, radius) { var x = cx + (Math.cos(angle) * radius); var y = cy + (Math.sin(angle) * radius); return [x, y]; } /** * This installs all of the event listeners * * @param object obj The chart object */ RGraph.InstallEventListeners = function (obj) { var RG = RGraph; var prop = obj.properties; /** * Don't attempt to install event listeners for older versions of MSIE */ if (ISOLD) { return; } /** * If this function exists, then the dynamic file has been included. */ if (RG.InstallCanvasClickListener) { RG.InstallWindowMousedownListener(obj); RG.InstallWindowMouseupListener(obj); RG.InstallCanvasMousemoveListener(obj); RG.InstallCanvasMouseupListener(obj); RG.InstallCanvasMousedownListener(obj); RG.InstallCanvasClickListener(obj); } else if ( RG.hasTooltips(obj) || prop['chart.adjustable'] || prop['chart.annotatable'] || prop['chart.contextmenu'] || prop['chart.resizable'] || prop['chart.key.interactive'] || prop['chart.events.click'] || prop['chart.events.mousemove'] || typeof obj.onclick == 'function' || typeof obj.onmousemove == 'function' ) { alert('[RGRAPH] You appear to have used dynamic features but not included the file: RGraph.common.dynamic.js'); } } /** * Loosly mimicks the PHP function print_r(); */ RGraph.pr = function (obj) { var indent = (arguments[2] ? arguments[2] : ' '); var str = ''; var counter = typeof arguments[3] == 'number' ? arguments[3] : 0; if (counter >= 5) { return ''; } switch (typeof obj) { case 'string': str += obj + ' (' + (typeof obj) + ', ' + obj.length + ')'; break; case 'number': str += obj + ' (' + (typeof obj) + ')'; break; case 'boolean': str += obj + ' (' + (typeof obj) + ')'; break; case 'function': str += 'function () {}'; break; case 'undefined': str += 'undefined'; break; case 'null': str += 'null'; break; case 'object': // In case of null if (RGraph.is_null(obj)) { str += indent + 'null\n'; } else { str += indent + 'Object {' + '\n' for (j in obj) { str += indent + ' ' + j + ' => ' + RGraph.pr(obj[j], true, indent + ' ', counter + 1) + '\n'; } str += indent + '}'; } break; default: str += 'Unknown type: ' + typeof obj + ''; break; } /** * Finished, now either return if we're in a recursed call, or alert() * if we're not. */ if (!arguments[1]) { alert(str); } return str; } /** * Produces a dashed line * * @param object co The 2D context * @param number x1 The start X coordinate * @param number y1 The start Y coordinate * @param number x2 The end X coordinate * @param number y2 The end Y coordinate */ RGraph.DashedLine = function(co, x1, y1, x2, y2) { /** * This is the size of the dashes */ var size = 5; /** * The optional fifth argument can be the size of the dashes */ if (typeof(arguments[5]) == 'number') { size = arguments[5]; } var dx = x2 - x1; var dy = y2 - y1; var num = Math.floor(Math.sqrt((dx * dx) + (dy * dy)) / size); var xLen = dx / num; var yLen = dy / num; var count = 0; do { (count % 2 == 0 && count > 0) ? co.lineTo(x1, y1) : co.moveTo(x1, y1); x1 += xLen; y1 += yLen; } while(count++ <= num); } /** * Makes an AJAX call. It calls the given callback (a function) when ready * * @param string url The URL to retrieve * @param function callback A function that is called when the response is ready, there's an example below * called "myCallback". */ RGraph.AJAX = function (url, callback) { // Mozilla, Safari, ... if (window.XMLHttpRequest) { var httpRequest = new XMLHttpRequest(); // MSIE } else if (window.ActiveXObject) { var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { this.__user_callback__ = callback; this.__user_callback__(this.responseText); } } httpRequest.open('GET', url, true); httpRequest.send(); } /** * Makes an AJAX POST request. It calls the given callback (a function) when ready * * @param string url The URL to retrieve * @param object data The POST data * @param function callback A function that is called when the response is ready, there's an example below * called "myCallback". */ RGraph.AJAX.POST = function (url, data, callback) { // Used when building the POST string var crumbs = []; // Mozilla, Safari, ... if (window.XMLHttpRequest) { var httpRequest = new XMLHttpRequest(); // MSIE } else if (window.ActiveXObject) { var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { this.__user_callback__ = callback; this.__user_callback__(this.responseText); } } httpRequest.open('POST', url, true); httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); for (i in data) { if (typeof i == 'string') { crumbs.push(i + '=' + encodeURIComponent(data[i])); } } httpRequest.send(crumbs.join('&')); } /** * Uses the above function but calls the call back passing a number as its argument * * @param url string The URL to fetch * @param callback function Your callback function (which is passed the number as an argument) */ RGraph.AJAX.getNumber = function (url, callback) { RGraph.AJAX(url, function () { var num = parseFloat(this.responseText); callback(num); }); } /** * Uses the above function but calls the call back passing a string as its argument * * @param url string The URL to fetch * @param callback function Your callback function (which is passed the string as an argument) */ RGraph.AJAX.getString = function (url, callback) { RGraph.AJAX(url, function () { var str = String(this.responseText); callback(str); }); } /** * Uses the above function but calls the call back passing JSON (ie a JavaScript object ) as its argument * * @param url string The URL to fetch * @param callback function Your callback function (which is passed the JSON object as an argument) */ RGraph.AJAX.getJSON = function (url, callback) { RGraph.AJAX(url, function () { var json = eval('(' + this.responseText + ')'); callback(json); }); } /** * Uses the above RGraph.AJAX function but calls the call back passing an array as its argument. * Useful if you're retrieving CSV data * * @param url string The URL to fetch * @param callback function Your callback function (which is passed the CSV/array as an argument) */ RGraph.AJAX.getCSV = function (url, callback) { var seperator = arguments[2] ? arguments[2] : ','; RGraph.AJAX(url, function () { var regexp = new RegExp(seperator); var arr = this.responseText.split(regexp); // Convert the strings to numbers for (var i=0,len=arr.length;i'); div.style.fontFamily = font; div.style.fontWeight = bold ? 'bold' : 'normal'; div.style.fontSize = size + 'pt'; var size = [div.offsetWidth, div.offsetHeight]; //document.body.removeChild(div); __rgraph_measuretext_cache__[str] = size; return size; } /* New text function. Accepts two arguments: * o obj - The chart object * o opt - An object/hash/map of properties. This can consist of: * x The X coordinate (REQUIRED) * y The Y coordinate (REQUIRED) * text The text to show (REQUIRED) * font The font to use * size The size of the text (in pt) * bold Whether the text shouldd be bold or not * marker Whether to show a marker that indicates the X/Y coordinates * valign The vertical alignment * halign The horizontal alignment * bounding Whether to draw a bounding box for the text * boundingStroke The strokeStyle of the bounding box * boundingFill The fillStyle of the bounding box */ RGraph.Text2 = function (obj, opt) { /** * An RGraph object can be given, or a string or the 2D rendering context * The coords are placed on the obj.coordsText variable ONLY if it's an RGraph object. The function * still returns the cooords though in all cases. */ if (obj && obj.isRGraph) { var co = obj.context; var ca = obj.canvas; } else if (typeof obj == 'string') { var ca = document.getElementById(obj); var co = ca.getContext('2d'); } else if (typeof obj.getContext == 'function') { var ca = obj; var co = ca.getContext('2d'); } else if (obj.toString().indexOf('CanvasRenderingContext2D') != -1) { var co = obj; var ca = obj.context; } var x = opt.x; var y = opt.y; var originalX = x; var originalY = y; var text = opt.text; var text_multiline = text.split(/\r?\n/g); var numlines = text_multiline.length; var font = opt.font ? opt.font : 'Arial'; var size = opt.size ? opt.size : 10; var size_pixels = size * 1.5; var bold = opt.bold; var halign = opt.halign ? opt.halign : 'left'; var valign = opt.valign ? opt.valign : 'bottom'; var tag = typeof opt.tag == 'string' && opt.tag.length > 0 ? opt.tag : ''; var marker = opt.marker; var angle = opt.angle || 0; /** * Changed the name of boundingFill/boundingStroke - this allows you to still use those names */ if (typeof opt.boundingFill == 'string') opt['bounding.fill'] = opt.boundingFill; if (typeof opt.boundingStroke == 'string') opt['bounding.stroke'] = opt.boundingStroke; var bounding = opt.bounding; var bounding_stroke = opt['bounding.stroke'] ? opt['bounding.stroke'] : 'black'; var bounding_fill = opt['bounding.fill'] ? opt['bounding.fill'] : 'rgba(255,255,255,0.7)'; var bounding_shadow = opt['bounding.shadow']; var bounding_shadow_color = opt['bounding.shadow.color'] || '#ccc'; var bounding_shadow_blur = opt['bounding.shadow.blur'] || 3; var bounding_shadow_offsetx = opt['bounding.shadow.offsetx'] || 3; var bounding_shadow_offsety = opt['bounding.shadow.offsety'] || 3; var bounding_linewidth = opt['bounding.linewidth'] || 1; /** * Initialize the return value to an empty object */ var ret = {}; /** * The text arg must be a string or a number */ if (typeof text == 'number') { text = String(text); } if (typeof text != 'string') { alert('[RGRAPH TEXT] The text given must a string or a number'); return; } /** * This facilitates vertical text */ if (angle != 0) { co.save(); co.translate(x, y); co.rotate((Math.PI / 180) * angle) x = 0; y = 0; } /** * Set the font */ co.font = (opt.bold ? 'bold ' : '') + size + 'pt ' + font; /** * Measure the width/height. This must be done AFTER the font has been set */ var width=0; for (var i=0; i 1) { y -= ((numlines - 1) * size_pixels); } var boundingY = y - size_pixels - 2; } var boundingW = width + 4; var boundingH = height + 4; /** * Draw a bounding box if required */ if (bounding) { var pre_bounding_linewidth = co.lineWidth; var pre_bounding_strokestyle = co.strokeStyle; var pre_bounding_fillstyle = co.fillStyle; var pre_bounding_shadowcolor = co.shadowColor; var pre_bounding_shadowblur = co.shadowBlur; var pre_bounding_shadowoffsetx = co.shadowOffsetX; var pre_bounding_shadowoffsety = co.shadowOffsetY; co.lineWidth = bounding_linewidth; co.strokeStyle = bounding_stroke; co.fillStyle = bounding_fill; if (bounding_shadow) { co.shadowColor = bounding_shadow_color; co.shadowBlur = bounding_shadow_blur; co.shadowOffsetX = bounding_shadow_offsetx; co.shadowOffsetY = bounding_shadow_offsety; } //obj.context.strokeRect(boundingX, boundingY, width + 6, (size_pixels * numlines) + 4); //obj.context.fillRect(boundingX, boundingY, width + 6, (size_pixels * numlines) + 4); co.strokeRect(boundingX, boundingY, boundingW, boundingH); co.fillRect(boundingX, boundingY, boundingW, boundingH); // Reset the linewidth,colors and shadow to it's original setting co.lineWidth = pre_bounding_linewidth; co.strokeStyle = pre_bounding_strokestyle; co.fillStyle = pre_bounding_fillstyle; co.shadowColor = pre_bounding_shadowcolor co.shadowBlur = pre_bounding_shadowblur co.shadowOffsetX = pre_bounding_shadowoffsetx co.shadowOffsetY = pre_bounding_shadowoffsety } /** * Draw the text */ if (numlines > 1) { for (var i=0; i= 0) { if (RGraph.is_null(data[group])) { group++; grouped_index = 0; continue; } // Allow for numbers as well as arrays in the dataset if (typeof data[group] == 'number') { group++ grouped_index = 0; continue; } grouped_index++; if (grouped_index >= data[group].length) { group++; grouped_index = 0; } } return [group, grouped_index]; } /** * Similar to the jQuery each() function - this lets you iterate easily over an array. The 'this' variable is set] * to the array in the callback function. * * @param array arr The array * @param function func The function to call * @param object Optionally you can specify the object that the "this" variable is set to */ RGraph.each = function (arr, func) { for(var i=0, len=arr.length; i=0;i--){newarr.push(arr[i]);}return newarr;} RGraph.Registry.Set=function(name,value){RGraph.Registry.store[name]=value;return value;} RGraph.Registry.Get=function(name){return RGraph.Registry.store[name];} RGraph.degrees2Radians=function(degrees){return degrees*(PI/180);} RGraph.log=(function(n,base){var log=Math.log;return function(n,base){return log(n)/(base?log(base):1);};})(); RGraph.is_array=function(obj){return obj!=null&&obj.constructor.toString().indexOf('Array')!=-1;} RGraph.trim=function(str){return RGraph.ltrim(RGraph.rtrim(str));} RGraph.ltrim=function(str){return str.replace(/^(\s|\0)+/, '');} RGraph.rtrim=function(str){return str.replace(/(\s|\0)+$/, '');} RGraph.GetHeight=function(obj){return obj.canvas.height;} RGraph.GetWidth=function(obj){return obj.canvas.width;} RGraph.is_null=function(arg){if(arg==null||(typeof(arg))=='object'&&!arg){return true;}return false;} RGraph.Timer=function(label){if(typeof(RGraph.TIMER_LAST_CHECKPOINT)=='undefined'){RGraph.TIMER_LAST_CHECKPOINT=Date.now();}var now=Date.now();console.log(label+': '+(now-RGraph.TIMER_LAST_CHECKPOINT).toString());RGraph.TIMER_LAST_CHECKPOINT=now;} RGraph.Async=function(func){return setTimeout(func,arguments[1]?arguments[1]:1);} RGraph.isIE=function(){return navigator.userAgent.indexOf('MSIE')>0;};ISIE=RGraph.isIE(); RGraph.isIE6=function(){return navigator.userAgent.indexOf('MSIE 6')>0;};ISIE6=RGraph.isIE6(); RGraph.isIE7=function(){return navigator.userAgent.indexOf('MSIE 7')>0;};ISIE7=RGraph.isIE7(); RGraph.isIE8=function(){return navigator.userAgent.indexOf('MSIE 8')>0;};ISIE8=RGraph.isIE8(); RGraph.isIE9=function(){return navigator.userAgent.indexOf('MSIE 9')>0;};ISIE9=RGraph.isIE9(); RGraph.isIE10=function(){return navigator.userAgent.indexOf('MSIE 10')>0;};ISIE10=RGraph.isIE10(); RGraph.isIE9up=function(){navigator.userAgent.match(/MSIE (\d+)/);return Number(RegExp.$1)>=9;};ISIE9UP=RGraph.isIE9up(); RGraph.isIE10up=function(){navigator.userAgent.match(/MSIE (\d+)/);return Number(RegExp.$1)>=10;};ISIE10UP=RGraph.isIE10up(); RGraph.isOld=function(){return ISIE6||ISIE7||ISIE8;};ISOLD=RGraph.isOld(); RGraph.Reset=function(canvas){canvas.width=canvas.width;RGraph.ObjectRegistry.Clear(canvas);canvas.__rgraph_aa_translated__=false;} function pd(variable){RGraph.pr(variable);} function p(variable){RGraph.pr(arguments[0],arguments[1],arguments[3]);} function a(variable){alert(variable);} function cl(variable){return console.log(variable);}