Scatter point origin

build/escher.js

@@ -4413,9 +4413,9 @@
 		this.strokeStyle = new ColorStyle("rgb(0, 153, 255)");
 
 		/**
-		 * Line width.
+		 * Line width used to stroke the graph data.
 		 */
-		this.lineWidth = 1;
+		this.lineWidth = 1.0;
 
 		/**
 		 * Background color of the box.
@@ -4461,7 +4461,6 @@
 		var height = this.box.max.y - this.box.min.y;
 
 		context.lineWidth = this.lineWidth;
-
 		context.beginPath();
 				
 		var step = width / (this.data.length - 1);
@@ -4530,7 +4529,7 @@
 		/**
 		 * Radius of each point represented in the scatter plot.
 		 */
-		this.radius = 1.0;
+		this.radius = 5.0;
 	}
 
 	ScatterGraph.prototype = Object.create(Graph.prototype);
@@ -4551,13 +4550,14 @@
 		var step = width / (this.data.length - 1);
 		var gamma = this.max - this.min;
 
+		context.lineWidth = this.lineWidth;
 		context.beginPath();
 
-		for(var i = 0, s = step; i < this.data.length; s += step, i++)
+		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.moveTo(this.box.min.x + s + this.radius, y);
 			context.arc(this.box.min.x + s, y, this.radius, 0, Math.PI * 2, true);
 		}
 

examples/charts.html

@@ -58,9 +58,9 @@
 		group.add(graph);
 
 		Escher.Helpers.boxResizeTool(graph);
-		for(var i = 0; i < 300; i++)
+		for(var i = 0; i < 100; i++)
 		{
-			graph.data.push(Math.random() * 9 + 1);
+			graph.data.push((Math.cos(i / 3) + 1) * 3);
 		}
 
 		var viewport = new Escher.Viewport(canvas);

source/objects/chart/BarGraph.js

@@ -23,8 +23,34 @@ BarGraph.prototype.draw = function(context, viewport, canvas)
 		return;
 	}
 	
+	var width = this.box.max.x - this.box.min.x;
+	var height = this.box.max.y - this.box.min.y;
 
-	// TODO <ADD CODE HERE>
+	var step = width / (this.data.length - 1);
+	var gamma = this.max - this.min;
+
+	context.lineWidth = this.lineWidth;
+	context.beginPath();
+
+	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);
+	}
+
+	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)

source/objects/chart/ScatterGraph.js

@@ -38,11 +38,11 @@ ScatterGraph.prototype.draw = function(context, viewport, canvas)
 	context.lineWidth = this.lineWidth;
 	context.beginPath();
 
-	for(var i = 0, s = step; i < this.data.length; s += step, i++)
+	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.moveTo(this.box.min.x + s + this.radius, y);
 		context.arc(this.box.min.x + s, y, this.radius, 0, Math.PI * 2, true);
 	}