From a62ebb1d3554911fbb2c399d7ac9571df92151fc Mon Sep 17 00:00:00 2001
From: Tim Redfern <tim@eclectronics.org>
Date: Mon, 23 Jan 2012 23:40:25 +0000
Subject: graphing multiple

---
 test/when/when.js | 168 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 107 insertions(+), 61 deletions(-)

diff --git a/test/when/when.js b/test/when/when.js
index 4e0e6be..f2e3901 100644
--- a/test/when/when.js
+++ b/test/when/when.js
@@ -16,23 +16,45 @@ aim for today: have a few items that can be chosen
 */
 
 var data,raphael,classOfRange,birthplaces,colleges,locations,fields;
-
 var graphData;
-
 var maxPaths;
-
+var graph,bgGraph;
+var graphs;
+var numYears,gutterX,gutterY,gridX,gridY;
+var startPath;
+	
 window.onload = function() {
 	loadData();
 	createMenu();
 	//alert(document.getElementById("holder").offsetWidth+","+document.getElementById("holder").offsetHeight);
 	//seems predictable, gives same result in chrome, firefox, mobile safari
-	var graph=document.getElementById('graph');
-	raphael = new Raphael(graph, graph.offsetWidth, graph.offsetHeight);
-	drawGraph();
+	var graphDiv=document.getElementById('graph');
+	raphael = new Raphael(graphDiv, graphDiv.offsetWidth, graphDiv.offsetHeight);
+	gutterX=10,
+	gutterY=16;
+	gridX=(raphael.width-(gutterX*2))/numYears;
+	gridY=(raphael.height-(gutterY*2));
+	drawGrid();
+	
+	var color = "hsl(" + [.6, .5, .5] + ")";
+	graph = raphael.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"});
+	bgGraph = raphael.path().attr({stroke: "none", opacity: .3, fill: color});
+	
+	maxPaths=8;
+	graphs=[];
+	startPath=["M", gutterX , raphael.height - gutterY, "L", raphael.width-gutterX, raphael.height - gutterY];
+	for (var i=0;i<maxPaths;i++) {
+		graphs[i]=raphael.path().attr({stroke: Raphael.getColor(), "stroke-width": 4, "stroke-linejoin": "round"});
+		graphs[i].attr({path:startPath});
+		graphs[i].hide();
+	}
+	
+	drawGraph(0,0);
 }
 
 function graphableData(name) {
 	//organises a range of data to graph against a variable value
+	//stores the count of instances for each value
 	this.name=name;
 	this.data={};
 	this.max=0;
@@ -50,6 +72,13 @@ function graphableData(name) {
 	this.getElement = function(element) {
 		if (element in this.data) return data[element]; //returns an associative array
 	}
+	this.getValue = function(element,value) {
+		if (element in this.data) {
+			if (value in this.data[element]) return this.data[element][value]; //returns a value
+			else return 0;
+		}
+		else return 0;
+	}
 	this.summary = function() {
 		var s= ""+name+": "+Object.keys(this.data).length+" elements, max "+this.max+"\n";
 		var k=Object.keys(this.data);
@@ -62,6 +91,9 @@ function graphableData(name) {
 		}
 		return s+"\n";
 	}
+	this.getKeys = function() {
+		return Object.keys(this.data);
+	}
 	
 }
 
@@ -87,28 +119,13 @@ function loadData() {
 	classOfRange={};
 	classOfRange.start=3000;
 	classOfRange.end=0;
-	birthplaces={};
-	colleges={};
-	locations={};
-	for (var i in data) {
-		var year = parseInt(data[i].classOf);
-		classOfRange.start=Math.min(classOfRange.start,year);
-		classOfRange.end=Math.max(classOfRange.end,year);
-		if (data[i].birthplace in birthplaces) birthplaces[data[i].birthplace]++;
-		else birthplaces[data[i].birthplace]=1;
-		if (data[i].college in colleges) colleges[data[i].college]++;
-		else colleges[data[i].college]=1;
-		if (data[i].location in locations) locations[data[i].location]++;
-		else locations[data[i].location]=1;
-	}
-	
-	var numYears=(classOfRange.end-classOfRange.start);
-	
 	//prepare all data for graphing
 	graphData={};
 	for (i in fields) graphData[fields[i]]=new graphableData(fields[i]);
 	for (var i in data) {
-		var yearField
+		var year = parseInt(data[i].classOf);
+		classOfRange.start=Math.min(classOfRange.start,year);
+		classOfRange.end=Math.max(classOfRange.end,year);
 		for (j in fields) {
 			if (fields[j]=="Class size") {
 				graphData[fields[j]].addElement("Class size",parseInt(data[i].classOf));
@@ -116,51 +133,53 @@ function loadData() {
 			else	graphData[fields[j]].addElement(data[i][fieldNames[j]],parseInt(data[i].classOf));
 		}
 	}
-		
-	///* test
+	
+	numYears=(classOfRange.end-classOfRange.start);
+
+	/* test
 	var message="from "+classOfRange.start+" to "+classOfRange.end+"\n";
 	for (var i in graphData) message+=graphData[i].summary();
 	alert(message);
-	//*/
+	*/
 }
 
-function drawGraph() {
-	var color = "hsl(" + [.6, .5, .5] + ")";
-	var numYears=(classOfRange.end-classOfRange.start);
-	var 	gutterX=10,
-		gutterY=16;
-	//draw grid
-	var gridX=(raphael.width-(gutterX*2))/numYears;
-	var gridY=(raphael.height-(gutterY*2));
+function drawGrid() {
+
 	raphael.drawGrid(gutterX, gutterY, raphael.width-(gutterX*2), raphael.height -(gutterY*2), numYears, 10, "#000");
 	//label axis
 	var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
 	for (var i=0;i<=numYears;i++) raphael.text(gutterX+(i*gridX),raphael.height-gutterY+8,classOfRange.start+i).attr(txt).toBack();
+	
+}
+
+function createMenu() {
+	var menu="<select id='select' onchange='drawGraph(this.selectedIndex,1000)'>\n";
+	for (i in fields) menu+="<option>"+fields[i]+"</option>/n";
+	menu+="</select>\n";
+	document.getElementById("menus").innerHTML=menu;	
+}
+
+function drawOneGraph(which,time){
+	var datum=fields[which];
+	var datelem=graphData[datum].getKeys()[0];	
+	
+	//draw 1 or multiple graphs. animate between items
+	//maximum number of graphs
 	//construct graph
-	var graph = raphael.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
-	bgGraph = raphael.path().attr({stroke: "none", opacity: .3, fill: color});
-	//default graph is 'Class size'
-	//find largest class
-	var classSize=[];
-	for (var i=0;i<=numYears;i++) classSize[i]=0;
-	for (var i in data) {
-		classSize[parseInt(data[i].classOf)-classOfRange.start]++;
-	}
-	var classMax=0;
-	for (var i in classSize) classMax=Math.max(classMax,classSize[i]);
+
 	var path,bgPath;
-	var stepY=(gridY/classMax);
+	var stepY=(gridY/graphData[datum].max);
 	for (var i=0;i<=numYears;i++) {
 		var 	x=gutterX+(i*gridX),
-			y=raphael.height-gutterY-(stepY*classSize[i]);
+			y=raphael.height-gutterY-(stepY*graphData[datum].getValue(datelem,i+classOfRange.start));
 		if (!i) {
 			path=["M",x,y,"C",x,y];
 			bgPath=["M", gutterX , raphael.height - gutterY, "L", x, y, "C", x, y];
 		}
 		if (i&&i<numYears-1) {
-			var Y0 = Math.round(raphael.height - gutterY -  (stepY*classSize[i-1])),
+			var Y0 = Math.round(raphael.height - gutterY -  (stepY*graphData[datum].getValue(datelem,i+classOfRange.start-1))),
 			X0 = Math.round(gutterX + (gridX * (i - .5))),
-			Y2 = Math.round(raphael.height - gutterY -  (stepY*classSize[i+1])),
+			Y2 = Math.round(raphael.height - gutterY -  (stepY*graphData[datum].getValue(datelem,i+classOfRange.start+1))),
 			X2 = Math.round(gutterX + (gridX * (i + 1.5)));
 			var a = getAnchors(X0, Y0, x, y, X2, Y2);
 			path = path.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
@@ -169,19 +188,46 @@ function drawGraph() {
 	}
 	path = path.concat([x, y, x, y]);
 	bgPath = bgPath.concat([x, y, x, y, "L", x, raphael.height - gutterY, "z"]);
-	graph.attr({path: path});
-	bgGraph.attr({path: bgPath});
-}
-
-function createMenu() {
-	var menu="<select id='select' onchange='doGraph(this.selectedIndex)'>\n";
-	for (i in fields) menu+="<option>"+fields[i]+"</option>/n";
-	menu+="</select>\n";
-	document.getElementById("menus").innerHTML=menu;	
+	graph.animate({path: path},time,'easeIn');
+	bgGraph.animate({path: bgPath},time,'easeIn');
 }
 
-function doGraph(which){
+function drawGraph(which,time){
+	var datum=fields[which];
+	var keys=graphData[datum].getKeys();	
+	
 	//draw 1 or multiple graphs. animate between items
 	//maximum number of graphs
-	alert(fields[which]);
+	//construct graph
+
+	var paths=[];
+	var stepY=(gridY/graphData[datum].max);
+	for (var k in keys) {
+		for (var i=0;i<=numYears;i++) {
+			var 	x=gutterX+(i*gridX),
+				y=raphael.height-gutterY-(stepY*graphData[datum].getValue(keys[k],i+classOfRange.start));
+			if (!i) {
+				paths[k]=["M",x,y,"C",x,y];
+			}
+			if (i&&i<numYears-1) {
+				var Y0 = Math.round(raphael.height - gutterY -  (stepY*graphData[datum].getValue(keys[k],i+classOfRange.start-1))),
+				X0 = Math.round(gutterX + (gridX * (i - .5))),
+				Y2 = Math.round(raphael.height - gutterY -  (stepY*graphData[datum].getValue(keys[k],i+classOfRange.start+1))),
+				X2 = Math.round(gutterX + (gridX * (i + 1.5)));
+				var a = getAnchors(X0, Y0, x, y, X2, Y2);
+				paths[k] = paths[k].concat([a.x1, a.y1, x, y, a.x2, a.y2]);
+			}
+		}
+		paths[k] = paths[k].concat([x, y, x, y]);
+	}
+	for (var i=0;i<maxPaths;i++) {
+		if (i<=k) {
+			graphs[i].show();
+			graphs[i].animate({path: paths[i]},time,'easeIn');
+		}
+		else {
+			graphs[i].hide();
+			graphs[i].attr({path:startPath});
+		}
+	}
 }
-- 
cgit v1.2.3