Pie chart slice size

build/escher.js

@@ -4996,7 +4996,7 @@
 	 * @class
 	 * @extends {Object2D}
 	 */
-	function PieChart()
+	function PieChart(data)
 	{
 		Object2D.call(this);
 
@@ -5005,11 +5005,14 @@
 		 * 
 		 * Each element should use the following structure {value: 0.0, fillStyle: ..., strokestyle: ...}.
 		 */
-		this.data = [
-			{value: 10, fillStyle: new ColorStyle("#FD5748"), strokeStyle: null},
-			{value: 15, fillStyle: new ColorStyle("#23AB48"), strokeStyle: new ColorStyle("#AAAAAA")},
-			{value: 5, fillStyle: new ColorStyle("#6285F8"), strokeStyle: null}
-		];
+		this.data = data !== undefined ? data : [];
+
+		/**
+		 * Variable pie slice size based on their value compared to the biggest value.
+		 *
+		 * @type {boolean}
+		 */
+		this.sliceSize = false;
 
 		/**
 		 * Radius of the pie chart object.
@@ -5052,10 +5055,22 @@
 
 	PieChart.prototype.draw = function(context)
 	{
+		if(this.data.length === 0)
+		{
+			return;
+		}
+
 		var sum = 0;
+		var max = this.data[0].value;
+
 		for(var i = 0; i < this.data.length; i++)
 		{
 			sum += this.data[i].value;
+
+			if(this.data[i].value > max)
+			{
+				max = this.data[i].value;
+			}
 		}
 
 		context.lineWidth = this.lineWidth;
@@ -5072,7 +5087,9 @@
 			{
 				context.beginPath();
 				context.moveTo(0, 0);
-				context.arc(0, 0, this.radius, angle, angle + section);
+
+				var radius = this.sliceSize ? ((this.data[i].value / max) * this.radius) : this.radius;
+				context.arc(0, 0, radius, angle, angle + section);
 				context.moveTo(0, 0);
 
 				context.fillStyle = this.data[i].fillStyle.get(context);
@@ -5091,7 +5108,9 @@
 			{
 				context.beginPath();
 				context.moveTo(0, 0);
-				context.arc(0, 0, this.radius, angle, angle + section);
+
+				var radius = this.sliceSize ? ((this.data[i].value / max) * this.radius) : this.radius;
+				context.arc(0, 0, radius, angle, angle + section);
 				context.moveTo(0, 0);
 
 				context.strokeStyle = this.data[i].strokeStyle.get(context);
@@ -5110,6 +5129,7 @@
 		data.lineWidth = this.lineWidth;
 		data.startAngle = this.startAngle;
 		data.endAngle = this.endAngle;
+		data.sliceSize = this.sliceSize;
 
 		return data;
 	};
@@ -5122,6 +5142,7 @@
 		this.lineWidth = data.lineWidth;
 		this.startAngle = data.startAngle;
 		this.endAngle = data.endAngle;
+		this.sliceSize = data.sliceSize;
 	};
 
 	/**
@@ -5170,7 +5191,7 @@
 	Path.prototype.type = "Path";
 	Object2D.register(Path, "Path");
 
-	Path.prototype.draw = function(context, viewport, canvas)
+	Path.prototype.draw = function(context)
 	{
 		if(this.fillStyle !== null)
 		{	

examples/charts.html

@@ -76,9 +76,22 @@
 			bar.data.push((Math.cos(i / 3) + 1) * 3);
 		}
 
-		var pie = new Escher.PieChart();
+		var pieData = [
+			{value: 10, fillStyle: new Escher.ColorStyle("#FD5748"), strokeStyle: null},
+			{value: 15, fillStyle: new Escher.ColorStyle("#23AB48"), strokeStyle: null},
+			{value: 5, fillStyle: new Escher.ColorStyle("#6285F8"), strokeStyle: null}
+		];
+
+		var pie = new Escher.PieChart(pieData);
 		pie.radius = 100;
-		pie.position.set(500, 1000);
+		pie.position.set(1000, 1000);
+		pie.draggable = true;
+		group.add(pie);
+
+		var pie = new Escher.PieChart(pieData);
+		pie.sliceSize = true;
+		pie.radius = 200;
+		pie.position.set(500, 800);
 		pie.draggable = true;
 		group.add(pie);
 

source/objects/chart/PieChart.js

@@ -9,7 +9,7 @@ import { ColorStyle } from "../style/ColorStyle.js";
  * @class
  * @extends {Object2D}
  */
-function PieChart()
+function PieChart(data)
 {
 	Object2D.call(this);
 
@@ -18,11 +18,14 @@ function PieChart()
 	 * 
 	 * Each element should use the following structure {value: 0.0, fillStyle: ..., strokestyle: ...}.
 	 */
-	this.data = [
-		{value: 10, fillStyle: new ColorStyle("#FD5748"), strokeStyle: null},
-		{value: 15, fillStyle: new ColorStyle("#23AB48"), strokeStyle: new ColorStyle("#AAAAAA")},
-		{value: 5, fillStyle: new ColorStyle("#6285F8"), strokeStyle: null}
-	];
+	this.data = data !== undefined ? data : [];
+
+	/**
+	 * Variable pie slice size based on their value compared to the biggest value.
+	 *
+	 * @type {boolean}
+	 */
+	this.sliceSize = false;
 
 	/**
 	 * Radius of the pie chart object.
@@ -65,10 +68,22 @@ PieChart.prototype.isInside = function(point)
 
 PieChart.prototype.draw = function(context)
 {
+	if(this.data.length === 0)
+	{
+		return;
+	}
+
 	var sum = 0;
+	var max = this.data[0].value;
+
 	for(var i = 0; i < this.data.length; i++)
 	{
 		sum += this.data[i].value;
+
+		if(this.data[i].value > max)
+		{
+			max = this.data[i].value;
+		}
 	}
 
 	context.lineWidth = this.lineWidth;
@@ -85,7 +100,9 @@ PieChart.prototype.draw = function(context)
 		{
 			context.beginPath();
 			context.moveTo(0, 0);
-			context.arc(0, 0, this.radius, angle, angle + section);
+
+			var radius = this.sliceSize ? ((this.data[i].value / max) * this.radius) : this.radius;
+			context.arc(0, 0, radius, angle, angle + section);
 			context.moveTo(0, 0);
 
 			context.fillStyle = this.data[i].fillStyle.get(context);
@@ -104,7 +121,9 @@ PieChart.prototype.draw = function(context)
 		{
 			context.beginPath();
 			context.moveTo(0, 0);
-			context.arc(0, 0, this.radius, angle, angle + section);
+
+			var radius = this.sliceSize ? ((this.data[i].value / max) * this.radius) : this.radius;
+			context.arc(0, 0, radius, angle, angle + section);
 			context.moveTo(0, 0);
 
 			context.strokeStyle = this.data[i].strokeStyle.get(context);
@@ -123,6 +142,7 @@ PieChart.prototype.serialize = function(recursive)
 	data.lineWidth = this.lineWidth;
 	data.startAngle = this.startAngle;
 	data.endAngle = this.endAngle;
+	data.sliceSize = this.sliceSize;
 
 	return data;
 };
@@ -135,6 +155,7 @@ PieChart.prototype.parse = function(data, root)
 	this.lineWidth = data.lineWidth;
 	this.startAngle = data.startAngle;
 	this.endAngle = data.endAngle;
+	this.sliceSize = data.sliceSize;
 };
 
 export {PieChart};