Scatter graph

build/escher.js

@@ -4391,9 +4391,9 @@
 	};
 
 	/**
-	 * Graph object is used to draw simple graph data into the canvas.
+	 * Graph object is used to plot numeric graph data into the canvas.
 	 *
-	 * Graph data is composed of X, Y values.
+	 * Graph data is composed of Y values that are interpolated across the X axis.
 	 *
 	 * @class
 	 * @extends {Object2D}
@@ -4461,9 +4461,9 @@
 		var height = this.box.max.y - this.box.min.y;
 
 		context.lineWidth = this.lineWidth;
-		context.strokeStyle = this.strokeStyle.get(context);
+
 		context.beginPath();
-			
+				
 		var step = width / (this.data.length - 1);
 		var gamma = this.max - this.min;
 
@@ -4474,12 +4474,15 @@
 			context.lineTo(this.box.min.x + s, this.box.max.y - ((this.data[i] - this.min) / gamma) * height);
 		}
 
-		context.stroke();
+		if(this.strokeStyle !== null)
+		{
+			context.strokeStyle = this.strokeStyle.get(context);
+			context.stroke();
+		}
 
 		if(this.fillStyle !== null)
 		{
 			context.fillStyle = this.fillStyle.get(context);
-
 			context.lineTo(this.box.max.x, this.box.max.y);
 			context.lineTo(this.box.min.x, this.box.max.y);
 			context.fill();
@@ -4514,6 +4517,79 @@
 		this.data = data.data;
 	};
 
+	/**
+	 * Scatter graph can be used to draw numeric data as points.
+	 *
+	 * @class
+	 * @extends {Object2D}
+	 */
+	function ScatterGraph()
+	{
+		Graph.call(this);
+
+		/**
+		 * Radius of each point represented in the scatter plot.
+		 */
+		this.radius = 1.0;
+	}
+
+	ScatterGraph.prototype = Object.create(Graph.prototype);
+	ScatterGraph.prototype.constructor = ScatterGraph;
+	ScatterGraph.prototype.type = "BarGraph";
+	Object2D.register(ScatterGraph, "BarGraph");
+
+	ScatterGraph.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.beginPath();
+
+		for(var i = 0, s = step; 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.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();
+		}
+	};
+
+	ScatterGraph.prototype.serialize = function(recursive)
+	{
+		var data = Graph.prototype.serialize.call(this, recursive);
+
+		data.radius = this.radius;
+
+		return data;
+	};
+
+	ScatterGraph.prototype.parse = function(data, root)
+	{
+		Graph.prototype.parse.call(this, data, root);
+
+		this.radius = data.radius;
+	};
+
 	/**
 	 * Gradient color stop is used to create the gradients by their color sections.
 	 *
@@ -5957,6 +6033,7 @@
 	exports.RadialGradientStyle = RadialGradientStyle;
 	exports.Renderer = Renderer;
 	exports.RoundedBox = RoundedBox;
+	exports.ScatterGraph = ScatterGraph;
 	exports.Style = Style$1;
 	exports.Text = Text;
 	exports.UUID = UUID;

examples/charts.html

@@ -39,6 +39,20 @@
 		graph.box.min.set(-500, -50);
 		graph.box.max.set(500, 50);
 		graph.position.set(300, 400);
+		graph.strokeStyle = null;
+		graph.draggable = true;
+		group.add(graph);
+
+		Escher.Helpers.boxResizeTool(graph);
+		for(var i = 0; i < 300; i++)
+		{
+			graph.data.push(Math.random() * 9 + 1);
+		}
+
+		var graph = new Escher.ScatterGraph();
+		graph.box.min.set(-500, -50);
+		graph.box.max.set(500, 50);
+		graph.position.set(800, 600);
 		graph.draggable = true;
 		group.add(graph);
 

source/Escher.js

@@ -25,6 +25,7 @@ export {BezierCurve} from "./objects/BezierCurve.js";
 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 {Gauge} from "./objects/chart/Gauge.js";
 
 export {Style} from "./objects/style/Style.js";

source/objects/chart/BarGraph.js

@@ -0,0 +1,43 @@
+import {Object2D} from "../../Object2D.js";
+
+/**
+ * Bar graph can be used to plot bar data into the canvas.
+ *
+ * @class
+ * @extends {Object2D}
+ */
+function BarGraph()
+{
+	Graph.call(this);
+}
+
+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;
+	}
+	
+
+	// TODO <ADD CODE HERE>
+};
+
+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);
+};
+
+
+export {BarGraph};

source/objects/chart/Graph.js

@@ -4,9 +4,9 @@ import {Box2} from "../../math/Box2.js";
 import {ColorStyle} from "../style/ColorStyle";
 
 /**
- * Graph object is used to draw simple graph data into the canvas.
+ * Graph object is used to plot numeric graph data into the canvas.
  *
- * Graph data is composed of X, Y values.
+ * Graph data is composed of Y values that are interpolated across the X axis.
  *
  * @class
  * @extends {Object2D}
@@ -74,9 +74,9 @@ Graph.prototype.draw = function(context, viewport, canvas)
 	var height = this.box.max.y - this.box.min.y;
 
 	context.lineWidth = this.lineWidth;
-	context.strokeStyle = this.strokeStyle.get(context);
+
 	context.beginPath();
-		
+			
 	var step = width / (this.data.length - 1);
 	var gamma = this.max - this.min;
 
@@ -87,12 +87,15 @@ Graph.prototype.draw = function(context, viewport, canvas)
 		context.lineTo(this.box.min.x + s, this.box.max.y - ((this.data[i] - this.min) / gamma) * height);
 	}
 
-	context.stroke();
+	if(this.strokeStyle !== null)
+	{
+		context.strokeStyle = this.strokeStyle.get(context);
+		context.stroke();
+	}
 
 	if(this.fillStyle !== null)
 	{
 		context.fillStyle = this.fillStyle.get(context);
-
 		context.lineTo(this.box.max.x, this.box.max.y);
 		context.lineTo(this.box.min.x, this.box.max.y);
 		context.fill();

source/objects/chart/ScatterGraph.js

@@ -0,0 +1,77 @@
+import {Object2D} from "../../Object2D.js";
+import {Graph} from "./Graph.js";
+
+/**
+ * Scatter graph can be used to draw numeric data as points.
+ *
+ * @class
+ * @extends {Object2D}
+ */
+function ScatterGraph()
+{
+	Graph.call(this);
+
+	/**
+	 * Radius of each point represented in the scatter plot.
+	 */
+	this.radius = 1.0;
+}
+
+ScatterGraph.prototype = Object.create(Graph.prototype);
+ScatterGraph.prototype.constructor = ScatterGraph;
+ScatterGraph.prototype.type = "BarGraph";
+Object2D.register(ScatterGraph, "BarGraph");
+
+ScatterGraph.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.beginPath();
+
+	for(var i = 0, s = step; 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.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();
+	}
+};
+
+ScatterGraph.prototype.serialize = function(recursive)
+{
+	var data = Graph.prototype.serialize.call(this, recursive);
+
+	data.radius = this.radius;
+
+	return data;
+};
+
+ScatterGraph.prototype.parse = function(data, root)
+{
+	Graph.prototype.parse.call(this, data, root);
+
+	this.radius = data.radius;
+};
+
+export {ScatterGraph};