Mercurial > roundup-cc

annotate graph.html @ 27:cdab667c6abb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Delete Code Duplication and Clean Up. * The search for the status does not require the "-1". * If the parameter you are looking for is not available in the tracker, an error message is issued and the program terminates, to avoid incorrect entries in the database
author Magnus Schieder <mschieder@intevation.de>
date Tue, 13 Nov 2018 21:04:22 +0100
parents 7161ce4e7ab1
children 9aca070c86bd
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
36 .line.red {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
40 .line.red.legend {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
44 .line.orange {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
48 .line.orange.legend {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
52 .line.violet {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
56 .line.violet.legend {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
60 .line.chartreuse {
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
65 .line.chartreuse.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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
69 .line.blue {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
73 .line.blue.legend {
0
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
77 .line.grey {
20
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
78 stroke: grey;
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
79 }
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
80
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
81 .line.grey.legend {
20
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
82 fill: grey;
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
83 }
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
84
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
85 .line.aqua{
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
86 stroke: aqua;
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
87 }
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
88
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
89 .line.aqua.legend {
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
90 fill: aqua;
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
91 }
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
92
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
93 .line.darkgreen {
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
94 stroke: darkgreen;
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
95 }
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
96
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
97 .line.darkgreen.legend {
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
98 fill: darkgreen;
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
99 }
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
100
0
3f139db894f1 initial commit
sean
parents:
diff changeset
101 .grid .tick {
3f139db894f1 initial commit
sean
parents:
diff changeset
102 stroke: lightgrey;
3f139db894f1 initial commit
sean
parents:
diff changeset
103 opacity: 0.7;
3f139db894f1 initial commit
sean
parents:
diff changeset
104 }
3f139db894f1 initial commit
sean
parents:
diff changeset
105
3f139db894f1 initial commit
sean
parents:
diff changeset
106 .grid path {
3f139db894f1 initial commit
sean
parents:
diff changeset
107 stroke-width: 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
108 }
3f139db894f1 initial commit
sean
parents:
diff changeset
109
3f139db894f1 initial commit
sean
parents:
diff changeset
110 </style>
3f139db894f1 initial commit
sean
parents:
diff changeset
111 </head>
3f139db894f1 initial commit
sean
parents:
diff changeset
112 <body>
20
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
113 <h1>Filter</h1>
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
114 <p>States: status</p>
3bb3d9a9f1b7 Filter by keywords and states.
Magnus Schieder <mschieder@intevation.de>
parents: 11
diff changeset
115 <p>Keywords: keywords</p>
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
116 <div id="content" style="display: inline-block"></div>
0
3f139db894f1 initial commit
sean
parents:
diff changeset
117 <script type="text/javascript" src="d3.v3.min.js"></script>
3f139db894f1 initial commit
sean
parents:
diff changeset
118 <script type="text/javascript">
3f139db894f1 initial commit
sean
parents:
diff changeset
119
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
120 window.onresize = function(){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
121 document.getElementById("content").innerHTML = "";
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
122 makeChart();
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
123 };
0
3f139db894f1 initial commit
sean
parents:
diff changeset
124
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
125
0
3f139db894f1 initial commit
sean
parents:
diff changeset
126 var timestamp=[];
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
127 var data=js_data_dickt
0
3f139db894f1 initial commit
sean
parents:
diff changeset
128
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
129 var linesCSS = ["red", "orange", "violet", "chartreuse", "blue", "grey", "aqua", "darkgreen"]
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
130
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
131
0
3f139db894f1 initial commit
sean
parents:
diff changeset
132 function assignIssueToDate(issueArray, dateArray){
3f139db894f1 initial commit
sean
parents:
diff changeset
133 a = [];
3f139db894f1 initial commit
sean
parents:
diff changeset
134 for (var i = 0; i < issueArray.length; i++) {
3f139db894f1 initial commit
sean
parents:
diff changeset
135 a.push({points: issueArray[i].points, date : dateArray[i].date});
3f139db894f1 initial commit
sean
parents:
diff changeset
136 }
3f139db894f1 initial commit
sean
parents:
diff changeset
137
3f139db894f1 initial commit
sean
parents:
diff changeset
138 return a;
3f139db894f1 initial commit
sean
parents:
diff changeset
139 }
3f139db894f1 initial commit
sean
parents:
diff changeset
140
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
141 function limitDatesOnXAxis(limit){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
142 if ( timestamp.length < limit ){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
143 return timestamp.length;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
144 } else {
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
145 return limit;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
146 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
147 }
0
3f139db894f1 initial commit
sean
parents:
diff changeset
148
3f139db894f1 initial commit
sean
parents:
diff changeset
149 function maxInObject( array ){
3f139db894f1 initial commit
sean
parents:
diff changeset
150 var maxVal = 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
151 for (var i = 0; i < array.length; i++) {
3f139db894f1 initial commit
sean
parents:
diff changeset
152 if (maxVal < array[i].points){
3f139db894f1 initial commit
sean
parents:
diff changeset
153 maxVal = array[i].points;
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 maxVal;
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 getMaxIssues(){
3f139db894f1 initial commit
sean
parents:
diff changeset
161 maxIssuesOfAllArrays = [];
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
162 for (col in data){
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
163 maxIssuesOfAllArrays.push(maxInObject(data[col]))
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
164 }
0
3f139db894f1 initial commit
sean
parents:
diff changeset
165 return Math.max.apply(Math, maxIssuesOfAllArrays)+1;
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 function dayDifference(first, second) {
3f139db894f1 initial commit
sean
parents:
diff changeset
170 "use strict";
3f139db894f1 initial commit
sean
parents:
diff changeset
171 var difference = (second - first) / (1000 * 60 * 60 * 24);
3f139db894f1 initial commit
sean
parents:
diff changeset
172
3f139db894f1 initial commit
sean
parents:
diff changeset
173 // just to avoid the get thousands of lines... would look ugly.
3f139db894f1 initial commit
sean
parents:
diff changeset
174 if (difference > 60){
3f139db894f1 initial commit
sean
parents:
diff changeset
175 difference = 60;
3f139db894f1 initial commit
sean
parents:
diff changeset
176 }
3f139db894f1 initial commit
sean
parents:
diff changeset
177
3f139db894f1 initial commit
sean
parents:
diff changeset
178 return difference;
3f139db894f1 initial commit
sean
parents:
diff changeset
179 }
3f139db894f1 initial commit
sean
parents:
diff changeset
180
3f139db894f1 initial commit
sean
parents:
diff changeset
181
3f139db894f1 initial commit
sean
parents:
diff changeset
182 // function for the grid lines
3f139db894f1 initial commit
sean
parents:
diff changeset
183 function makeGrid(direction, orientation, ticknumber) {
3f139db894f1 initial commit
sean
parents:
diff changeset
184 return d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
185 .scale(direction)
3f139db894f1 initial commit
sean
parents:
diff changeset
186 .orient(orientation)
3f139db894f1 initial commit
sean
parents:
diff changeset
187 .ticks( ticknumber );
3f139db894f1 initial commit
sean
parents:
diff changeset
188 }
3f139db894f1 initial commit
sean
parents:
diff changeset
189
3f139db894f1 initial commit
sean
parents:
diff changeset
190
3f139db894f1 initial commit
sean
parents:
diff changeset
191 //append a svg_path. pretty generic
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
192 function draw_line(svg, data_array, css_class, line_object, lineShape){
0
3f139db894f1 initial commit
sean
parents:
diff changeset
193 svg.append("path")
3f139db894f1 initial commit
sean
parents:
diff changeset
194 .datum(assignIssueToDate(data_array, timestamp))
3f139db894f1 initial commit
sean
parents:
diff changeset
195 .attr("class", css_class)
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
196 .style("stroke-dasharray", (lineShape))
0
3f139db894f1 initial commit
sean
parents:
diff changeset
197 .attr("d", line_object);
3f139db894f1 initial commit
sean
parents:
diff changeset
198 }
3f139db894f1 initial commit
sean
parents:
diff changeset
199
3f139db894f1 initial commit
sean
parents:
diff changeset
200
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
201 function makeLegend(svg, width){
0
3f139db894f1 initial commit
sean
parents:
diff changeset
202
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
203 var legend_distance = width+40;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
204 var top_distance = 20;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
205 var distance_steps = 50;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
206
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
207
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
208 function set_propper_distance(steps){
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
209 top_distance += steps;
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
210 return top_distance;
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
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
213 function draw_legend_line(svg, width, Ypos, linesColour, text, issues){
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
214 svg.append("svg:text")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
215 .attr("class", "legend")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
216 .attr("x", width-30 )
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
217 .attr("y", Ypos)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
218 .text(text + ":");
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
219
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
220 svg.append("svg:text")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
221 .attr("class", "legend")
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
222 .attr("x", width+65 )
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
223 .attr("y", Ypos)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
224 .text(issues);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
225
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
226 svg.append("rect")
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
227 .attr("class", "line " + linesColour.toLowerCase() + " legend")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
228 .attr("x", width-30)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
229 .attr("y", Ypos-20)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
230 .attr("width", 100)
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
231 .attr("height", 2);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
232 }
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
233
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
234 var colourNume = 0
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
235 for (col in data) {
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
236 graph = data[col]
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
237 draw_legend_line(svg, legend_distance, set_propper_distance(distance_steps), linesCSS[colourNume], col, graph[graph.length-1].points);
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
238 colourNume += 1
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
239 }
0
3f139db894f1 initial commit
sean
parents:
diff changeset
240 }
3f139db894f1 initial commit
sean
parents:
diff changeset
241
3f139db894f1 initial commit
sean
parents:
diff changeset
242
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
243
0
3f139db894f1 initial commit
sean
parents:
diff changeset
244 //draw the chart
3f139db894f1 initial commit
sean
parents:
diff changeset
245 function makeChart(){
3f139db894f1 initial commit
sean
parents:
diff changeset
246
3f139db894f1 initial commit
sean
parents:
diff changeset
247 //declaration
3f139db894f1 initial commit
sean
parents:
diff changeset
248 var sizeOfSystemBorders = 50;
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
249 var margin = {top: 20, right: 150, bottom: 90, left: 60},
0
3f139db894f1 initial commit
sean
parents:
diff changeset
250 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
251 height = (document.documentElement.clientHeight-sizeOfSystemBorders) - margin.top - margin.bottom;
0
3f139db894f1 initial commit
sean
parents:
diff changeset
252
3f139db894f1 initial commit
sean
parents:
diff changeset
253 var x = d3.time.scale()
3f139db894f1 initial commit
sean
parents:
diff changeset
254 .range([0, width]);
3f139db894f1 initial commit
sean
parents:
diff changeset
255
3f139db894f1 initial commit
sean
parents:
diff changeset
256 var y = d3.scale.linear()
3f139db894f1 initial commit
sean
parents:
diff changeset
257 .range([height, 0]);
3f139db894f1 initial commit
sean
parents:
diff changeset
258
3f139db894f1 initial commit
sean
parents:
diff changeset
259 var base_line = d3.svg.line()
3f139db894f1 initial commit
sean
parents:
diff changeset
260 .x(function(d) { return x(d.date); })
3f139db894f1 initial commit
sean
parents:
diff changeset
261 .y(function(d) { return y(d.points); });
3f139db894f1 initial commit
sean
parents:
diff changeset
262
3f139db894f1 initial commit
sean
parents:
diff changeset
263 //lines
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
264
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
265 lines = {}
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
266 for (col in data) {
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
267 lines[col] = base_line
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
268 }
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
269
0
3f139db894f1 initial commit
sean
parents:
diff changeset
270 var timestampLine = base_line;
3f139db894f1 initial commit
sean
parents:
diff changeset
271
3f139db894f1 initial commit
sean
parents:
diff changeset
272
3f139db894f1 initial commit
sean
parents:
diff changeset
273 //set domain of y axis
3f139db894f1 initial commit
sean
parents:
diff changeset
274 var yDomain = [ ];
3f139db894f1 initial commit
sean
parents:
diff changeset
275 yDomain[0] = 0;
3f139db894f1 initial commit
sean
parents:
diff changeset
276 yDomain[1] = getMaxIssues();
3f139db894f1 initial commit
sean
parents:
diff changeset
277 y.domain(d3.extent(yDomain, function(d){return d; }));
3f139db894f1 initial commit
sean
parents:
diff changeset
278
3f139db894f1 initial commit
sean
parents:
diff changeset
279 //set domain of y axis
3f139db894f1 initial commit
sean
parents:
diff changeset
280 x.domain(d3.extent(timestamp, function(d){return d.date; }));
3f139db894f1 initial commit
sean
parents:
diff changeset
281
3f139db894f1 initial commit
sean
parents:
diff changeset
282
3f139db894f1 initial commit
sean
parents:
diff changeset
283 var xAxis = d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
284 .scale(x)
3f139db894f1 initial commit
sean
parents:
diff changeset
285 .orient("bottom")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
286 .ticks(limitDatesOnXAxis(10))
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
287 .tickFormat(d3.time.format("%d.%m:%H:%M"));
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
288 // .tickFormat(d3.time.format("%X"));
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
289 // .tickFormat(d3.time.format.iso);
0
3f139db894f1 initial commit
sean
parents:
diff changeset
290
3f139db894f1 initial commit
sean
parents:
diff changeset
291
3f139db894f1 initial commit
sean
parents:
diff changeset
292 var yAxis = d3.svg.axis()
3f139db894f1 initial commit
sean
parents:
diff changeset
293 .scale(y)
3f139db894f1 initial commit
sean
parents:
diff changeset
294 .orient("left");
3f139db894f1 initial commit
sean
parents:
diff changeset
295
3f139db894f1 initial commit
sean
parents:
diff changeset
296
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
297 var svg = d3.select("#content")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
298 .append("svg")
3f139db894f1 initial commit
sean
parents:
diff changeset
299 .attr("class", "svg")
3f139db894f1 initial commit
sean
parents:
diff changeset
300 .attr("width", width + margin.left + margin.right)
3f139db894f1 initial commit
sean
parents:
diff changeset
301 .attr("height", height + margin.top + margin.bottom)
3f139db894f1 initial commit
sean
parents:
diff changeset
302 .append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
303 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
3f139db894f1 initial commit
sean
parents:
diff changeset
304
3f139db894f1 initial commit
sean
parents:
diff changeset
305
3f139db894f1 initial commit
sean
parents:
diff changeset
306 // creation
3f139db894f1 initial commit
sean
parents:
diff changeset
307
3f139db894f1 initial commit
sean
parents:
diff changeset
308
3f139db894f1 initial commit
sean
parents:
diff changeset
309 // Draw the x Grid lines
11
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
310 // svg.append("g")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
311 // .attr("class", "grid")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
312 // .attr("transform", "translate(0," + height + ")")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
313 // .call(makeGrid(x, "bottom", timestamp.length)
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
314 // .tickSize(-height, 0, 0)
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
315 // .tickFormat("")
f198a92dd37f Do not render vertical grid lines
Gernot Schulz <gernot@intevation.de>
parents: 1
diff changeset
316 // );
0
3f139db894f1 initial commit
sean
parents:
diff changeset
317
3f139db894f1 initial commit
sean
parents:
diff changeset
318
3f139db894f1 initial commit
sean
parents:
diff changeset
319 // Draw the y Grid lines
3f139db894f1 initial commit
sean
parents:
diff changeset
320 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
321 .attr("class", "grid")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
322 .call(makeGrid(y, "left", function(){return Math.min(getMaxIssues(), 50);}())
0
3f139db894f1 initial commit
sean
parents:
diff changeset
323 .tickSize(-width, 0, 0)
3f139db894f1 initial commit
sean
parents:
diff changeset
324 .tickFormat("")
3f139db894f1 initial commit
sean
parents:
diff changeset
325 );
3f139db894f1 initial commit
sean
parents:
diff changeset
326
3f139db894f1 initial commit
sean
parents:
diff changeset
327
3f139db894f1 initial commit
sean
parents:
diff changeset
328 // Draw the x-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
329 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
330 .attr("class", "x axis")
3f139db894f1 initial commit
sean
parents:
diff changeset
331 .attr("transform", "translate(0," + height + ")")
3f139db894f1 initial commit
sean
parents:
diff changeset
332 .call(xAxis)
3f139db894f1 initial commit
sean
parents:
diff changeset
333 .selectAll("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
334 .style("text-anchor", "end")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
335 .attr("dx", "-.5em")
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
336 .attr("dy", ".1em")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
337 .attr("transform", function() {
3f139db894f1 initial commit
sean
parents:
diff changeset
338 return "rotate(-65)";
3f139db894f1 initial commit
sean
parents:
diff changeset
339 });
3f139db894f1 initial commit
sean
parents:
diff changeset
340
3f139db894f1 initial commit
sean
parents:
diff changeset
341
3f139db894f1 initial commit
sean
parents:
diff changeset
342 // Draw the y-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
343 svg.append("g")
3f139db894f1 initial commit
sean
parents:
diff changeset
344 .attr("class", "y axis")
3f139db894f1 initial commit
sean
parents:
diff changeset
345 .call(yAxis)
3f139db894f1 initial commit
sean
parents:
diff changeset
346 .append("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
347 .attr("transform", "rotate(-90)")
3f139db894f1 initial commit
sean
parents:
diff changeset
348 .attr("y", 6)
3f139db894f1 initial commit
sean
parents:
diff changeset
349 .attr("dy", ".71em")
3f139db894f1 initial commit
sean
parents:
diff changeset
350 .style("text-anchor", "end");
3f139db894f1 initial commit
sean
parents:
diff changeset
351
3f139db894f1 initial commit
sean
parents:
diff changeset
352
3f139db894f1 initial commit
sean
parents:
diff changeset
353 // Text for y-axis
3f139db894f1 initial commit
sean
parents:
diff changeset
354 svg.append("text")
3f139db894f1 initial commit
sean
parents:
diff changeset
355 .attr("transform", "rotate(-90)")
3f139db894f1 initial commit
sean
parents:
diff changeset
356 .attr("y", 10 - margin.left)
3f139db894f1 initial commit
sean
parents:
diff changeset
357 .attr("x", 0 - (height / 2))
3f139db894f1 initial commit
sean
parents:
diff changeset
358 .attr("dy", "1em")
3f139db894f1 initial commit
sean
parents:
diff changeset
359 .style("text-anchor", "middle")
3f139db894f1 initial commit
sean
parents:
diff changeset
360 .text("Issues");
3f139db894f1 initial commit
sean
parents:
diff changeset
361
3f139db894f1 initial commit
sean
parents:
diff changeset
362
3f139db894f1 initial commit
sean
parents:
diff changeset
363 //Titel und Legende
3f139db894f1 initial commit
sean
parents:
diff changeset
364
3f139db894f1 initial commit
sean
parents:
diff changeset
365 svg.append("svg:text")
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
366 .attr("class", "text")
0
3f139db894f1 initial commit
sean
parents:
diff changeset
367 .attr("x", 10)
3f139db894f1 initial commit
sean
parents:
diff changeset
368 .attr("y", -5)
3f139db894f1 initial commit
sean
parents:
diff changeset
369 .text("Issues Nach Zeit");
3f139db894f1 initial commit
sean
parents:
diff changeset
370
25
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
371 var shape = 0
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
372 var colourNume = 0
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
373 for (col in data){
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
374 draw_line(svg, data[col], "line " + linesCSS[colourNume] , lines[col], shape + ", " +shape);
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
375 colourNume += 1
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
376 shape += 3
7161ce4e7ab1 The web-based display is dynamically generated.
Magnus Schieder <mschieder@intevation.de>
parents: 20
diff changeset
377 }
0
3f139db894f1 initial commit
sean
parents:
diff changeset
378
1
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
379 makeLegend(svg, width);
2df45f6ecd81 new appereance (solid and dotted lines), resonsive layout, new legend,
sean
parents: 0
diff changeset
380
0
3f139db894f1 initial commit
sean
parents:
diff changeset
381
3f139db894f1 initial commit
sean
parents:
diff changeset
382 }
3f139db894f1 initial commit
sean
parents:
diff changeset
383
3f139db894f1 initial commit
sean
parents:
diff changeset
384 makeChart();
3f139db894f1 initial commit
sean
parents:
diff changeset
385
3f139db894f1 initial commit
sean
parents:
diff changeset
386
3f139db894f1 initial commit
sean
parents:
diff changeset
387 </script>
3f139db894f1 initial commit
sean
parents:
diff changeset
388 </body>
3f139db894f1 initial commit
sean
parents:
diff changeset
389 </html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)