From 859fc2647bcc408b638cedc576e0c5ae0eae5663 Mon Sep 17 00:00:00 2001 From: piotrze Date: Tue, 14 Aug 2012 15:18:16 +0200 Subject: [PATCH] added option halfPie to pie type chart --- examples/js/Examples.js | 1 + examples/js/examples/half-pie.js | 47 ++++++++++++++++++++++++++++++++ examples/js/includes.dev.js | 1 + js/types/pie.js | 27 ++++++++++-------- 4 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 examples/js/examples/half-pie.js diff --git a/examples/js/Examples.js b/examples/js/Examples.js index c931a788..c93f1dc6 100644 --- a/examples/js/Examples.js +++ b/examples/js/Examples.js @@ -72,6 +72,7 @@ Examples.prototype = { "basic-bar-stacked", "basic-stacked-horizontal", "basic-pie", + "half-pie", "basic-radar", "basic-bubble", "basic-candle", diff --git a/examples/js/examples/half-pie.js b/examples/js/examples/half-pie.js new file mode 100644 index 00000000..a659fb23 --- /dev/null +++ b/examples/js/examples/half-pie.js @@ -0,0 +1,47 @@ +(function () { + +Flotr.ExampleList.add({ + key : 'half-pie', + name : 'Half Pie', + callback : half_pie +}); + +function half_pie (container) { + + var + d1 = [[0, 4]], + d2 = [[0, 3]], + d3 = [[0, 1.03]], + d4 = [[0, 3.5]], + graph; + + graph = Flotr.draw(container, [ + { data : d1, label : 'Republican' }, + { data : d2, label : 'Democratic' }, + { data : d3, label : 'Green'}, + { data : d4, label : 'Pirates' } + ], { + HtmlText : true, + grid : { + verticalLines : false, + horizontalLines : false + }, + xaxis : { showLabels : false }, + yaxis : { showLabels : false }, + pie : { + show : true, + explode : 6, + startAngle: 0.5, + labelFormatter: function(){ + }, + halfPie: true + }, + mouse : { track : true }, + legend : { + position : 'se', + backgroundColor : '#D2E8FF' + } + }); +} + +})(); diff --git a/examples/js/includes.dev.js b/examples/js/includes.dev.js index c524ea64..d5505daf 100644 --- a/examples/js/includes.dev.js +++ b/examples/js/includes.dev.js @@ -60,6 +60,7 @@ yepnope([ 'js/examples/basic-bars.js', 'js/examples/basic-bars-stacked.js', 'js/examples/basic-pie.js', + 'js/examples/half-pie.js', 'js/examples/basic-radar.js', 'js/examples/basic-bubble.js', 'js/examples/basic-candle.js', diff --git a/js/types/pie.js b/js/types/pie.js index 0568b755..ce57ce54 100644 --- a/js/types/pie.js +++ b/js/types/pie.js @@ -28,7 +28,8 @@ Flotr.addType('pie', { pie3D: false, // => whether to draw the pie in 3 dimenstions or not (ineffective) pie3DviewAngle: (Math.PI/2 * 0.8), pie3DspliceThickness: 20, - epsilon: 0.1 // => how close do you have to get to hit empty slice + epsilon: 0.1, // => how close do you have to get to hit empty slice + halfPie: false }, draw : function (options) { @@ -42,17 +43,18 @@ Flotr.addType('pie', { lineWidth = options.lineWidth, shadowSize = options.shadowSize, sizeRatio = options.sizeRatio, - height = options.height, - width = options.width, + circleRatio = options.halfPie ? 1 : 2, + height = options.height , + width = options.width , explode = options.explode, color = options.color, fill = options.fill, fillStyle = options.fillStyle, - radius = Math.min(canvas.width, canvas.height) * sizeRatio / 2, + radius = Math.min(canvas.width, canvas.height) * sizeRatio /circleRatio, value = data[0][1], html = [], vScale = 1,//Math.cos(series.pie.viewAngle); - measure = Math.PI * 2 * value / this.total, + measure = Math.PI * circleRatio * value / this.total, startAngle = this.startAngle || (2 * Math.PI * options.startAngle), // TODO: this initial startAngle is already in radians (fixing will be test-unstable) endAngle = startAngle + measure, bisection = startAngle + measure / 2, @@ -67,7 +69,7 @@ Flotr.addType('pie', { x, y; context.save(); - context.translate(width / 2, height / 2); + context.translate(width / 2, height / circleRatio); context.scale(1, vScale); x = Math.cos(bisection) * explode; @@ -146,11 +148,12 @@ Flotr.addType('pie', { mouse = args[0], n = args[1], slice = this.slices[index], - x = mouse.relX - options.width / 2, - y = mouse.relY - options.height / 2, + circleRatio = options.halfPie ? 1 : 2, + x = mouse.relX - options.width / circleRatio, + y = mouse.relY - options.height/ circleRatio, r = Math.sqrt(x * x + y * y), theta = Math.atan(y / x), - circle = Math.PI * 2, + circle = Math.PI * circleRatio, explode = slice.explode || options.explode, start = slice.start % circle, end = slice.end % circle, @@ -184,10 +187,11 @@ Flotr.addType('pie', { drawHit: function (options) { var context = options.context, + circleRatio = options.halfPie ? 1 : 2, slice = this.slices[options.args.seriesIndex]; context.save(); - context.translate(options.width / 2, options.height / 2); + context.translate(options.width/circleRatio, options.height/circleRatio); this.plotSlice(slice.x, slice.y, slice.radius, slice.start, slice.end, context); context.stroke(); context.restore(); @@ -195,12 +199,13 @@ Flotr.addType('pie', { clearHit : function (options) { var context = options.context, + circleRatio = options.halfPie ? 1 : 2, slice = this.slices[options.args.seriesIndex], padding = 2 * options.lineWidth, radius = slice.radius + padding; context.save(); - context.translate(options.width / 2, options.height / 2); + context.translate(options.width/circleRatio, options.height/circleRatio); context.clearRect( slice.x - radius, slice.y - radius,