--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/scripts/graph.js Thu Aug 25 10:29:52 2011 -0400
@@ -0,0 +1,61 @@
+var Graph = function(){
+
+ this.init = function(){
+ var SN = "http://www.w3.org/2000/svg";
+ var root = document.getElementById('graph');
+ var svg = document.createElementNS(SN, 'svg');
+ svg.setAttribute('width', '500');
+ svg.setAttribute('height', '200');
+
+ //Draw Axis
+ var xAxisLine = document.createElementNS(SN,'line');
+ xAxisLine.setAttribute('x1','20');
+ xAxisLine.setAttribute('x2','20');
+ xAxisLine.setAttribute('y1','20');
+ xAxisLine.setAttribute('y2','180');
+ xAxisLine.setAttribute('stroke','black');
+ xAxisLine.setAttribute('stroke-width','1');
+ svg.appendChild(xAxisLine);
+
+
+ var yAxisLine = document.createElementNS(SN,'line');
+ yAxisLine.setAttribute('x1','20');
+ yAxisLine.setAttribute('x2','440');
+ yAxisLine.setAttribute('y1','180');
+ yAxisLine.setAttribute('y2','180');
+ yAxisLine.setAttribute('stroke','black');
+ yAxisLine.setAttribute('stroke-width','1');
+ svg.appendChild(yAxisLine);
+
+ //Axis Text
+ var xAxisText = document.createElementNS(SN,'text');
+ xAxisText.setAttribute('x','20');
+ xAxisText.setAttribute('y','10');
+ xAxisText.setAttribute("text-anchor","middle");
+ var xAxisTextNode = document.createTextNode("km/h");
+ xAxisText.appendChild(xAxisTextNode);
+ svg.appendChild(xAxisText);
+
+
+ var yAxisText = document.createElementNS(SN,'text');
+ yAxisText.setAttribute('x','450');
+ yAxisText.setAttribute('y','180');
+ yAxisText.setAttribute("alignment-baseline","central");
+ var yAxisTextNode = document.createTextNode("Time");
+ yAxisText.appendChild(yAxisTextNode);
+ svg.appendChild(yAxisText);
+
+ var speed_graph = document.getElementById("speed_graph");
+
+ speed_graph.appendChild(svg);
+
+ };
+
+ this.drawSpeedGraph = function(jsonData){
+ for ( var int = 0; int < jsonData.events.length; int++) {
+
+ }
+ console.log(jsonData);
+ };
+
+};
--- a/src/main/resources/templates/index.html Wed Aug 24 17:54:23 2011 -0400
+++ b/src/main/resources/templates/index.html Thu Aug 25 10:29:52 2011 -0400
@@ -11,6 +11,8 @@
<script src="../scripts/Utils.js" type="text/javascript"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<!--<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>-->
+ <script src="../scripts/Utils.js" type="text/javascript"></script>
+ <script src="../scripts/graph.js" type="text/javascript"></script>
<script type="text/javascript">
var OLMap = {
@@ -93,60 +95,10 @@
OLMap.addTrail("Aug-10-11.gpx","red");
OLMap.centerMap(workoutJson.events);
- initGraphs();
+ var graph = new Graph();
+ graph.init();
+ graph.drawSpeedGraph(jsonData);
}
-
- function initGraphs() {
- var SN = "http://www.w3.org/2000/svg";
- var root = document.getElementById('graph');
- var svg = document.createElementNS(SN, 'svg');
- svg.setAttribute('width', '500');
- svg.setAttribute('height', '200');
-
- //Draw Axis
- var xAxisLine = document.createElementNS(SN,'line');
- xAxisLine.setAttribute('x1','20');
- xAxisLine.setAttribute('x2','20');
- xAxisLine.setAttribute('y1','20');
- xAxisLine.setAttribute('y2','180');
- xAxisLine.setAttribute('stroke','black');
- xAxisLine.setAttribute('stroke-width','1');
- svg.appendChild(xAxisLine);
-
-
- var yAxisLine = document.createElementNS(SN,'line');
- yAxisLine.setAttribute('x1','20');
- yAxisLine.setAttribute('x2','440');
- yAxisLine.setAttribute('y1','180');
- yAxisLine.setAttribute('y2','180');
- yAxisLine.setAttribute('stroke','black');
- yAxisLine.setAttribute('stroke-width','1');
- svg.appendChild(yAxisLine);
-
- //Axis Text
- var xAxisText = document.createElementNS(SN,'text');
- xAxisText.setAttribute('x','20');
- xAxisText.setAttribute('y','10');
- xAxisText.setAttribute("text-anchor","middle");
- var xAxisTextNode = document.createTextNode("km/h");
- xAxisText.appendChild(xAxisTextNode);
- svg.appendChild(xAxisText);
-
-
- var yAxisText = document.createElementNS(SN,'text');
- yAxisText.setAttribute('x','450');
- yAxisText.setAttribute('y','180');
- yAxisText.setAttribute("alignment-baseline","central");
- var yAxisTextNode = document.createTextNode("Time");
- yAxisText.appendChild(yAxisTextNode);
- svg.appendChild(yAxisText);
-
- var speed_graph = document.getElementById("speed_graph");
-
- speed_graph.appendChild(svg);
- }
-
-
</script>