Bar chart

build/escher.js

@@ -4590,6 +4590,82 @@
 		this.radius = data.radius;
 	};
 
+	/**
+	 * Bar graph can be used to plot bar data into the canvas.
+	 *
+	 * @class
+	 * @extends {Object2D}
+	 */
+	function BarGraph()
+	{
+		Graph.call(this);
+
+		/**
+		 * Width of each bar in the graph.
+		 * 
+		 * If set null is automatically calculated from the graph size and number of points.
+		 */
+		this.barWidth = null;
+	}
+
+	BarGraph.prototype = Object.create(Graph.prototype);
+	BarGraph.prototype.constructor = BarGraph;
+	BarGraph.prototype.type = "BarGraph";
+	Object2D.register(BarGraph, "BarGraph");
+
+	BarGraph.prototype.draw = function(context, viewport, canvas)
+	{
+		if(this.data.length === 0)
+		{
+			return;
+		}
+		
+		var width = this.box.max.x - this.box.min.x;
+		var height = this.box.max.y - this.box.min.y;
+
+		var step = width / (this.data.length - 1);
+		var gamma = this.max - this.min;
+
+		context.lineWidth = this.lineWidth;
+		context.beginPath();
+
+		var barWidth = this.barWidth !== null ? this.barWidth : width / this.data.length;
+		var barHalfWidth = barWidth / 2.0;
+
+		for(var i = 0, s = 0; i < this.data.length; s += step, i++)
+		{
+			var y = this.box.max.y - ((this.data[i] - this.min) / gamma) * height;
+
+
+			context.moveTo(this.box.min.x + s, y);
+			context.rect(this.box.min.x + s - barHalfWidth, y, barWidth, height);
+		}
+
+		if(this.strokeStyle !== null)
+		{
+			context.strokeStyle = this.strokeStyle.get(context);
+			context.stroke();
+		}
+
+		if(this.fillStyle !== null)
+		{
+			context.fillStyle = this.fillStyle.get(context);
+			context.fill();
+		}
+	};
+
+	BarGraph.prototype.serialize = function(recursive)
+	{
+		var data = Graph.prototype.serialize.call(this, recursive);
+
+		return data;
+	};
+
+	BarGraph.prototype.parse = function(data, root)
+	{
+		Graph.prototype.parse.call(this, data, root);
+	};
+
 	/**
 	 * Gradient color stop is used to create the gradients by their color sections.
 	 *
@@ -6000,6 +6076,7 @@
 	};
 
 	exports.AnimationTimer = AnimationTimer;
+	exports.BarGraph = BarGraph;
 	exports.BezierCurve = BezierCurve;
 	exports.Box = Box;
 	exports.Box2 = Box2;

examples/charts.html

@@ -63,6 +63,19 @@
 			graph.data.push((Math.cos(i / 3) + 1) * 3);
 		}
 
+		var graph = new Escher.BarGraph();
+		graph.box.min.set(-500, -50);
+		graph.box.max.set(500, 50);
+		graph.position.set(500, 1000);
+		graph.draggable = true;
+		group.add(graph);
+
+		Escher.Helpers.boxResizeTool(graph);
+		for(var i = 0; i < 100; i++)
+		{
+			graph.data.push((Math.cos(i / 3) + 1) * 3);
+		}
+
 		var viewport = new Escher.Viewport(canvas);
 
 		var renderer = new Escher.Renderer(canvas);

source/Escher.js

@@ -26,6 +26,7 @@ export {QuadraticCurve} from "./objects/QuadraticCurve.js";
 export {RoundedBox} from "./objects/RoundedBox.js";
 export {Graph} from "./objects/chart/Graph.js";
 export {ScatterGraph} from "./objects/chart/ScatterGraph.js";
+export {BarGraph} from "./objects/chart/BarGraph.js";
 export {Gauge} from "./objects/chart/Gauge.js";
 
 export {Style} from "./objects/style/Style.js";

source/objects/chart/BarGraph.js

@@ -1,4 +1,5 @@
 import {Object2D} from "../../Object2D.js";
+import {Graph} from "./Graph.js";
 
 /**
  * Bar graph can be used to plot bar data into the canvas.
@@ -9,6 +10,13 @@ import {Object2D} from "../../Object2D.js";
 function BarGraph()
 {
 	Graph.call(this);
+
+	/**
+	 * Width of each bar in the graph.
+	 * 
+	 * If set null is automatically calculated from the graph size and number of points.
+	 */
+	this.barWidth = null;
 }
 
 BarGraph.prototype = Object.create(Graph.prototype);
@@ -32,12 +40,16 @@ BarGraph.prototype.draw = function(context, viewport, canvas)
 	context.lineWidth = this.lineWidth;
 	context.beginPath();
 
+	var barWidth = this.barWidth !== null ? this.barWidth : width / this.data.length;
+	var barHalfWidth = barWidth / 2.0;
+
 	for(var i = 0, s = 0; i < this.data.length; s += step, i++)
 	{
 		var y = this.box.max.y - ((this.data[i] - this.min) / gamma) * height;
 
-		context.moveTo(this.box.min.x + s + this.radius, y);
-		context.arc(this.box.min.x + s, y, this.radius, 0, Math.PI * 2, true);
+
+		context.moveTo(this.box.min.x + s, y);
+		context.rect(this.box.min.x + s - barHalfWidth, y, barWidth, height);
 	}
 
 	if(this.strokeStyle !== null)
@@ -65,5 +77,4 @@ BarGraph.prototype.parse = function(data, root)
 	Graph.prototype.parse.call(this, data, root);
 };
 
-
 export {BarGraph};