source: javascript-examples/test.html@ 334

Last change on this file since 334 was 310, checked in by Rick van der Zwet, 13 years ago

Hacking with javascript and various other foo.
  • Property svn:mime-type set to text/html
File size: 7.6 KB
RevLine 
[310]1<html>
2<head>
3 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
4
5<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
6<script type="text/javascript" src="jquery-ui-1.8.min.js"></script>
7<script type="text/javascript" src="protovis-r3.2.js"></script>
8<script type="text/javascript">
9 $(document).ready(function() {
10 $("#tabs").tabs();
11 $("#tabs").tabs( "option", "selected", 2 );
12
13
14 // Damm coordinates how-to get relative ones?
15 function getCoordinates(evt, canvas) {
16 return [evt.pageX - canvas.offsetLeft - 10, evt.pageY - canvas.offsetTop - 10];
17 }
18
19 function isInCanvas(evt, canvas) {
20 canvasMinX = canvas.offsetLeft;
21 canvasMaxX = canvasMinX + canvas.width;
22
23 canvasMinY = canvas.offsetTop;
24 canvasMaxY = canvasMinY + canvas.height;
25
26 if (evt.pageX > canvasMinX && evt.pageX < canvasMaxX &&
27 evt.pageY > canvasMinY && evt.pageY < canvasMaxY) {
28 return true;
29 } else {
30 return false;
31 }
32 }
33
34 function onMouseClick(evt) {
35 if (isInCanvas(evt, this)) {
36 [coordX, coordY] = getCoordinates(evt, this);
37 var ctx = this.getContext("2d");
38 ctx.textAlign = "left";
39 ctx.textBaseline = "bottom";
40 ctx.fillText(coordX + "," + coordY, coordX, coordY);
41 }
42 }
43
44 function drawCoverage(ctx, coordX, coordY, coverage, usage) {
45 ctx.fillStyle = "rgba(255, 255, 0, .3)"
46 ctx.beginPath();
47 ctx.arc(coordX, coordY, coverage, 0, Math.PI*2, true);
48 ctx.closePath();
49 ctx.fill();
50
51 ctx.fillStyle = "rgba(255, 0, 0, .3)"
52 ctx.beginPath();
53 ctx.arc(coordX, coordY, usage, 0, Math.PI*2, true);
54 ctx.closePath();
55 ctx.fill();
56 ctx.fillStyle = "black";
57 ctx.textAlign = "center";
58 ctx.textBaseline = "middle";
59 ctx.fillText(usage, coordX, coordY);
60 }
61
62 $('#canvas-0').click(onMouseClick);
63 $('#canvas-2').click(onMouseClick);
64
65 var img = new Image();
66 img.src = 'floor0.jpg';
67 img.onload = function(){
68 var ctx = $('#canvas-0')[0].getContext("2d");
69 ctx.drawImage(img,0,0);
70 drawCoverage(ctx,380,390,100,10);
71 drawCoverage(ctx,450,390,100,10);
72 drawCoverage(ctx,380,480,100,25);
73 drawCoverage(ctx,490,480,100,25);
74 }
75
76 var img2 = new Image();
77 img2.src = 'floor2.jpg';
78 img2.onload = function(){
79 var ctx = $('#canvas-2')[0].getContext("2d");
80 ctx.drawImage(img2,0,0);
81 drawCoverage(ctx,627,420,100,10);
82 drawCoverage(ctx,720,420,100,10);
83 drawCoverage(ctx,627,480,100,10);
84 drawCoverage(ctx,720,480,100,10);
85 drawCoverage(ctx,680,520,100,10);
86
87 //
88 drawCoverage(ctx,525,440,100,10);
89 drawCoverage(ctx,600,440,100,10);
90 drawCoverage(ctx,525,480,100,10);
91 drawCoverage(ctx,575,505,100,10);
92 }
93
94});
95</script>
96
97</head>
98<body>
99<div id="tabs">
100 <ul>
101 <li><a href="#floor-0"><span>Floor 0</span></a></li>
102 <li><a href="#floor-2"><span>Floor 2</span></a></li>
103 <li><a href="#statistics"><span>Statistics</span></a></li>
104 </ul>
105 <div id="floor-0">
106 <canvas id="canvas-0" width="1000" height="1000"></canvas>
107 </div>
108 <div id="floor-2">
109 <canvas id="canvas-2" width="1000" height="1000"></canvas>
110 </div>
111 <div id="statistics">
112 <table><tr>
113 <td>
114 <div style="text-align : center">
115 <script type="text/javascript+protovis">
116 var data = pv.range(4).map(function() {
117 return pv.range(0, 100).map(function(x) ({
118 x: new Date(2011, 0, 1, 10, x),
119 y: Math.sin(x * .1) + Math.random() * .5 + 2
120 }));
121 });
122
123
124 var w = 400,
125 h = 200,
126 x = pv.Scale.linear(data[0], function(d) d.x).range(0, w),
127 y = pv.Scale.linear(0, 30).range(0, h);
128
129 var vis = new pv.Panel()
130 .width(w)
131 .height(h)
132 .bottom(20)
133 .left(20)
134 .right(10)
135 .top(5);
136
137 vis.add(pv.Rule)
138 .data(x.ticks())
139 .left(x)
140 .strokeStyle("#eee")
141 .anchor("bottom").add(pv.Label)
142 .text(x.tickFormat);
143
144 vis.add(pv.Rule)
145 .data(y.ticks(5))
146 .bottom(y)
147 .strokeStyle(function(d) d ? "#eee" : "#000")
148 .anchor("left").add(pv.Label)
149 .text(y.tickFormat);
150
151 vis.add(pv.Layout.Stack)
152 .layers(data)
153 .x(function(d) x(d.x))
154 .y(function(d) y(d.y))
155 .layer.add(pv.Area);
156
157
158
159
160 vis.render();
161
162 </script><br />
163Users per AccessPoint
164 </div>
165 </td><td>
166 <div style="text-align : center">
167 <script type="text/javascript+protovis">
168 var data = pv.range(0, 100).map(function(x) ({
169 x: new Date(2011, 0, 1, 10, x),
170 y: Math.sin(x * .5) + Math.random() * .5 + 5
171 }));
172
173 var data2 = pv.range(0, 100).map(function(x) ({
174 x: new Date(2011, 0, 1, 10, x),
175 y: Math.sin(x * .5) + Math.random() * .5 + 2
176 }));
177
178 var w = 400,
179 h = 200,
180 x = pv.Scale.linear(data, function(d) d.x).range(0, w),
181 y = pv.Scale.linear(0, 30).range(0, h);
182
183 var vis = new pv.Panel()
184 .width(w)
185 .height(h)
186 .bottom(20)
187 .left(20)
188 .right(10)
189 .top(5);
190
191 vis.add(pv.Rule)
192 .data(x.ticks())
193 .left(x)
194 .strokeStyle("#eee")
195 .anchor("bottom").add(pv.Label)
196 .text(x.tickFormat);
197
198 vis.add(pv.Rule)
199 .data(y.ticks(5))
200 .bottom(y)
201 .strokeStyle(function(d) d ? "#eee" : "#000")
202 .anchor("left").add(pv.Label)
203 .text(y.tickFormat);
204
205 var i = -1;
206 /* The area with top line. */
207 vis.add(pv.Area)
208 .data(data)
209 .bottom(1)
210 .left(function(d) x(d.x))
211 .height(function(d) y(d.y))
212 .fillStyle("rgb(121,173,210)")
213
214 var line1 = vis.add(pv.Line)
215 .data(data)
216 .left(function(d) x(d.x))
217 .bottom(function(d) y(d.y))
218 .lineWidth(3);
219
220 var dot1 = line1.add(pv.Dot)
221 .visible(function() i >= 0)
222 .data(function() [data[i]])
223 .fillStyle(function() line1.strokeStyle())
224 .strokeStyle("#000")
225 .size(20)
226 .lineWidth(1);
227
228 dot1.add(pv.Dot)
229 .left(10)
230 .bottom(25)
231 .anchor("right").add(pv.Label)
232 .text(function(d) d.y.toFixed(2));
233
234 var line2 = vis.add(pv.Line)
235 .data(data2)
236 .strokeStyle("rgb(0,255,0)")
237 .left(function(d) x(d.x))
238 .bottom(function(d) y(d.y))
239 .lineWidth(3);
240
241 var dot2 = line2.add(pv.Dot)
242 .visible(function() i >= 0)
243 .data(function() [data2[i]])
244 .fillStyle(function() line2.strokeStyle())
245 .strokeStyle("#000")
246 .size(20)
247 .lineWidth(1);
248
249 dot2.add(pv.Dot)
250 .left(10)
251 .bottom(10)
252 .anchor("right").add(pv.Label)
253 .text(function(d) d.y.toFixed(2));
254
255 vis.add(pv.Rule)
256 .visible(function() i >= 0)
257 .left(function() x(data[i].x))
258 .top(-4)
259 .bottom(-4)
260 .strokeStyle("red")
261 .anchor("bottom").add(pv.Label);
262
263
264 vis.add(pv.Bar)
265 .fillStyle("rgba(0,0,0,.001)")
266 .event("mouseout", function() {
267 i = -1;
268 return vis;
269 })
270 .event("mousemove", function() {
271 var mx = x.invert(vis.mouse().x);
272 i = pv.search(data.map(function(d) d.x), mx);
273 i = i < 0 ? (-i - 2) : i;
274 return vis;
275 });
276
277
278 vis.render();
279 </script><br />
280Bandwidth on Router
281 </div>
282 </td></tr></table>
283</div>
284
285</body>
286</html>
287
Note: See TracBrowser for help on using the repository browser.