Mercurial > bottledash
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);