/** * 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.txt | * o------------------------------------------------------------------------------o */ if (typeof(RGraph) == 'undefined') RGraph = {}; /** * The traditional radar chart constructor * * @param string id The ID of the canvas * @param array data An array of data to represent */ RGraph.Radar = function (id, data) { this.id = id; this.canvas = document.getElementById(id); this.context = this.canvas.getContext('2d'); this.canvas.__object__ = this; this.size = null;// Set in the .Draw() method this.type = 'radar'; this.coords = []; this.isRGraph = true; this.data = []; this.max = 0; for (var i=1; i 0) { this.context.lineWidth = 1; this.context.fillStyle = this.Get('chart.text.color'); var offsetx = this.Get('chart.labels.offsetx'); var offsety = this.Get('chart.labels.offsety'); for (var i=0; i this.data[ds][i]) { ds = dataset; } } var x = this.coords[ds][i][0]; var y = this.coords[ds][i][1]; var text = labels[i]; var hAlign = 'center'; var vAlign = 'center'; var quartile = (i / this.coords.length); // ~Manually do labels on the right middle axis if (i == 0) { hAlign = 'left'; vAlign = 'center'; x += offsetx; } else { hAlign = (x < this.centerx) ? 'right' : 'left'; vAlign = (y < this.centery) ? 'bottom' : 'top'; x += (x < this.centerx) ? (-1 * offsetx) : offsetx; y += (y < this.centery) ? (-1 * offsety) : offsety; if (i / this.data.length == 0.25) { x -= offsetx; hAlign = 'center'; } else if (i / this.data.length == 0.5) { y -= offsety; vAlign = 'center'; } else if (i / this.data.length == 0.75) { x += offsetx; hAlign = 'center'; } } // context, font, size, x, y, text RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, text, vAlign, hAlign, true, null, 'white'); } } } /** * Draws the circle. No arguments as it gets the information from the object properties. */ RGraph.Radar.prototype.DrawCircle = function () { var circle = {}; circle.limit = this.Get('chart.circle'); circle.fill = this.Get('chart.circle.fill'); circle.stroke = this.Get('chart.circle.stroke'); if (circle.limit) { var r = (circle.limit / this.max) * (this.size / 2); this.context.fillStyle = circle.fill; this.context.strokeStyle = circle.stroke; this.context.beginPath(); this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0); this.context.fill(); this.context.stroke(); } } /** * Unsuprisingly, draws the labels */ RGraph.Radar.prototype.DrawAxisLabels = function () { /** * Draw specific axis labels */ if (this.Get('chart.labels.specific')) { this.DrawSpecificAxisLabels(); return; } this.context.lineWidth = 1; // Set the color to black this.context.fillStyle = 'black'; this.context.strokeStyle = 'black'; var r = (this.size/ 2); var font_face = this.Get('chart.text.font'); var font_size = this.Get('chart.text.size'); var context = this.context; var axes = this.Get('chart.labels.axes').toLowerCase(); var color = 'rgba(255,255,255,0.8)'; // The "North" axis labels if (axes.indexOf('n') > -1) { RGraph.Text(context,font_face,font_size,this.centerx,this.centery - (r * 0.2),String(this.scale[0]),'center','center',true,false,color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color); } // The "South" axis labels if (axes.indexOf('s') > -1) { RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(this.scale[0]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color); } // The "East" axis labels if (axes.indexOf('e') > -1) { RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); } // The "West" axis labels if (axes.indexOf('w') > -1) { RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); } RGraph.Text(context, font_face, font_size, this.centerx, this.centery, '0', 'center', 'center', true, false, color); } /** * Draws specific axis labels */ RGraph.Radar.prototype.DrawSpecificAxisLabels = function () { /** * Specific Y labels */ var labels = this.Get('chart.labels.specific'); var context = this.context; var font = this.Get('chart.text.font'); var size = this.Get('chart.text.size'); var axes = this.Get('chart.labels.axes').toLowerCase(); var interval = this.size / (labels.length * 2); for (var i=0; i -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (i * interval),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); if (axes.indexOf('s') > -1) RGraph.Text(context,font,size,this.gutterLeft + (this.size / 2),this.gutterTop + (this.size / 2) + (i * interval) + interval,RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); if (axes.indexOf('w') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval),this.gutterTop + (this.size / 2),labels[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); if (axes.indexOf('e') > -1) RGraph.Text(context,font,size,this.gutterLeft + (i * interval) + interval + (this.size / 2),this.gutterTop + (this.size / 2),RGraph.array_reverse(labels)[i],'center','center', true, false, 'rgba(255,255,255,0.8)'); } } /** * This method eases getting the focussed point (if any) * * @param event e The event object */ RGraph.Radar.prototype.getPoint = function (e) { var obj = e.target.__object__; var canvas = obj.canvas; var context = obj.context; for(var dataset=0; dataset (x - 5) && mouseY > (y - 5) && mouseY < (y + 5) ) { // This accounts for the datasets and increases the index accordingly for(var j=0; j