Mercurial > roundup-cc

annotate graph.html @ 11:f198a92dd37f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Do not render vertical grid lines
author Gernot Schulz <gernot@intevation.de>
date Thu, 03 Dec 2015 12:09:23 +0100
parents 2df45f6ecd81
children 3bb3d9a9f1b7
rev   line source
0
3f139db894f1 initial commit
sean
parents:
diff changeset
1 <!DOCTYPE html>
3f139db894f1 initial commit
sean
parents:
diff changeset
2 <html>
3f139db894f1 initial commit
sean
parents:
diff changeset
3 <head>
3f139db894f1 initial commit
sean
parents:
diff changeset
4 <title> Issues </title>
3f139db894f1 initial commit
sean
parents:
diff changeset
5 <style type = text/css>
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
6
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
7 * {
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
8 font-family: "Sans-serif";
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
9 font-size: 14px;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
10 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
11
0
3f139db894f1 initial commit
sean
parents:
diff changeset
12 .svg div{
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
13 font: 10px;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
14 text-align: right;
3f139db894f1 initial commit
sean
parents:
diff changeset
15 float: left;
3f139db894f1 initial commit
sean
parents:
diff changeset
16 display: block;
3f139db894f1 initial commit
sean
parents:
diff changeset
17 padding: 10px;
3f139db894f1 initial commit
sean
parents:
diff changeset
18 margin: 10px;
3f139db894f1 initial commit
sean
parents:
diff changeset
19 color: white;
3f139db894f1 initial commit
sean
parents:
diff changeset
20 }
3f139db894f1 initial commit
sean
parents:
diff changeset
21
3f139db894f1 initial commit
sean
parents:
diff changeset
22 .axis path,
3f139db894f1 initial commit
sean
parents:
diff changeset
23
3f139db894f1 initial commit
sean
parents:
diff changeset
24 .axis line {
3f139db894f1 initial commit
sean
parents:
diff changeset
25 fill: none;
3f139db894f1 initial commit
sean
parents:
diff changeset
26 stroke: black;
3f139db894f1 initial commit
sean
parents:
diff changeset
27 stroke-width: 1px;
3f139db894f1 initial commit
sean
parents:
diff changeset
28 }
3f139db894f1 initial commit
sean
parents:
diff changeset
29
3f139db894f1 initial commit
sean
parents:
diff changeset
30 .line {
3f139db894f1 initial commit
sean
parents:
diff changeset
31 fill: none;
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
32 stroke-width: 3px;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
33 opacity: 1;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
34 }
3f139db894f1 initial commit
sean
parents:
diff changeset
35
3f139db894f1 initial commit
sean
parents:
diff changeset
36 .line.critical {
3f139db894f1 initial commit
sean
parents:
diff changeset
37 stroke: red;
3f139db894f1 initial commit
sean
parents:
diff changeset
38 }
3f139db894f1 initial commit
sean
parents:
diff changeset
39
3f139db894f1 initial commit
sean
parents:
diff changeset
40 .line.critical.legend {
3f139db894f1 initial commit
sean
parents:
diff changeset
41 fill: red;
3f139db894f1 initial commit
sean
parents:
diff changeset
42 }
3f139db894f1 initial commit
sean
parents:
diff changeset
43
3f139db894f1 initial commit
sean
parents:
diff changeset
44 .line.urgent {
3f139db894f1 initial commit
sean
parents:
diff changeset
45 stroke: orange;
3f139db894f1 initial commit
sean
parents:
diff changeset
46 }
3f139db894f1 initial commit
sean
parents:
diff changeset
47
3f139db894f1 initial commit
sean
parents:
diff changeset
48 .line.urgent.legend {
3f139db894f1 initial commit
sean
parents:
diff changeset
49 fill: orange;
3f139db894f1 initial commit
sean
parents:
diff changeset
50 }
3f139db894f1 initial commit
sean
parents:
diff changeset
51
3f139db894f1 initial commit
sean
parents:
diff changeset
52 .line.bug {
3f139db894f1 initial commit
sean
parents:
diff changeset
53 stroke: violet;
3f139db894f1 initial commit
sean
parents:
diff changeset
54 }
3f139db894f1 initial commit
sean
parents:
diff changeset
55
3f139db894f1 initial commit
sean
parents:
diff changeset
56 .line.bug.legend {
3f139db894f1 initial commit
sean
parents:
diff changeset
57 fill: violet;
3f139db894f1 initial commit
sean
parents:
diff changeset
58 }
3f139db894f1 initial commit
sean
parents:
diff changeset
59
3f139db894f1 initial commit
sean
parents:
diff changeset
60 .line.feature {
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
61 stroke: chartreuse;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
62 style: stroke-dasharray;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
63 }
3f139db894f1 initial commit
sean
parents:
diff changeset
64
3f139db894f1 initial commit
sean
parents:
diff changeset
65 .line.feature.legend {
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
66 fill: chartreuse;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
67 }
3f139db894f1 initial commit
sean
parents:
diff changeset
68
3f139db894f1 initial commit
sean
parents:
diff changeset
69 .line.wish {
3f139db894f1 initial commit
sean
parents:
diff changeset
70 stroke: blue;
3f139db894f1 initial commit
sean
parents:
diff changeset
71 }
3f139db894f1 initial commit
sean
parents:
diff changeset
72
3f139db894f1 initial commit
sean
parents:
diff changeset
73 .line.wish.legend {
3f139db894f1 initial commit
sean
parents:
diff changeset
74 fill: blue;
3f139db894f1 initial commit
sean
parents:
diff changeset
75 }
3f139db894f1 initial commit
sean
parents:
diff changeset
76
3f139db894f1 initial commit
sean
parents:
diff changeset
77 .grid .tick {
3f139db894f1 initial commit
sean
parents:
diff changeset
78 stroke: lightgrey;
3f139db894f1 initial commit
sean
parents:
diff changeset
79 opacity: 0.7;
3f139db894f1 initial commit
sean
parents:
diff changeset
80 }
3f139db894f1 initial commit
sean
parents:
diff changeset
81
3f139db894f1 initial commit
sean
parents:
diff changeset
82 .grid path {
3f139db894f1 initial commit
sean
parents:
diff changeset
83 stroke-width: 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
84 }
3f139db894f1 initial commit
sean
parents:
diff changeset
85
3f139db894f1 initial commit
sean
parents:
diff changeset
86 </style>
3f139db894f1 initial commit
sean
parents:
diff changeset
87 </head>
3f139db894f1 initial commit
sean
parents:
diff changeset
88 <body>
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
89 <div id="content" style="display: inline-block"></div>
0
3f139db894f1 initial commit
sean
parents:
diff changeset
90 <script type="text/javascript" src="d3.v3.min.js"></script>
3f139db894f1 initial commit
sean
parents:
diff changeset
91 <script type="text/javascript">
3f139db894f1 initial commit
sean
parents:
diff changeset
92
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
93 window.onresize = function(){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
94 document.getElementById("content").innerHTML = "";
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
95 makeChart();
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
96 };
0
3f139db894f1 initial commit
sean
parents:
diff changeset
97
3f139db894f1 initial commit
sean
parents:
diff changeset
98 var critical=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
99 var urgent=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
100 var bug=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
101 var feature=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
102 var wish=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
103 var timestamp=[];
3f139db894f1 initial commit
sean
parents:
diff changeset
104
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
105
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
106
0
3f139db894f1 initial commit
sean
parents:
diff changeset
107 function assignIssueToDate(issueArray, dateArray){
3f139db894f1 initial commit
sean
parents:
diff changeset
108 a = [];
3f139db894f1 initial commit
sean
parents:
diff changeset
109 for (var i = 0; i < issueArray.length; i++) {
3f139db894f1 initial commit
sean
parents:
diff changeset
110 a.push({points: issueArray[i].points, date : dateArray[i].date});
3f139db894f1 initial commit
sean
parents:
diff changeset
111 }
3f139db894f1 initial commit
sean
parents:
diff changeset
112
3f139db894f1 initial commit
sean
parents:
diff changeset
113 return a;
3f139db894f1 initial commit
sean
parents:
diff changeset
114 }
3f139db894f1 initial commit
sean
parents:
diff changeset
115
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
116 function limitDatesOnXAxis(limit){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
117 if ( timestamp.length < limit ){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
118 return timestamp.length;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
119 } else {
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
120 return limit;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
121 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
122 }
0
3f139db894f1 initial commit
sean
parents:
diff changeset
123
3f139db894f1 initial commit
sean
parents:
diff changeset
124 function maxInObject( array ){
3f139db894f1 initial commit
sean
parents:
diff changeset
125 var maxVal = 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
126 for (var i = 0; i < array.length; i++) {
3f139db894f1 initial commit
sean
parents:
diff changeset
127 if (maxVal < array[i].points){
3f139db894f1 initial commit
sean
parents:
diff changeset
128 maxVal = array[i].points;
3f139db894f1 initial commit
sean
parents:
diff changeset
129 }
3f139db894f1 initial commit
sean
parents:
diff changeset
130 }
3f139db894f1 initial commit
sean
parents:
diff changeset
131 return maxVal;
3f139db894f1 initial commit
sean
parents:
diff changeset
132 }
3f139db894f1 initial commit
sean
parents:
diff changeset
133
3f139db894f1 initial commit
sean
parents:
diff changeset
134
3f139db894f1 initial commit
sean
parents:
diff changeset
135 function getMaxIssues(){
3f139db894f1 initial commit
sean
parents:
diff changeset
136 maxIssuesOfAllArrays = [];
3f139db894f1 initial commit
sean
parents:
diff changeset
137 maxIssuesOfAllArrays.push(maxInObject(critical));
3f139db894f1 initial commit
sean
parents:
diff changeset
138 maxIssuesOfAllArrays.push(maxInObject(urgent));
3f139db894f1 initial commit
sean
parents:
diff changeset
139 maxIssuesOfAllArrays.push(maxInObject(bug));
3f139db894f1 initial commit
sean
parents:
diff changeset
140 maxIssuesOfAllArrays.push(maxInObject(feature));
3f139db894f1 initial commit
sean
parents:
diff changeset
141 maxIssuesOfAllArrays.push(maxInObject(wish));
3f139db894f1 initial commit
sean
parents:
diff changeset
142
3f139db894f1 initial commit
sean
parents:
diff changeset
143 return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
3f139db894f1 initial commit
sean
parents:
diff changeset
144 }
3f139db894f1 initial commit
sean
parents:
diff changeset
145
3f139db894f1 initial commit
sean
parents:
diff changeset
146
3f139db894f1 initial commit
sean
parents:
diff changeset
147 function dayDifference(first, second) {
3f139db894f1 initial commit
sean
parents:
diff changeset
148 "use strict";
3f139db894f1 initial commit
sean
parents:
diff changeset
149 var difference = (second - first) / (1000 * 60 * 60 * 24);
3f139db894f1 initial commit
sean
parents:
diff changeset
150
3f139db894f1 initial commit
sean
parents:
diff changeset
151 // just to avoid the get thousands of lines... would look ugly.
3f139db894f1 initial commit
sean
parents:
diff changeset
152 if (difference > 60){
3f139db894f1 initial commit
sean
parents:
diff changeset
153 difference = 60;
3f139db894f1 initial commit
sean
parents:
diff changeset
154 }
3f139db894f1 initial commit
sean
parents:
diff changeset
155
3f139db894f1 initial commit
sean
parents:
diff changeset
156 return difference;
3f139db894f1 initial commit
sean
parents:
diff changeset
157 }
3f139db894f1 initial commit
sean
parents:
diff changeset
158
3f139db894f1 initial commit
sean
parents:
diff changeset
159
3f139db894f1 initial commit
sean
parents:
diff changeset
160 // function for the grid lines
3f139db894f1 initial commit
sean
parents:
diff changeset
161 function makeGrid(direction, orientation, ticknumber) {
3f139db894f1 initial commit
sean
parents:
diff changeset
162 return d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
163 .scale(direction)
3f139db894f1 initial commit
sean
parents:
diff changeset
164 .orient(orientation)
3f139db894f1 initial commit
sean
parents:
diff changeset
165 .ticks( ticknumber );
3f139db894f1 initial commit
sean
parents:
diff changeset
166 }
3f139db894f1 initial commit
sean
parents:
diff changeset
167
3f139db894f1 initial commit
sean
parents:
diff changeset
168
3f139db894f1 initial commit
sean
parents:
diff changeset
169 //append a svg_path. pretty generic
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
170 function draw_line(svg, data_array, css_class, line_object, lineShape){
0
3f139db894f1 initial commit
sean
parents:
diff changeset
171 svg.append("path")
3f139db894f1 initial commit
sean
parents:
diff changeset
172 .datum(assignIssueToDate(data_array, timestamp))
3f139db894f1 initial commit
sean
parents:
diff changeset
173 .attr("class", css_class)
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
174 .style("stroke-dasharray", (lineShape))
0
3f139db894f1 initial commit
sean
parents:
diff changeset
175 .attr("d", line_object);
3f139db894f1 initial commit
sean
parents:
diff changeset
176 }
3f139db894f1 initial commit
sean
parents:
diff changeset
177
3f139db894f1 initial commit
sean
parents:
diff changeset
178
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
179 function makeLegend(svg, width){
0
3f139db894f1 initial commit
sean
parents:
diff changeset
180
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
181 var legend_distance = width+40;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
182 var top_distance = 20;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
183 var distance_steps = 50;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
184
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
185
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
186 function set_propper_distance(steps){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
187 top_distance += steps;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
188 return top_distance;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
189 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
190
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
191 function draw_legend_line(svg, width, Ypos, text, issues){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
192 svg.append("svg:text")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
193 .attr("class", "legend")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
194 .attr("x", width-30 )
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
195 .attr("y", Ypos)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
196 .text(text + ":");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
197
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
198 svg.append("svg:text")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
199 .attr("class", "legend")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
200 .attr("x", width+35 )
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
201 .attr("y", Ypos)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
202 .text(issues);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
203
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
204 svg.append("rect")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
205 .attr("class", "line " + text.toLowerCase() + " legend")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
206 .attr("x", width-30)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
207 .attr("y", Ypos-20)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
208 .attr("width", 100)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
209 .attr("height", 2);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
210 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
211
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
212 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Critical", critical[critical.length-1].points);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
213 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Urgent", urgent[urgent.length-1].points);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
214 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Bug", bug[bug.length-1].points);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
215 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Feature", feature[feature.length-1].points);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
216 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), "Wish", wish[wish.length-1].points);
0
3f139db894f1 initial commit
sean
parents:
diff changeset
217 }
3f139db894f1 initial commit
sean
parents:
diff changeset
218
3f139db894f1 initial commit
sean
parents:
diff changeset
219
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
220
0
3f139db894f1 initial commit
sean
parents:
diff changeset
221 //draw the chart
3f139db894f1 initial commit
sean
parents:
diff changeset
222 function makeChart(){
3f139db894f1 initial commit
sean
parents:
diff changeset
223
3f139db894f1 initial commit
sean
parents:
diff changeset
224 //declaration
3f139db894f1 initial commit
sean
parents:
diff changeset
225 var sizeOfSystemBorders = 50;
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
226 var margin = {top: 20, right: 100, bottom: 90, left: 60},
0
3f139db894f1 initial commit
sean
parents:
diff changeset
227 width = (document.documentElement.clientWidth-sizeOfSystemBorders) - margin.left - margin.right,
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
228 height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
229
3f139db894f1 initial commit
sean
parents:
diff changeset
230 var x = d3.time.scale()
3f139db894f1 initial commit
sean
parents:
diff changeset
231 .range([0, width]);
3f139db894f1 initial commit
sean
parents:
diff changeset
232
3f139db894f1 initial commit
sean
parents:
diff changeset
233 var y = d3.scale.linear()
3f139db894f1 initial commit
sean
parents:
diff changeset
234 .range([height, 0]);
3f139db894f1 initial commit
sean
parents:
diff changeset
235
3f139db894f1 initial commit
sean
parents:
diff changeset
236 var base_line = d3.svg.line()
3f139db894f1 initial commit
sean
parents:
diff changeset
237 .x(function(d) { return x(d.date); })
3f139db894f1 initial commit
sean
parents:
diff changeset
238 .y(function(d) { return y(d.points); });
3f139db894f1 initial commit
sean
parents:
diff changeset
239
3f139db894f1 initial commit
sean
parents:
diff changeset
240 //lines
3f139db894f1 initial commit
sean
parents:
diff changeset
241 var criticalLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
242 var urgentLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
243 var bugLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
244 var featureLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
245 var wishLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
246 var timestampLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
247
3f139db894f1 initial commit
sean
parents:
diff changeset
248
3f139db894f1 initial commit
sean
parents:
diff changeset
249 //set domain of y axis
3f139db894f1 initial commit
sean
parents:
diff changeset
250 var yDomain = [ ];
3f139db894f1 initial commit
sean
parents:
diff changeset
251 yDomain[0] = 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
252 yDomain[1] = getMaxIssues();
3f139db894f1 initial commit
sean
parents:
diff changeset
253 y.domain(d3.extent(yDomain, function(d){return d; }));
3f139db894f1 initial commit
sean
parents:
diff changeset
254
3f139db894f1 initial commit
sean
parents:
diff changeset
255 //set domain of y axis
3f139db894f1 initial commit
sean
parents:
diff changeset
256 x.domain(d3.extent(timestamp, function(d){return d.date; }));
3f139db894f1 initial commit
sean
parents:
diff changeset
257
3f139db894f1 initial commit
sean
parents:
diff changeset
258
3f139db894f1 initial commit
sean
parents:
diff changeset
259 var xAxis = d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
260 .scale(x)
3f139db894f1 initial commit
sean
parents:
diff changeset
261 .orient("bottom")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
262 .ticks(limitDatesOnXAxis(10))
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
263 .tickFormat(d3.time.format("%d.%m:%H:%M"));
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
264 // .tickFormat(d3.time.format("%X"));
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
265 // .tickFormat(d3.time.format.iso);
0
3f139db894f1 initial commit
sean
parents:
diff changeset
266
3f139db894f1 initial commit
sean
parents:
diff changeset
267
3f139db894f1 initial commit
sean
parents:
diff changeset
268 var yAxis = d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
269 .scale(y)
3f139db894f1 initial commit
sean
parents:
diff changeset
270 .orient("left");
3f139db894f1 initial commit
sean
parents:
diff changeset
271
3f139db894f1 initial commit
sean
parents:
diff changeset
272
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
273 var svg = d3.select("#content")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
274 .append("svg")
3f139db894f1 initial commit
sean
parents:
diff changeset
275 .attr("class", "svg")
3f139db894f1 initial commit
sean
parents:
diff changeset
276 .attr("width", width + margin.left + margin.right)
3f139db894f1 initial commit
sean
parents:
diff changeset
277 .attr("height", height + margin.top + margin.bottom)
3f139db894f1 initial commit
sean
parents:
diff changeset
278 .append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
279 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
3f139db894f1 initial commit
sean
parents:
diff changeset
280
3f139db894f1 initial commit
sean
parents:
diff changeset
281
3f139db894f1 initial commit
sean
parents:
diff changeset
282 // creation
3f139db894f1 initial commit
sean
parents:
diff changeset
283
3f139db894f1 initial commit
sean
parents:
diff changeset
284
3f139db894f1 initial commit
sean
parents:
diff changeset
285 // Draw the x Grid lines
11
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
286 // svg.append("g")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
287 // .attr("class", "grid")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
288 // .attr("transform", "translate(0," + height + ")")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
289 // .call(makeGrid(x, "bottom", timestamp.length)
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
290 // .tickSize(-height, 0, 0)
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
291 // .tickFormat("")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
292 // );
0
3f139db894f1 initial commit
sean
parents:
diff changeset
293
3f139db894f1 initial commit
sean
parents:
diff changeset
294
3f139db894f1 initial commit
sean
parents:
diff changeset
295 // Draw the y Grid lines
3f139db894f1 initial commit
sean
parents:
diff changeset
296 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
297 .attr("class", "grid")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
298 .call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 50);}())
0
3f139db894f1 initial commit
sean
parents:
diff changeset
299 .tickSize(-width, 0, 0)
3f139db894f1 initial commit
sean
parents:
diff changeset
300 .tickFormat("")
3f139db894f1 initial commit
sean
parents:
diff changeset
301 );
3f139db894f1 initial commit
sean
parents:
diff changeset
302
3f139db894f1 initial commit
sean
parents:
diff changeset
303
3f139db894f1 initial commit
sean
parents:
diff changeset
304 // Draw the x-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
305 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
306 .attr("class", "x axis")
3f139db894f1 initial commit
sean
parents:
diff changeset
307 .attr("transform", "translate(0," + height + ")")
3f139db894f1 initial commit
sean
parents:
diff changeset
308 .call(xAxis)
3f139db894f1 initial commit
sean
parents:
diff changeset
309 .selectAll("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
310 .style("text-anchor", "end")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
311 .attr("dx", "-.5em")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
312 .attr("dy", ".1em")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
313 .attr("transform", function() {
3f139db894f1 initial commit
sean
parents:
diff changeset
314 return "rotate(-65)";
3f139db894f1 initial commit
sean
parents:
diff changeset
315 });
3f139db894f1 initial commit
sean
parents:
diff changeset
316
3f139db894f1 initial commit
sean
parents:
diff changeset
317
3f139db894f1 initial commit
sean
parents:
diff changeset
318 // Draw the y-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
319 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
320 .attr("class", "y axis")
3f139db894f1 initial commit
sean
parents:
diff changeset
321 .call(yAxis)
3f139db894f1 initial commit
sean
parents:
diff changeset
322 .append("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
323 .attr("transform", "rotate(-90)")
3f139db894f1 initial commit
sean
parents:
diff changeset
324 .attr("y", 6)
3f139db894f1 initial commit
sean
parents:
diff changeset
325 .attr("dy", ".71em")
3f139db894f1 initial commit
sean
parents:
diff changeset
326 .style("text-anchor", "end");
3f139db894f1 initial commit
sean
parents:
diff changeset
327
3f139db894f1 initial commit
sean
parents:
diff changeset
328
3f139db894f1 initial commit
sean
parents:
diff changeset
329 // Text for y-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
330 svg.append("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
331 .attr("transform", "rotate(-90)")
3f139db894f1 initial commit
sean
parents:
diff changeset
332 .attr("y", 10 - margin.left)
3f139db894f1 initial commit
sean
parents:
diff changeset
333 .attr("x", 0 - (height / 2))
3f139db894f1 initial commit
sean
parents:
diff changeset
334 .attr("dy", "1em")
3f139db894f1 initial commit
sean
parents:
diff changeset
335 .style("text-anchor", "middle")
3f139db894f1 initial commit
sean
parents:
diff changeset
336 .text("Issues");
3f139db894f1 initial commit
sean
parents:
diff changeset
337
3f139db894f1 initial commit
sean
parents:
diff changeset
338
3f139db894f1 initial commit
sean
parents:
diff changeset
339 //Titel und Legende
3f139db894f1 initial commit
sean
parents:
diff changeset
340
3f139db894f1 initial commit
sean
parents:
diff changeset
341 svg.append("svg:text")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
342 .attr("class", "text")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
343 .attr("x", 10)
3f139db894f1 initial commit
sean
parents:
diff changeset
344 .attr("y", -5)
3f139db894f1 initial commit
sean
parents:
diff changeset
345 .text("Issues Nach Zeit");
3f139db894f1 initial commit
sean
parents:
diff changeset
346
3f139db894f1 initial commit
sean
parents:
diff changeset
347
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
348 draw_line(svg, wish, "line wish", wishLine, "0, 0");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
349 draw_line(svg, feature, "line feature", featureLine, "3, 3");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
350 draw_line(svg, bug, "line bug", bugLine, "7, 7");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
351 draw_line(svg, urgent, "line urgent", urgentLine, "13, 13");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
352 draw_line(svg, critical, "line critical", criticalLine, "17, 17");
0
3f139db894f1 initial commit
sean
parents:
diff changeset
353
3f139db894f1 initial commit
sean
parents:
diff changeset
354
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
355 makeLegend(svg, width);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
356
0
3f139db894f1 initial commit
sean
parents:
diff changeset
357
3f139db894f1 initial commit
sean
parents:
diff changeset
358 }
3f139db894f1 initial commit
sean
parents:
diff changeset
359
3f139db894f1 initial commit
sean
parents:
diff changeset
360 makeChart();
3f139db894f1 initial commit
sean
parents:
diff changeset
361
3f139db894f1 initial commit
sean
parents:
diff changeset
362
3f139db894f1 initial commit
sean
parents:
diff changeset
363 </script>
3f139db894f1 initial commit
sean
parents:
diff changeset
364 </body>
3f139db894f1 initial commit
sean
parents:
diff changeset
365 </html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)