diff options
Diffstat (limited to 'schall/static/RGraph/libraries/RGraph.pie.js')
| -rw-r--r-- | schall/static/RGraph/libraries/RGraph.pie.js | 1042 |
1 files changed, 1042 insertions, 0 deletions
diff --git a/schall/static/RGraph/libraries/RGraph.pie.js b/schall/static/RGraph/libraries/RGraph.pie.js new file mode 100644 index 0000000..26f688e --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.pie.js @@ -0,0 +1,1042 @@ + /** + * 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 pie chart constructor + * + * @param data array The data to be represented on the pie chart + */ + RGraph.Pie = function (id, data) + { + this.id = id; + this.canvas = document.getElementById(id); + this.context = this.canvas.getContext("2d"); + this.canvas.__object__ = this; + this.total = 0; + this.subTotal = 0; + this.angles = []; + this.data = data; + this.properties = []; + this.type = 'pie'; + this.isRGraph = true; + + + /** + * Compatibility with older browsers + */ + RGraph.OldBrowserCompat(this.context); + + this.properties = { + 'chart.colors': ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'pink', 'yellow', '#000'], + 'chart.strokestyle': '#999', + 'chart.linewidth': 1, + 'chart.labels': [], + 'chart.labels.sticks': false, + 'chart.labels.sticks.length': 7, + 'chart.labels.sticks.color': '#aaa', + 'chart.segments': [], + 'chart.gutter.left': 25, + 'chart.gutter.right': 25, + 'chart.gutter.top': 25, + 'chart.gutter.bottom': 25, + 'chart.title': '', + 'chart.title.background': null, + 'chart.title.hpos': null, + 'chart.title.vpos': 0.5, + 'chart.title.bold': true, + 'chart.title.font': null, + 'chart.shadow': false, + 'chart.shadow.color': 'rgba(0,0,0,0.5)', + 'chart.shadow.offsetx': 3, + 'chart.shadow.offsety': 3, + 'chart.shadow.blur': 3, + 'chart.text.size': 10, + 'chart.text.color': 'black', + 'chart.text.font': 'Verdana', + 'chart.contextmenu': null, + 'chart.tooltips': [], + 'chart.tooltips.event': 'onclick', + 'chart.tooltips.effect': 'fade', + 'chart.tooltips.css.class': 'RGraph_tooltip', + 'chart.tooltips.highlight': true, + 'chart.highlight.style': '3d', + 'chart.highlight.style.2d.fill': 'rgba(255,255,255,0.5)', + 'chart.highlight.style.2d.stroke': 'rgba(255,255,255,0)', + 'chart.centerx': null, + 'chart.centery': null, + 'chart.radius': null, + 'chart.border': false, + 'chart.border.color': 'rgba(255,255,255,0.5)', + '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': true, + 'chart.key.position.x': null, + 'chart.key.position.y': null, + 'chart.key.color.shape': 'square', + 'chart.key.rounded': true, + 'chart.key.linewidth': 1, + 'chart.annotatable': false, + 'chart.annotate.color': 'black', + 'chart.align': 'center', + '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.mode': 'canvas', + 'chart.zoom.thumbnail.width': 75, + 'chart.zoom.thumbnail.height': 75, + 'chart.zoom.background': true, + 'chart.zoom.action': 'zoom', + 'chart.resizable': false, + 'chart.resize.handle.adjust': [0,0], + 'chart.resize.handle.background': null, + 'chart.variant': 'pie', + 'chart.variant.donut.color': 'white', + 'chart.exploded': [], + 'chart.effect.roundrobin.multiplier': 1 + } + + /** + * Calculate the total + */ + for (var i=0,len=data.length; i<len; i++) { + this.total += data[i]; + } + + + /** + * Set the .getShape commonly named method + */ + this.getShape = this.getSegment; + } + + + /** + * A generic setter + */ + RGraph.Pie.prototype.Set = function (name, value) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + this.properties[name] = value; + } + + + /** + * A generic getter + */ + RGraph.Pie.prototype.Get = function (name) + { + if (name == 'chart.highlight.style.2d.color') { + name = 'chart.highlight.style.2d.fill'; + } + + return this.properties[name]; + } + + + /** + * This draws the pie chart + */ + RGraph.Pie.prototype.Draw = function () + { + /** + * Fire the onbeforedraw event + */ + RGraph.FireCustomEvent(this, 'onbeforedraw'); + + + /** + * This is new in May 2011 and facilitates indiviual gutter settings, + * eg chart.gutter.left + */ + this.gutterLeft = this.Get('chart.gutter.left'); + this.gutterRight = this.Get('chart.gutter.right'); + this.gutterTop = this.Get('chart.gutter.top'); + this.gutterBottom = this.Get('chart.gutter.bottom'); + + /** + * Reset this to an empty array + */ + this.Set('chart.segments', []); + + /** + * Clear all of this canvases event handlers (the ones installed by RGraph) + */ + RGraph.ClearEventListeners(this.id); + + + this.radius = this.Get('chart.radius') ? this.Get('chart.radius') : this.getRadius(); + // this.centerx now defined below + this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; + this.subTotal = 0; + this.angles = []; + + /** + * Allow the specification of a custom centery + */ + if (typeof(this.Get('chart.centery')) == 'number') { + this.centery = this.Get('chart.centery'); + } + + /** + * Alignment (Pie is center aligned by default) Only if centerx is not defined - donut defines the centerx + */ + if (this.Get('chart.align') == 'left') { + this.centerx = this.radius + this.gutterLeft; + + } else if (this.Get('chart.align') == 'right') { + this.centerx = this.canvas.width - this.radius - this.gutterRight; + + } else { + this.centerx = this.canvas.width / 2; + } + + /** + * Allow the specification of a custom centerx + */ + if (typeof(this.Get('chart.centerx')) == 'number') { + this.centerx = this.Get('chart.centerx'); + } + + /** + * Draw the shadow if required + */ + if (this.Get('chart.shadow') && 0) { + + var offsetx = document.all ? this.Get('chart.shadow.offsetx') : 0; + var offsety = document.all ? this.Get('chart.shadow.offsety') : 0; + + this.context.beginPath(); + this.context.fillStyle = this.Get('chart.shadow.color'); + + this.context.shadowColor = this.Get('chart.shadow.color'); + this.context.shadowBlur = this.Get('chart.shadow.blur'); + this.context.shadowOffsetX = this.Get('chart.shadow.offsetx'); + this.context.shadowOffsetY = this.Get('chart.shadow.offsety'); + + this.context.arc(this.centerx + offsetx, this.centery + offsety, this.radius, 0, 6.28, 0); + + this.context.fill(); + + // Now turn off the shadow + RGraph.NoShadow(this); + } + + /** + * The total of the array of values + */ + this.total = RGraph.array_sum(this.data); + + for (var i=0,len=this.data.length; i<len; i++) { + + var angle = ((this.data[i] / this.total) * 360); + + // Draw the segment + this.DrawSegment(angle,this.Get('chart.colors')[i],i == (this.data.length - 1), i); + } + + RGraph.NoShadow(this); + + + /** + * Redraw the seperating lines + */ + this.DrawBorders(); + + /** + * Now draw the segments again with shadow turned off. This is always performed, + * not just if the shadow is on. + */ + + for (var i=0; i<this.angles.length; i++) { + + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.colors')[i]; + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + (this.angles[i][0] / 57.3), + (this.angles[i][1] / 57.3), + false); + this.context.lineTo(this.angles[i][2], this.angles[i][3]); + this.context.closePath(); + this.context.fill(); + this.context.stroke(); + } + + + + /** + * Draw label sticks + */ + if (this.Get('chart.labels.sticks')) { + + this.DrawSticks(); + + // Redraw the border going around the Pie chart if the stroke style is NOT white + var strokeStyle = this.Get('chart.strokestyle'); + var isWhite = strokeStyle == 'white' || strokeStyle == '#fff' || strokeStyle == '#fffffff' || strokeStyle == 'rgb(255,255,255)' || strokeStyle == 'rgba(255,255,255,0)'; + + if (!isWhite || (isWhite && this.Get('chart.shadow'))) { + // Again (?) + this.DrawBorders(); + } + } + + /** + * Draw the labels + */ + this.DrawLabels(); + + /** + * Draw the title + */ + if (this.Get('chart.align') == 'left') { + var centerx = this.radius + this.Get('chart.gutter.left'); + + } else if (this.Get('chart.align') == 'right') { + var centerx = RGraph.GetWidth(this) - (this.radius + this.gutterRight); + + } else { + var centerx = null; + } + + RGraph.DrawTitle(this.canvas, + this.Get('chart.title'), + (this.canvas.height / 2) - this.radius - 5, + centerx, + this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2); + + + /** + * Setup the context menu if required + */ + if (this.Get('chart.contextmenu')) { + RGraph.ShowContext(this); + } + + /** + * Tooltips + */ + if (this.Get('chart.tooltips').length) { + + /** + * Register this object for redrawing + */ + RGraph.Register(this); + + /** + * The onclick event + */ + //this.canvas.onclick = function (e) + var canvas_onclick_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var mouseCoords = RGraph.getMouseXY(e); + + var canvas = e.target; + var context = canvas.getContext('2d'); + var obj = e.target.__object__; + + + + /** + * If it's actually a donut make sure the hyp is bigger + * than the size of the hole in the middle + */ + if (obj.Get('chart.variant') == 'donut' && Math.abs(hyp) < (obj.radius / 2)) { + return; + } + + /** + * The angles for each segment are stored in "angles", + * so go through that checking if the mouse position corresponds + */ + var isDonut = obj.Get('chart.variant') == 'donut'; + var hStyle = obj.Get('chart.highlight.style'); + var segment = obj.getSegment(e); + + if (segment) { + + var x = mouseCoords[0] - segment[0]; + var y = mouseCoords[1] - segment[1]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + + + if ( RGraph.Registry.Get('chart.tooltip') + && segment[5] == RGraph.Registry.Get('chart.tooltip').__index__ + && RGraph.Registry.Get('chart.tooltip').__canvas__.__object__.id == obj.id) { + + return; + + } else { + RGraph.Redraw(); + } + + + if (isDonut || hStyle == '2d') { + + context.beginPath(); + + context.strokeStyle = obj.Get('chart.highlight.style.2d.stroke'); + context.fillStyle = obj.Get('chart.highlight.style.2d.fill'); + + //context.moveTo(obj.centerx, obj.centery); + + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0], segment[1]); + context.closePath(); + + context.stroke(); + context.fill(); + + //Removed 7th December 2010 + //context.stroke(); + + } else if (hStyle == 'explode') { + + var exploded = []; + + exploded[segment[5]] = 0; + + RGraph.Registry.Set('chart.pie.exploded', obj); + + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 25); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 50); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 75); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 100); + setTimeout(function () {var pie = RGraph.Registry.Get('chart.pie.exploded'); pie.Set('chart.exploded', exploded);RGraph.Clear(pie.canvas);pie.Draw(); exploded[segment[5]] += 7;}, 125); + + setTimeout(function () {RGraph.Registry.Get('chart.pie.exploded').Set('chart.exploded', []);}, 150); + + } else { + + context.lineWidth = 2; + + /** + * Draw a white segment where the one that has been clicked on was + */ + context.fillStyle = 'white'; + context.strokeStyle = 'white'; + context.beginPath(); + context.moveTo(segment[0], segment[1]); + context.arc(segment[0], segment[1], segment[2], obj.angles[segment[5]][0] / 57.3, obj.angles[segment[5]][1] / 57.3, 0); + context.stroke(); + context.fill(); + + context.lineWidth = 1; + + context.shadowColor = '#666'; + context.shadowBlur = 3; + context.shadowOffsetX = 3; + context.shadowOffsetY = 3; + + // Draw the new segment + context.beginPath(); + context.fillStyle = obj.Get('chart.colors')[segment[5]]; + context.strokeStyle = obj.Get('chart.strokestyle'); + context.moveTo(segment[0] - 3, segment[1] - 3); + context.arc(segment[0] - 3, segment[1] - 3, segment[2], RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0); + context.lineTo(segment[0] - 3, segment[1] - 3); + context.closePath(); + + context.stroke(); + context.fill(); + + // Turn off the shadow + RGraph.NoShadow(obj); + + /** + * If a border is defined, redraw that + */ + if (obj.Get('chart.border')) { + context.beginPath(); + context.strokeStyle = obj.Get('chart.border.color'); + context.lineWidth = 5; + context.arc(segment[0] - 3, segment[1] - 3, obj.radius - 2, RGraph.degrees2Radians(obj.angles[i][0]), RGraph.degrees2Radians(obj.angles[i][1]), 0); + context.stroke(); + } + } + + /** + * If a tooltip is defined, show it + */ + + /** + * Get the tooltip text + */ + var text = RGraph.parseTooltipText(obj.Get('chart.tooltips'), segment[5]); + + if (text) { + RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[5]); + } + + /** + * Need to redraw the key? + */ + if (obj.Get('chart.key') && obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') { + RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors')); + } + + e.stopPropagation(); + + return; + } else if (obj.Get('chart.tooltips.event') == 'onclick') { + RGraph.Redraw(); + } + } + var event_name = this.Get('chart.tooltips.event') == 'onmousemove' ? 'mousemove' : 'click'; + + this.canvas.addEventListener(event_name, canvas_onclick_func, false); + RGraph.AddEventListener(this.id, event_name, canvas_onclick_func); + + + + + + + /** + * The onmousemove event for changing the cursor + */ + //this.canvas.onmousemove = function (e) + var canvas_onmousemove_func = function (e) + { + RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var segment = obj.getSegment(e); + + if (segment) { + e.target.style.cursor = 'pointer'; + + return; + } + + /** + * Put the cursor back to null + */ + e.target.style.cursor = 'default'; + } + this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); + RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); + + + + + + + + + + /** + * The window onclick function + */ + var window_onclick_func = function (e) + { + // Taken out on 02/10/11 + //RGraph.HideZoomedCanvas(); + + e = RGraph.FixEventObject(e); + + RGraph.Redraw(); + + /** + * Put the cursor back to null + */ + //e.target.style.cursor = 'default'; + } + window.addEventListener('click', window_onclick_func, false); + RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func); + } + + + /** + * If a border is pecified, draw it + */ + if (this.Get('chart.border')) { + this.context.beginPath(); + this.context.lineWidth = 5; + this.context.strokeStyle = this.Get('chart.border.color'); + + this.context.arc(this.centerx, + this.centery, + this.radius - 2, + 0, + 6.28, + 0); + + this.context.stroke(); + } + + /** + * Draw the kay if desired + */ + if (this.Get('chart.key') != null) { + //this.Set('chart.key.position', 'graph'); + RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); + } + + + /** + * If this is actually a donut, draw a big circle in the middle + */ + if (this.Get('chart.variant') == 'donut') { + this.context.beginPath(); + this.context.strokeStyle = this.Get('chart.strokestyle'); + this.context.fillStyle = this.Get('chart.variant.donut.color'); + this.context.arc(this.centerx, this.centery, this.radius / 2, 0, 6.28, 0); + this.context.stroke(); + this.context.fill(); + } + + RGraph.NoShadow(this); + + /** + * If the canvas is annotatable, do install the event handlers + */ + if (this.Get('chart.annotatable')) { + RGraph.Annotate(this); + } + + /** + * This bit shows the mini zoom window if requested + */ + if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { + RGraph.ShowZoomWindow(this); + } + + + /** + * This function enables resizing + */ + if (this.Get('chart.resizable')) { + RGraph.AllowResizing(this); + } + + /** + * Fire the RGraph ondraw event + */ + RGraph.FireCustomEvent(this, 'ondraw'); + } + + + /** + * Draws a single segment of the pie chart + * + * @param int degrees The number of degrees for this segment + */ + RGraph.Pie.prototype.DrawSegment = function (degrees, color, last, index) + { + var context = this.context; + var canvas = this.canvas; + var subTotal = this.subTotal; + degrees = degrees * this.Get('chart.effect.roundrobin.multiplier'); + + context.beginPath(); + + context.fillStyle = color; + context.strokeStyle = this.Get('chart.strokestyle'); + context.lineWidth = 0; + + if (this.Get('chart.shadow')) { + RGraph.SetShadow(this, this.Get('chart.shadow.color'),this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur')); + } + + /** + * Exploded segments + */ + if ( (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[index] > 0) || typeof(this.Get('chart.exploded')) == 'number') { + var explosion = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[index]; + var x = 0; + var y = 0; + var h = explosion; + var t = ((subTotal + (degrees / 2)) / (360/6.2830)) - 1.57; + var x = (Math.cos(t) * explosion); + var y = (Math.sin(t) * explosion); + + this.context.moveTo(this.centerx + x, this.centery + y); + } else { + var x = 0; + var y = 0; + } + + /** + * Calculate the angles + */ + var startAngle = ((subTotal / 57.3)) - 1.57; + var endAngle = (((subTotal + degrees) / 57.3)) - 1.57; + + context.arc(this.centerx + x, + this.centery + y, + this.radius, + startAngle, + endAngle, + 0); + + context.lineTo(this.centerx + x, this.centery + y); + + // Keep hold of the angles + this.angles.push([subTotal - 90, subTotal + degrees - 90, this.centerx + x, this.centery + y]) + this.context.closePath(); + + + + //this.context.stroke(); + this.context.fill(); + + /** + * Calculate the segment angle + */ + this.Get('chart.segments').push([subTotal, subTotal + degrees]); + this.subTotal += degrees; + } + + /** + * Draws the graphs labels + */ + RGraph.Pie.prototype.DrawLabels = function () + { + var hAlignment = 'left'; + var vAlignment = 'center'; + var labels = this.Get('chart.labels'); + var context = this.context; + + /** + * Turn the shadow off + */ + RGraph.NoShadow(this); + + context.fillStyle = 'black'; + context.beginPath(); + + /** + * Draw the key (ie. the labels) + */ + if (labels && labels.length) { + + var text_size = this.Get('chart.text.size'); + + for (i=0; i<labels.length; ++i) { + + /** + * T|his ensures that if we're given too many labels, that we don't get an error + */ + if (typeof(this.Get('chart.segments')[i]) == 'undefined') { + continue; + } + + // Move to the centre + context.moveTo(this.centerx,this.centery); + + var a = this.Get('chart.segments')[i][0] + ((this.Get('chart.segments')[i][1] - this.Get('chart.segments')[i][0]) / 2) - 90; + + /** + * Alignment + */ + if (a < 90) { + hAlignment = 'left'; + vAlignment = 'center'; + } else if (a < 180) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 270) { + hAlignment = 'right'; + vAlignment = 'center'; + } else if (a < 360) { + hAlignment = 'left'; + vAlignment = 'center'; + } + +var angle = ((this.angles[i][1] - this.angles[i][0]) / 2) + this.angles[i][0]; + /** + * Handle the additional "explosion" offset + */ + if (typeof(this.Get('chart.exploded')) == 'object' && this.Get('chart.exploded')[i] || typeof(this.Get('chart.exploded')) == 'number') { + + var t = ((this.angles[i][1] - this.angles[i][0]) / 2) / (360/6.2830); + var seperation = typeof(this.Get('chart.exploded')) == 'number' ? this.Get('chart.exploded') : this.Get('chart.exploded')[i]; + + // Adjust the angles + var explosion_offsetx = (Math.cos(angle / 57.29) * seperation); + var explosion_offsety = (Math.sin(angle / 57.29) * seperation); + } else { + var explosion_offsetx = 0; + var explosion_offsety = 0; + } + + /** + * Allow for the label sticks + */ + if (this.Get('chart.labels.sticks')) { + explosion_offsetx += (Math.cos(angle / 57.29) * this.Get('chart.labels.sticks.length')); + explosion_offsety += (Math.sin(angle / 57.29) * this.Get('chart.labels.sticks.length')); + } + + + context.fillStyle = this.Get('chart.text.color'); + + RGraph.Text(context, + this.Get('chart.text.font'), + text_size, + this.centerx + explosion_offsetx + ((this.radius + 10)* Math.cos(a / 57.3)) + (this.Get('chart.labels.sticks') ? (a < 90 || a > 270 ? 2 : -2) : 0), + this.centery + explosion_offsety + (((this.radius + 10) * Math.sin(a / 57.3))), + labels[i], + vAlignment, + hAlignment); + } + + context.fill(); + } + } + + + /** + * This function draws the pie chart sticks (for the labels) + */ + RGraph.Pie.prototype.DrawSticks = function () + { + var context = this.context; + var offset = this.Get('chart.linewidth') / 2; + var exploded = this.Get('chart.exploded'); + var sticks = this.Get('chart.labels.sticks'); + + for (var i=0; i<this.angles.length; ++i) { + + // This allows the chart.labels.sticks to be an array as well as a boolean + if (typeof(sticks) == 'object' && !sticks[i]) { + continue; + } + + var degrees = this.angles[i][1] - this.angles[i][0]; + + context.beginPath(); + context.strokeStyle = this.Get('chart.labels.sticks.color'); + context.lineWidth = 1; + + var midpoint = (this.angles[i][0] + (degrees / 2)) / 57.3; + + if (typeof(exploded) == 'object' && exploded[i]) { + var extra = exploded[i]; + } else if (typeof(exploded) == 'number') { + var extra = exploded; + } else { + var extra = 0; + } + + context.lineJoin = 'round'; + context.lineWidth = 1; + + context.arc(this.centerx, + this.centery, + this.radius + this.Get('chart.labels.sticks.length') + extra, + midpoint, + midpoint + 0.001, + 0); + context.arc(this.centerx, + this.centery, + this.radius + extra, + midpoint, + midpoint + 0.001, + 0); + + context.stroke(); + } + } + + + /** + * The (now Pie chart specific) getSegment function + * + * @param object e The event object + */ + RGraph.Pie.prototype.getSegment = function (e) + { + RGraph.FixEventObject(e); + + // The optional arg provides a way of allowing some accuracy (pixels) + var accuracy = arguments[1] ? arguments[1] : 0; + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var mouseCoords = RGraph.getMouseXY(e); + var r = obj.radius; + var angles = obj.angles; + var ret = []; + + for (var i=0; i<angles.length; ++i) { + + var x = mouseCoords[0] - angles[i][2]; + var y = mouseCoords[1] - angles[i][3]; + var theta = Math.atan(y / x); // RADIANS + var hyp = y / Math.sin(theta); + var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy; + // Put theta in DEGREES + theta *= 57.3 + + /** + * Account for the correct quadrant + */ + if (x < 0 && y >= 0) { + theta += 180; + } else if (x < 0 && y < 0) { + theta += 180; + } + + if (theta > 360) { + theta -= 360; + } + + if (theta >= angles[i][0] && theta < angles[i][1]) { + + hyp = Math.abs(hyp); + + if (!hyp || (obj.radius && hyp > obj.radius) ) { + return null; + } + + if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius || hyp < (obj.radius / 2) ) ) { + return null; + } + + ret[0] = angles[i][2]; + ret[1] = angles[i][3]; + ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius; + ret[3] = angles[i][0]; + ret[4] = angles[i][1]; + ret[5] = i; + + + + if (ret[3] < 0) ret[3] += 360; + if (ret[4] > 360) ret[4] -= 360; + + return ret; + } + } + + return null; + } + + + RGraph.Pie.prototype.DrawBorders = function () + { + if (this.Get('chart.linewidth') > 0) { + + this.context.lineWidth = this.Get('chart.linewidth'); + this.context.strokeStyle = this.Get('chart.strokestyle'); + + for (var i=0,len=this.angles.length; i<len; ++i) { + this.context.beginPath(); + this.context.moveTo(this.angles[i][2], this.angles[i][3]); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + ((this.angles[i][0] / 57.3)), + ((this.angles[i][0] + 0.01) / 57.3), + 0); + this.context.arc(this.angles[i][2], + this.angles[i][3], + this.radius, + ((this.angles[i][0] / 57.3)), + this.angles[i][1] / 57.3, + 0); + this.context.closePath(); + + this.context.stroke(); + } + } + } + + + /** + * Returns the radius of the pie chart + */ + RGraph.Pie.prototype.getRadius = function () + { + return Math.min(this.canvas.height - this.gutterTop - this.gutterBottom, this.canvas.width - this.gutterLeft - this.gutterRight) / 2; + } + + + /** + * A programmatic explode function + * + * @param object obj The chart object + * @param number index The zero-indexed number of the segment + * @param number size The size (in pixels) of the explosion + */ + RGraph.Pie.prototype.Explode = function (index, size) + { + if (this.Get('chart.exploded') == 0) { + this.Set('chart.exploded', []); + } + + var obj = this; + + for (var i=0; i<size; ++i) { + setTimeout( + function () + { + var exploded = obj.Get('chart.exploded'); + var value = typeof(exploded[index]) == 'number' ? exploded[index] : 0; + exploded[index] = value + 1; + obj.Set('chart.exploded', exploded); + RGraph.Clear(obj.canvas); + obj.Draw(); + }, i * 16.666); + } + + /** + * Now set the property accordingly + */ + setTimeout( + function () + { + obj.Set('chart.exploded', exploded); + }, i * 16.666 + ) + + //var Reset = function () + //{ + // pie.Set('chart.exploded', []); + // RGraph.Clear(pie.canvas); + // pie.Draw(); + //} + //window.addEventListener('click', Reset, false); + }
\ No newline at end of file |