Mercurial > roundup-cc

annotate graph.html @ 36:59e1659a0a0b tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Update 'TODO.creole' * Old TODOs moved to 'doc/old_TODO.creole'
author Magnus Schieder <mschieder@intevation.de>
date Mon, 26 Nov 2018 16:52:45 +0100
parents 9aca070c86bd
children
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>
31
9aca070c86bd Add the filter 'priority' for the search by status.
Magnus Schieder <mschieder@intevation.de>
parents: 25
diff changeset
114 <p>Search parameters: search_parameters</p>
20
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)