From 7c4210135328fc901e76d66734a74d008fa718b9 Mon Sep 17 00:00:00 2001 From: Teddy Huff Date: Wed, 12 Dec 2012 14:25:14 -0600 Subject: [PATCH 1/2] Resize; Non 360 Dependent Added function to dynamically resize the canvas tag on resize/load (set to 80%) Also added multipliers to the data. Values do not have to equal 360 now to create a full circle. I have added a 'multiplier' variable that will multiple all necessary values to make them render large enough to close a gap. Tweaked font size and spacing. --- PieChart/piechart.html | 89 +++++++++++++++++++++++++++++++----------- PieChart/piechart.js | 28 +++++++++---- 2 files changed, 86 insertions(+), 31 deletions(-) diff --git a/PieChart/piechart.html b/PieChart/piechart.html index 76d6aaa..958a283 100644 --- a/PieChart/piechart.html +++ b/PieChart/piechart.html @@ -3,36 +3,76 @@ Pie Chart + - - - + + + + + + - + \ No newline at end of file diff --git a/PieChart/piechart.js b/PieChart/piechart.js index 5969bb2..a7f7277 100644 --- a/PieChart/piechart.js +++ b/PieChart/piechart.js @@ -25,6 +25,16 @@ function PieChart(id, o) { this.includeLabels = o.includeLabels; } this.data = o.data ? o.data : [30, 70, 45, 65, 20, 130]; // in degrees + + var dataLength = this.data.length, + totalCount = 0; + for(i = 0; i < dataLength; i++) + { + totalCount += this.data[i] + } + this.multiplier = 360/totalCount; + + this.labels = o.labels ? o.labels : ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"]; this.colors = o.colors ? o.colors : [ ["#bbddb3", "#1d8e04"], // green @@ -55,14 +65,17 @@ PieChart.prototype = { }, drawSegment: function(canvas, context, i, size, isSelected, includeLabels) { + size *= this.multiplier; var self = this; context.save(); var centerX = Math.floor(canvas.width / 2); var centerY = Math.floor(canvas.height / 2); radius = Math.floor(canvas.width / 2); - + var startingAngle = self.degreesToRadians(self.sumTo(self.data, i)); + startingAngle *= this.multiplier; var arcSize = self.degreesToRadians(size); + var endingAngle = startingAngle + arcSize; context.beginPath(); @@ -73,7 +86,7 @@ PieChart.prototype = { isSelected ? context.fillStyle = self.colors[i][1] : context.fillStyle = self.colors[i][0]; - + context.fill(); context.restore(); @@ -87,16 +100,16 @@ PieChart.prototype = { context.save(); var x = Math.floor(canvas.width / 2); var y = Math.floor(canvas.height / 2); - var angle = self.degreesToRadians(self.sumTo(self.data, i)); - + var angle = self.degreesToRadians(self.sumTo(self.data, i)*this.multiplier); + context.translate(x, y); context.rotate(angle); context.textAlign = "right"; - var fontSize = Math.floor(canvas.height / 25); + var fontSize = Math.floor(canvas.height / 30); context.font = fontSize + "pt Helvetica"; var dx = Math.floor(canvas.width * 0.5) - 10; - var dy = Math.floor(canvas.height * 0.05); + var dy = Math.floor(canvas.height * 0.04); context.fillText(self.labels[i], dx, dy); context.restore(); @@ -106,7 +119,7 @@ PieChart.prototype = { var self = this; var context = this.canvas.getContext("2d"); var size = self.data[i]; - + size *= this.multiplier; self.drawSegmentLabel(this.canvas, context, i, size, false); }, @@ -125,4 +138,3 @@ PieChart.prototype = { } - From 751e2fc75478613f36f62c6c7862e5de3d3e888f Mon Sep 17 00:00:00 2001 From: Teddy Huff Date: Wed, 12 Dec 2012 15:57:57 -0600 Subject: [PATCH 2/2] Retina Support Doubles the scale of the graph on retina devices. Also allowed the user to scale the charts for various widths of the screen as desired. --- PieChart/piechart.html | 76 ++++++++++++++++++++++++++---------------- PieChart/piechart.js | 2 ++ 2 files changed, 49 insertions(+), 29 deletions(-) diff --git a/PieChart/piechart.html b/PieChart/piechart.html index 958a283..40bc37e 100644 --- a/PieChart/piechart.html +++ b/PieChart/piechart.html @@ -19,23 +19,29 @@ window.onload = createPieChart; window.onresize = createPieChart; -function sizeCanvas(){ +function sizeCanvas(scale){ + if(scale == null){scale=100} winW = window.innerWidth; - winW = winW * .8; - - - var graphs = document.getElementsByClassName("piechart"); - var numberOfGraphs = graphs.length - 1; - + winW = winW * (scale/100); + + var graphs = document.getElementsByClassName("piechart"); + var numberOfGraphs = graphs.length; + + if(window.devicePixelRatio == 2) { winW *= 2; + for(var i = 0; i < numberOfGraphs; i++){ + graphs[i].style.width = scale + "%"; + } + } + + for(var i = 0; i < numberOfGraphs; i++){ - while(numberOfGraphs > -1){ - graphs[numberOfGraphs].width = winW; - graphs[numberOfGraphs].height = winW; - numberOfGraphs--; - } + + graphs[i].width = winW; + graphs[i].height = winW; + } } function createPieChart() { - sizeCanvas(); + sizeCanvas(80); // // create a PieChart. // @@ -45,34 +51,46 @@ data: [2.4, 2.6, 3.0, 5.3, 13.9, 72.4], labels: ["Microsoft", "Symbian", "Bada", "Blackberry OS", "iOS", "Android", ], colors: [ - ["#FFDAB9", "#ff0000"], - ["#ff0000", "#ddeeff"], - ["#E0FFFF", "#E0FFFF"], - ["#FFDAB9", "#ff0000"], - ["#E6E6FA", "#E6E6FA"], - ["#E0FFFF", "#E0FFFF"] + ["#d37d66", "#ff0000"], + ["#d3a166", "#ddeeff"], + ["#4e75b5", "#E0FFFF"], + ["#9164a4", "#ff0000"], + ["#85bbe4", "#E6E6FA"], + ["#74b616", "#E0FFFF"] ] } ); globalMarketShare.draw(); - var globalMarketShare2 = new PieChart( "piechart2", + var androidGlobal = new PieChart( "piechart2", { includeLabels: true, - data: [2.4, 2.6, 3.0, 5.3, 13.9, 72.4], - labels: ["Microsoft", "Symbian", "Bada", "Blackberry OS", "iOS", "Android", ], + data: [10.3, 50.6, 27.5, 6.7], + labels: ["2.2 Froyo", "2.3.3 - 2.3.7 Gingerbread", "4.0.3 - 4.0.4 ICS", "4.1 - 4.2 Jelly Bean" ], + colors: [ + ["#00cc33", "#ff0000"], + ["#00bb05", "#ddeeff"], + ["#00aa66", "#E0FFFF"], + ["#00dd34", "#ff0000"] + ] + + } + ); + androidGlobal.draw(); + var android4Global = new PieChart( "piechart3", + { + includeLabels: true, + data: [27.5, 5.9, .8], + labels: ["4.0 ICS", "4.1 Jelly Bean", "4.2 Jelly Bean" ], colors: [ - ["#FFDAB9", "#ff0000"], - ["#ff0000", "#ddeeff"], - ["#E0FFFF", "#E0FFFF"], - ["#FFDAB9", "#ff0000"], - ["#E6E6FA", "#E6E6FA"], - ["#E0FFFF", "#E0FFFF"] + ["#00cc33", "#ff0000"], + ["#00bb05", "#ddeeff"], + ["#00aa66", "#E0FFFF"] ] } ); - globalMarketShare2.draw(); + android4Global.draw(); /* * If you want to draw the labels separately, you can set diff --git a/PieChart/piechart.js b/PieChart/piechart.js index a7f7277..f94b69e 100644 --- a/PieChart/piechart.js +++ b/PieChart/piechart.js @@ -46,6 +46,7 @@ function PieChart(id, o) { ]; this.canvas = document.getElementById(id); + } PieChart.prototype = { @@ -59,6 +60,7 @@ PieChart.prototype = { draw: function() { var self = this; var context = this.canvas.getContext("2d"); + if(window.devicePixelRatio == 2) {context.scale(1,1);} for (var i = 0; i < this.data.length; i++) { this.drawSegment(this.canvas, context, i, this.data[i], false, this.includeLabels); }