working with multi graphsHEADmaster

1 files changed, 29 insertions, 7 deletions

diff --git a/test/when/when.js b/test/when/when.js
index f2e3901..17307bd 100644
--- a/test/when/when.js
+++ b/test/when/when.js
@@ -19,9 +19,10 @@ var data,raphael,classOfRange,birthplaces,colleges,locations,fields;
 var graphData;
 var maxPaths;
 var graph,bgGraph;
-var graphs;
+var graphs,labels,axislabels;
 var numYears,gutterX,gutterY,gridX,gridY;
 var startPath;
+
 	
 window.onload = function() {
 	loadData();
@@ -30,8 +31,8 @@ window.onload = function() {
 	//seems predictable, gives same result in chrome, firefox, mobile safari
 	var graphDiv=document.getElementById('graph');
 	raphael = new Raphael(graphDiv, graphDiv.offsetWidth, graphDiv.offsetHeight);
-	gutterX=10,
-	gutterY=16;
+	gutterX=20,
+	gutterY=40;
 	gridX=(raphael.width-(gutterX*2))/numYears;
 	gridY=(raphael.height-(gutterY*2));
 	drawGrid();
@@ -42,13 +43,25 @@ window.onload = function() {
 	
 	maxPaths=8;
 	graphs=[];
+	labels=[];
 	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"});
+		var col=Raphael.getColor();
+		graphs[i]=raphael.path().attr({stroke: col, "stroke-width": 4, "stroke-linejoin": "round"});
 		graphs[i].attr({path:startPath});
 		graphs[i].hide();
+		var txt = {font: '16px Helvetica, Arial', fill: col, 'text-anchor': 'start'};
+		labels[i]=raphael.text((((raphael.width-gutterX)/(maxPaths+1))*i)+gutterX, raphael.height-gutterY+26, "").attr(txt);
+		labels[i].hide();
+	}
+	axislabels=[];
+	for (var i=0;i<2;i++) {
+		var txt = {font: '12px Helvetica, Arial', fill: '#fff'};
+		axislabels[i]=raphael.text(5, raphael.height-(gutterY+(((raphael.height-(gutterY*2))/1)*i)), "").attr(txt);
 	}
 	
+	
 	drawGraph(0,0);
 }
 
@@ -207,9 +220,10 @@ function drawGraph(which,time){
 			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];
+				paths[k]=["M",x,y,"L"]; //,"C",x,y];
 			}
-			if (i&&i<numYears-1) {
+			else paths[k] = paths[k].concat([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))),
@@ -217,17 +231,25 @@ function drawGraph(which,time){
 				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]);
+		//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');
+			labels[i].show().attr({text:keys[i]});
+			labels[i].show();
 		}
 		else {
 			graphs[i].hide();
 			graphs[i].attr({path:startPath});
+			labels[i].hide();
 		}
 	}
+	for (var i=0;i<2;i++) {
+		var txt = {font: '12px Helvetica, Arial', fill: '#fff'};
+		axislabels[i].attr({text:(graphData[datum].max*i).toString()});
+	}
 }