diff modules/web_view/graph.html @ 25:05e5441c5160

charts will now be displayed as they should!
author sean
date Fri, 14 Aug 2015 00:31:48 +0200
parents f730dd0bcf85
children d7856a645ea8
line wrap: on
line diff
--- a/modules/web_view/graph.html	Thu Aug 13 16:34:46 2015 +0200
+++ b/modules/web_view/graph.html	Fri Aug 14 00:31:48 2015 +0200
@@ -2,16 +2,16 @@
 
 	* {
 		font-family: "Sans-serif";
-		font-size: 14px;
+		/*font-size: 20px;*/
 	}
 
 	.svg div{
-			font: 10px;
-			text-align: right;
-			float: left;
-			display: block;
-			padding: 10px;
-			margin: 10px;
+			/*font: 10px;*/
+			/*text-align: right;*/
+			/*float: left;*/
+			/*display: block;*/
+			/*padding: 10px;*/
+			/*margin: 10px;*/
 			color: white;
 	}
 
@@ -21,7 +21,7 @@
 			fill: none;
 			stroke: lightgrey;
 			/*opacity: 0.7;*/
-			stroke-width: 1px;
+			/*stroke-width: 1px;*/
 	}
 
 	.y.axis path {
@@ -30,7 +30,7 @@
 
 	.line {
 			fill: none;
-			stroke-width: 3px;
+			stroke-width: 4px;
 			opacity: 1;
 	}
 
@@ -217,11 +217,10 @@
 
 
 	//append a svg_path. pretty generic
-	function draw_line(svg, data_array, css_class, line_object, lineShape){
+	function draw_line(svg, data_array, css_class, line_object){
 		svg.append("path")
 			.datum(assignIssueToDate(data_array, timestamp))
 			.attr("class", css_class)
-			.style("stroke-dasharray", (lineShape))
 			.attr("d", line_object);
 	}
 
@@ -272,14 +271,13 @@
 	function makeChart(div_name){
 
 		//declaration
-		var sizeOfSystemBorders = 20;
-		// var margin = {top: 20, right: 100, bottom: 90, left: 60};
-		// var margin = {top: 0, right: 0, bottom: 0, left: 0}
+		var targetDiv = document.getElementById(d3jsInjectionTarget)
+		// var sizeOfSystemBorders = 20;
 
-		var width = document.getElementsByClassName("chart")[0].clientWidth;
-		var height = document.getElementsByClassName("chart")[0].clientHeight;
-		// var	width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right;
-		// var	height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
+		var margin = {top: 20, right: 10, bottom: 50, left:50}
+
+		var width = targetDiv.clientWidth - margin.left - margin.right
+		var height = targetDiv.clientHeight - margin.top - margin.bottom
 
 		var x = d3.time.scale()
 			.range([0, width]);
@@ -313,28 +311,20 @@
 		var xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
-			.ticks(limitDatesOnXAxis(10))
+			.ticks(limitDatesOnXAxis(4))
 			.tickFormat(d3.time.format("%d.%m"));
-			// .tickFormat(d3.time.format("%d.%m:%H:%M"));
-			// .tickFormat(d3.time.format("%X"));
-			// .tickFormat(d3.time.format.iso);
-
 
 		var yAxis = d3.svg.axis()
 			.scale(y)
 			.orient("left");
 
-
-		var svg = d3.select("." + d3jsInjectionTarget)
+		var svg = d3.select("#" + d3jsInjectionTarget)
 			.append("svg")
 			.attr("class", "svg")
-			// .attr("width", width)
-			// .attr("height", height)
-			.attr("width", width-20)
-			.attr("height", height-10)
+			.attr("width", width + margin.left + margin.right)
+			.attr("height", height + margin.top + margin.bottom)
 			.append("g")
-			// .attr("transform", "translate( +50,+0,+0,+0)");
-			.attr("transform", "translate(40 , 0)");
+			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 
 		// creation
@@ -363,9 +353,10 @@
 		svg.append("g")
 			.attr("class", "x axis")
 			// .attr("transform", "translate(0, " + 20-height + ")")
+			.attr("transform", "translate(0," + height + ")")
 			.call(xAxis)
 			.selectAll("text")
-			.style("text-anchor", "end")
+			// .style("text-anchor", "end")
 			// .attr("dx", "-.5em")
 			// .attr("dy", ".1em")
 			// .attr("transform", function() {
@@ -379,8 +370,8 @@
 			.call(yAxis)
 			.append("text")
 			.attr("transform", "rotate(-90)")
-			.attr("y", 6)
-			.attr("dy", ".71em")
+			// .attr("y", 6)
+			// .attr("dy", ".71em")
 			.style("text-anchor", "end");
 
 
@@ -401,11 +392,11 @@
 		// 	.attr("y", -5)
 		// 	.text("Issues Nach Zeit");
 
-		draw_line(svg, wish, "line wish", wishLine, "0, 0");
-		draw_line(svg, feature, "line feature", featureLine, "3, 3");
-		draw_line(svg, bug, "line bug", bugLine, "7, 7");
-		draw_line(svg, urgent, "line urgent", urgentLine, "13, 13");
-		draw_line(svg, critical, "line critical", criticalLine, "17, 17");
+		draw_line(svg, wish, "line wish", wishLine);
+		draw_line(svg, feature, "line feature", featureLine);
+		draw_line(svg, bug, "line bug", bugLine);
+		draw_line(svg, urgent, "line urgent", urgentLine);
+		draw_line(svg, critical, "line critical", criticalLine);
 
 
 		// makeLegend(svg, width);
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)