Adds HTML file. Will convert over to JS at some point, but this works…

…. You just need to give it a dataset (an array of arrays).
charliepark · Jul 4, 2011 · 54bf22b · 54bf22b
1 parent 0e994d6
commit 54bf22b
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/slopegraph.html b/slopegraph.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Slopegraph.js</title>
+		<style type="text/css">
+		</style>
+		<script type="text/javascript">
+		var dataset=[[10, 100], [430, 441], [103, 89], [228, 62], [393, 258], [250, 167], [290, 322], [480, 17], [94, 27], [116, 163]]
+		var widthOfCanvas = '500';
+		var heightOfCanvas = dataset.join().split(',').sort(function(a,b){return b - a})[0];
+			window.onload = function() {
+				var drawingCanvas = document.getElementById('slopegraph');
+				drawingCanvas.setAttribute('width', widthOfCanvas);
+				drawingCanvas.setAttribute('height', heightOfCanvas);
+				if(drawingCanvas && drawingCanvas.getContext) {
+					var context = drawingCanvas.getContext('2d');
+					context.strokeStyle = "#ccc";
+					function chart(leftValue, rightValue){
+						context.moveTo(0,leftValue);
+						context.lineTo(widthOfCanvas, rightValue);
+						context.stroke();
+					};
+					for each (var value in dataset) {
+						chart(value[0], value[1]);
+					};
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<canvas id="slopegraph">
+			<p>Your browser doesn't support canvas. Firefox and Chrome do, though.</p>
+		</canvas>
+	</body>
+</html>