--- a/src/main/resources/scripts/graph.js Thu Aug 25 10:29:52 2011 -0400
+++ b/src/main/resources/scripts/graph.js Thu Aug 25 11:37:39 2011 -0400
@@ -1,61 +1,106 @@
var Graph = function(){
+ this.graphHeight = 200;
+ this.graphWidth = 500;
+ this.mergin = {
+ 'top':20,
+ 'right':60,
+ 'bottom':20,
+ 'left':20
+ };
+ this.AxisTextMergin = 10;
+
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');
+ this.SN = "http://www.w3.org/2000/svg";
+ this.svg = document.createElementNS(this.SN, 'svg');
+ this.svg.setAttribute('width', this.graphWidth);
+ this.svg.setAttribute('height', this.graphHeight);
//Draw Axis
- var xAxisLine = document.createElementNS(SN,'line');
- xAxisLine.setAttribute('x1','20');
- xAxisLine.setAttribute('x2','20');
- xAxisLine.setAttribute('y1','20');
- xAxisLine.setAttribute('y2','180');
+ var xAxisLine = document.createElementNS(this.SN,'line');
+ xAxisLine.setAttribute('x1',this.mergin.left);
+ xAxisLine.setAttribute('y1',this.graphHeight-this.mergin.bottom);
+ xAxisLine.setAttribute('x2',this.graphWidth-this.mergin.right);
+ xAxisLine.setAttribute('y2',this.graphHeight-this.mergin.bottom);
xAxisLine.setAttribute('stroke','black');
xAxisLine.setAttribute('stroke-width','1');
- svg.appendChild(xAxisLine);
-
+ this.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');
+ var yAxisLine = document.createElementNS(this.SN,'line');
+ yAxisLine.setAttribute('x1',this.mergin.left);
+ yAxisLine.setAttribute('x2',this.mergin.top);
+ yAxisLine.setAttribute('y1',this.mergin.left);
+ yAxisLine.setAttribute('y2',this.graphHeight-this.mergin.bottom);
yAxisLine.setAttribute('stroke','black');
yAxisLine.setAttribute('stroke-width','1');
- svg.appendChild(yAxisLine);
-
+ this.svg.appendChild(yAxisLine);
+
//Axis Text
- var xAxisText = document.createElementNS(SN,'text');
- xAxisText.setAttribute('x','20');
- xAxisText.setAttribute('y','10');
+ var xAxisText = document.createElementNS(this.SN,'text');
+ xAxisText.setAttribute('x',this.mergin.left);
+ xAxisText.setAttribute('y',this.mergin.top - this.AxisTextMergin);
xAxisText.setAttribute("text-anchor","middle");
var xAxisTextNode = document.createTextNode("km/h");
xAxisText.appendChild(xAxisTextNode);
- svg.appendChild(xAxisText);
+ this.svg.appendChild(xAxisText);
- var yAxisText = document.createElementNS(SN,'text');
- yAxisText.setAttribute('x','450');
- yAxisText.setAttribute('y','180');
+ var yAxisText = document.createElementNS(this.SN,'text');
+ yAxisText.setAttribute('x',this.graphWidth - this.mergin.right + this.AxisTextMergin);
+ yAxisText.setAttribute('y',this.graphHeight-this.mergin.bottom);
yAxisText.setAttribute("alignment-baseline","central");
var yAxisTextNode = document.createTextNode("Time");
yAxisText.appendChild(yAxisTextNode);
- svg.appendChild(yAxisText);
+ this.svg.appendChild(yAxisText);
- var speed_graph = document.getElementById("speed_graph");
-
- speed_graph.appendChild(svg);
+ this.speed_graph = document.getElementById("speed_graph");
+ this.speed_graph.appendChild(this.svg);
};
this.drawSpeedGraph = function(jsonData){
- for ( var int = 0; int < jsonData.events.length; int++) {
-
+ //Calculate speed
+ var speedData = [];
+ var topSpeed = 0;
+ var duration = (jsonData.events[jsonData.events.length-1].t - jsonData.events[0].t)/1000;
+ for ( var int = 1; int < jsonData.events.length; int++) {
+ var distance = Util.geo.calculateDistance(jsonData.events[int-1].c[0], jsonData.events[int-1].c[1], jsonData.events[int].c[0], jsonData.events[int].c[1]);
+ var timeSec = (jsonData.events[int].t - jsonData.events[int-1].t)/1000;
+ var elapsedTime = (jsonData.events[int].t - jsonData.events[0].t)/1000;
+ var speed = distance / timeSec * 3600;
+ if (topSpeed < speed) {
+ topSpeed = speed;
+ };
+ speedData.push({
+ 'speed':speed,
+ 'elapsedTime':elapsedTime,
+ });
+ };
+ console.log(speedData);
+ //Plot data
+ for ( var i = 0; i < speedData.length; i++) {
+ var x = speedData[i].elapsedTime / duration * (this.graphWidth-this.mergin.left - this.mergin.right);
+ var y = speedData[i].speed / topSpeed * (this.graphHeight - this.mergin.top - this.mergin.bottom);
+ this.drawPoint(this.svg, x, y, 1);
}
- console.log(jsonData);
};
+ this.drawPoint = function(graph,x,y,size){
+ var pointCoord = this.getAbsoluteCoord(x, y);
+ var point = document.createElementNS(this.SN,'circle');
+ point.setAttribute('r',size);
+ point.setAttribute('cx',pointCoord.x);
+ point.setAttribute('cy',pointCoord.y);
+ graph.appendChild(point);
+ };
+
+ /**
+ * Returns absolute Coord data from x,y based on graph
+ * @returns: int x,int y
+ */
+ this.getAbsoluteCoord = function(x,y){
+ var absoluteY = this.graphHeight - this.mergin.bottom - y;
+ var absoluteX = this.mergin.left + x;
+ return {'x':absoluteX,'y':absoluteY};
+ };
};