Mercurial > hg > STI-GWT
comparison war/scripts/sti/timeplot-modify.js @ 3:cf06b77a8bbd
Committed branch of the e4D repos sti-gwt branch 16384.
git-svn-id: http://dev.dariah.eu/svn/repos/eu.dariah.de/ap1/sti-gwt-dariah-geobrowser@36 f2b5be40-def6-11e0-8a09-b3c1cc336c6b
author | StefanFunk <StefanFunk@f2b5be40-def6-11e0-8a09-b3c1cc336c6b> |
---|---|
date | Tue, 17 Jul 2012 13:34:40 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
2:2897af43ccc6 | 3:cf06b77a8bbd |
---|---|
1 Timeplot.DefaultEventSource.prototype.loadData = function(events){ | |
2 | |
3 this._events.maxValues = new Array(); | |
4 this._events.removeAll(); | |
5 for (var i = 0; i < events.length; i++) { | |
6 var event = events[i]; | |
7 var numericEvent = new Timeplot.DefaultEventSource.NumericEvent(event.date, event.value); | |
8 this._events.add(numericEvent); | |
9 } | |
10 this._fire("onAddMany", []); | |
11 | |
12 }; | |
13 | |
14 Timeplot._Impl.prototype.resetPlots = function(plotInfos){ | |
15 | |
16 this._plotInfos = plotInfos; | |
17 this._painters = { | |
18 background: [], | |
19 foreground: [] | |
20 }; | |
21 this._painter = null; | |
22 | |
23 var timeplot = this; | |
24 var painter = { | |
25 onAddMany: function(){ | |
26 timeplot.update(); | |
27 }, | |
28 onClear: function(){ | |
29 timeplot.update(); | |
30 } | |
31 } | |
32 | |
33 for (i = this._plots.length; i > 0; i--) { | |
34 this._plots[i-1].opacityPlot.removeChild( this._plots[i-1]._opacityCanvas ); | |
35 this._plots[i - 1].dispose(); | |
36 if (document.addEventListener) { | |
37 this._containerDiv.removeEventListener("mousemove", this._plots[i - 1].mousemove, false); | |
38 this._containerDiv.removeEventListener("mouseover", this._plots[i - 1].mouseover, false); | |
39 } | |
40 else | |
41 if (document.attachEvent) { | |
42 this._containerDiv.detachEvent("onmousemove", this._plots[i - 1].mousemove); | |
43 this._containerDiv.detachEvent("onmouseover", this._plots[i - 1].mouseover); | |
44 } | |
45 delete this._plots[i - 1]; | |
46 } | |
47 | |
48 this._plots = []; | |
49 | |
50 for (i = 0; i < this._plotInfos.length; i++) { | |
51 var plot = new Timeplot.Plot(this, this._plotInfos[i]); | |
52 var dataSource = plot.getDataSource(); | |
53 if (dataSource) { | |
54 dataSource.addListener(painter); | |
55 } | |
56 this.addPainter("background", { | |
57 context: plot.getTimeGeometry(), | |
58 action: plot.getTimeGeometry().paint | |
59 }); | |
60 this.addPainter("background", { | |
61 context: plot.getValueGeometry(), | |
62 action: plot.getValueGeometry().paint | |
63 }); | |
64 this.addPainter("foreground", { | |
65 context: plot, | |
66 action: plot.paint | |
67 }); | |
68 this._plots.push(plot); | |
69 plot.initialize(); | |
70 } | |
71 | |
72 }; | |
73 | |
74 Timeplot.DefaultTimeGeometry.prototype._calculateGrid = function() { | |
75 var grid = []; | |
76 | |
77 var time = SimileAjax.DateTime; | |
78 var u = this._unit; | |
79 var p = this._period; | |
80 | |
81 if (p == 0) | |
82 return grid; | |
83 | |
84 var periodUnit = -1; | |
85 do { | |
86 periodUnit++; | |
87 } | |
88 while (time.gregorianUnitLengths[periodUnit] < p); | |
89 | |
90 var unit; | |
91 if (periodUnit < time.HALFMINUTE) { | |
92 unit = time.SECOND; | |
93 } | |
94 else if (periodUnit < time.WEEK) { | |
95 unit = periodUnit - 2; | |
96 } | |
97 else { | |
98 unit = periodUnit - 3; | |
99 } | |
100 | |
101 if( unit < this._granularity ){ | |
102 unit = this._granularity; | |
103 } | |
104 | |
105 var t = u.cloneValue(this._earliestDate); | |
106 var timeZone; | |
107 do { | |
108 time.roundDownToInterval(t, unit, timeZone, 1, 0); | |
109 var x = this.toScreen(u.toNumber(t)); | |
110 var l = SimileAjax.DateTime.getTimeLabel(unit,t); | |
111 if (x > 0) { | |
112 grid.push({ x: x, label: l }); | |
113 } | |
114 time.incrementByInterval(t, unit, timeZone); | |
115 } while (t.getTime() < this._latestDate.getTime()); | |
116 | |
117 return grid; | |
118 | |
119 }; | |
120 | |
121 //modified function to prevent from drawing left and right axis | |
122 Timeplot.DefaultValueGeometry.prototype.paint = function() { | |
123 if (this._timeplot) { | |
124 var ctx = this._canvas.getContext('2d'); | |
125 | |
126 ctx.lineJoin = 'miter'; | |
127 | |
128 // paint grid | |
129 if (this._gridColor) { | |
130 var gridGradient = ctx.createLinearGradient(0,0,0,this._canvas.height); | |
131 gridGradient.addColorStop(0, this._gridColor.toHexString()); | |
132 gridGradient.addColorStop(0.3, this._gridColor.toHexString()); | |
133 gridGradient.addColorStop(1, "rgba(255,255,255,0.5)"); | |
134 | |
135 ctx.lineWidth = this._gridLineWidth; | |
136 ctx.strokeStyle = gridGradient; | |
137 | |
138 for (var i = 0; i < this._grid.length; i++) { | |
139 var tick = this._grid[i]; | |
140 var y = Math.floor(tick.y) + 0.5; | |
141 if (typeof tick.label != "undefined") { | |
142 if (this._axisLabelsPlacement == "left") { | |
143 var div = this._timeplot.putText(this._id + "-" + i, tick.label,"timeplot-grid-label",{ | |
144 left: 4, | |
145 bottom: y + 2, | |
146 color: this._gridColor.toHexString(), | |
147 visibility: "hidden" | |
148 }); | |
149 this._labels.push(div); | |
150 } else if (this._axisLabelsPlacement == "right") { | |
151 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label",{ | |
152 right: 4, | |
153 bottom: y + 2, | |
154 color: this._gridColor.toHexString(), | |
155 visibility: "hidden" | |
156 }); | |
157 this._labels.push(div); | |
158 } | |
159 if (y + div.clientHeight < this._canvas.height + 10) { | |
160 div.style.visibility = "visible"; // avoid the labels that would overflow | |
161 } | |
162 } | |
163 | |
164 // draw grid | |
165 ctx.beginPath(); | |
166 if (this._gridType == "long" || tick.label == 0) { | |
167 ctx.moveTo(0, y); | |
168 ctx.lineTo(this._canvas.width, y); | |
169 } else if (this._gridType == "short") { | |
170 if (this._axisLabelsPlacement == "left") { | |
171 ctx.moveTo(0, y); | |
172 ctx.lineTo(this._gridShortSize, y); | |
173 } else if (this._axisLabelsPlacement == "right") { | |
174 ctx.moveTo(this._canvas.width, y); | |
175 ctx.lineTo(this._canvas.width - this._gridShortSize, y); | |
176 } | |
177 } | |
178 ctx.stroke(); | |
179 } | |
180 } | |
181 } | |
182 }; | |
183 | |
184 //modified function to prevent from drawing hidden labels | |
185 Timeplot.DefaultTimeGeometry.prototype.paint = function() { | |
186 if (this._canvas) { | |
187 var unit = this._unit; | |
188 var ctx = this._canvas.getContext('2d'); | |
189 | |
190 var gradient = ctx.createLinearGradient(0,0,0,this._canvas.height); | |
191 | |
192 ctx.strokeStyle = gradient; | |
193 ctx.lineWidth = this._gridLineWidth; | |
194 ctx.lineJoin = 'miter'; | |
195 | |
196 // paint grid | |
197 if (this._gridColor) { | |
198 gradient.addColorStop(0, this._gridColor.toString()); | |
199 gradient.addColorStop(1, "rgba(255,255,255,0.9)"); | |
200 for (var i = 0; i < this._grid.length; i++) { | |
201 var tick = this._grid[i]; | |
202 var x = Math.floor(tick.x) + 0.5; | |
203 if (this._axisLabelsPlacement == "top") { | |
204 var div = this._timeplot.putText(this._id + "-" + i, tick.label,"timeplot-grid-label",{ | |
205 left: x + 4, | |
206 top: 2, | |
207 visibility: "hidden" | |
208 }); | |
209 this._labels.push(div); | |
210 } else if (this._axisLabelsPlacement == "bottom") { | |
211 var div = this._timeplot.putText(this._id + "-" + i, tick.label, "timeplot-grid-label",{ | |
212 left: x + 4, | |
213 bottom: 2, | |
214 visibility: "hidden" | |
215 }); | |
216 this._labels.push(div); | |
217 } | |
218 if (!this._hideLabels && x + div.clientWidth < this._canvas.width + 10) { | |
219 div.style.visibility = "visible"; // avoid the labels that would overflow | |
220 } | |
221 | |
222 // draw separator | |
223 ctx.beginPath(); | |
224 ctx.moveTo(x,0); | |
225 ctx.lineTo(x,this._canvas.height); | |
226 ctx.stroke(); | |
227 } | |
228 } | |
229 | |
230 // paint axis | |
231 gradient.addColorStop(0, this._axisColor.toString()); | |
232 gradient.addColorStop(1, "rgba(255,255,255,0.5)"); | |
233 | |
234 ctx.lineWidth = 1; | |
235 gradient.addColorStop(0, this._axisColor.toString()); | |
236 | |
237 ctx.beginPath(); | |
238 ctx.moveTo(0,0); | |
239 ctx.lineTo(this._canvas.width,0); | |
240 ctx.stroke(); | |
241 } | |
242 }; | |
243 | |
244 Timeplot.Plot.prototype.initialize = function(){ | |
245 if (this._dataSource && this._dataSource.getValue) { | |
246 this._timeFlag = this._timeplot.putDiv("timeflag", "timeplot-timeflag"); | |
247 this._valueFlag = this._timeplot.putDiv(this._id + "valueflag", "timeplot-valueflag"); | |
248 this._valueFlagLineLeft = this._timeplot.putDiv(this._id + "valueflagLineLeft", "timeplot-valueflag-line"); | |
249 this._valueFlagLineRight = this._timeplot.putDiv(this._id + "valueflagLineRight", "timeplot-valueflag-line"); | |
250 if (!this._valueFlagLineLeft.firstChild) { | |
251 this._valueFlagLineLeft.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_left.png")); | |
252 this._valueFlagLineRight.appendChild(SimileAjax.Graphics.createTranslucentImage(Timeplot.urlPrefix + "images/line_right.png")); | |
253 } | |
254 this._valueFlagPole = this._timeplot.putDiv(this._id + "valuepole", "timeplot-valueflag-pole"); | |
255 | |
256 var opacity = this._plotInfo.valuesOpacity; | |
257 | |
258 SimileAjax.Graphics.setOpacity(this._timeFlag, opacity); | |
259 SimileAjax.Graphics.setOpacity(this._valueFlag, opacity); | |
260 SimileAjax.Graphics.setOpacity(this._valueFlagLineLeft, opacity); | |
261 SimileAjax.Graphics.setOpacity(this._valueFlagLineRight, opacity); | |
262 SimileAjax.Graphics.setOpacity(this._valueFlagPole, opacity); | |
263 | |
264 var plot = this; | |
265 | |
266 var mouseOverHandler = function(elmt, evt, target){ | |
267 plot._timeFlag.style.visibility = "visible"; | |
268 plot._valueFlag.style.visibility = "visible"; | |
269 plot._valueFlagLineLeft.style.visibility = "visible"; | |
270 plot._valueFlagLineRight.style.visibility = "visible"; | |
271 plot._valueFlagPole.style.visibility = "visible"; | |
272 if (plot._plotInfo.showValues) { | |
273 plot._valueFlag.style.display = "block"; | |
274 mouseMoveHandler(elmt, evt, target); | |
275 } | |
276 } | |
277 | |
278 var mouseOutHandler = function(elmt, evt, target){ | |
279 plot._timeFlag.style.visibility = "hidden"; | |
280 plot._valueFlag.style.visibility = "hidden"; | |
281 plot._valueFlagLineLeft.style.visibility = "hidden"; | |
282 plot._valueFlagLineRight.style.visibility = "hidden"; | |
283 plot._valueFlagPole.style.visibility = "hidden"; | |
284 } | |
285 | |
286 var day = 24 * 60 * 60 * 1000; | |
287 var month = 30 * day; | |
288 | |
289 var mouseMoveHandler = function(elmt, evt, target){ | |
290 if (typeof SimileAjax != "undefined" && plot._plotInfo.showValues) { | |
291 var c = plot._canvas; | |
292 var x = Math.round(SimileAjax.DOM.getEventRelativeCoordinates(evt, plot._canvas).x); | |
293 if (x > c.width) | |
294 x = c.width; | |
295 if (isNaN(x) || x < 0) | |
296 x = 0; | |
297 var t = plot._timeGeometry.fromScreen(x); | |
298 if (t == 0) { // something is wrong | |
299 plot._valueFlag.style.display = "none"; | |
300 return; | |
301 } | |
302 | |
303 var validTime = plot._dataSource.getClosestValidTime(t); | |
304 x = plot._timeGeometry.toScreen(validTime); | |
305 var v = plot._dataSource.getValue(validTime); | |
306 if (plot._plotInfo.roundValues) | |
307 v = Math.round(v); | |
308 plot._valueFlag.innerHTML = v; | |
309 | |
310 var t = new Date(validTime); | |
311 var unit = plot._timeGeometry.extendedDataSource.unit; | |
312 var time = SimileAjax.DateTime; | |
313 var l = SimileAjax.DateTime.getTimeLabel(unit,t); | |
314 | |
315 plot._timeFlag.innerHTML = l; | |
316 | |
317 var tw = plot._timeFlag.clientWidth; | |
318 var th = plot._timeFlag.clientHeight; | |
319 var tdw = Math.round(tw / 2); | |
320 var vw = plot._valueFlag.clientWidth; | |
321 var vh = plot._valueFlag.clientHeight; | |
322 var y = plot._valueGeometry.toScreen(v); | |
323 | |
324 if (x + tdw > c.width) { | |
325 var tx = c.width - tdw; | |
326 } | |
327 else | |
328 if (x - tdw < 0) { | |
329 var tx = tdw; | |
330 } | |
331 else { | |
332 var tx = x; | |
333 } | |
334 | |
335 if (plot._timeGeometry._timeValuePosition == "top") { | |
336 plot._timeplot.placeDiv(plot._valueFlagPole, { | |
337 left: x, | |
338 top: th - 5, | |
339 height: c.height - y - th + 6, | |
340 display: "block" | |
341 }); | |
342 plot._timeplot.placeDiv(plot._timeFlag, { | |
343 left: tx - tdw, | |
344 top: -6, | |
345 display: "block" | |
346 }); | |
347 } | |
348 else { | |
349 plot._timeplot.placeDiv(plot._valueFlagPole, { | |
350 left: x, | |
351 bottom: 0, | |
352 height: c.height, | |
353 display: "block" | |
354 }); | |
355 plot._timeplot.placeDiv(plot._timeFlag, { | |
356 left: tx - tdw, | |
357 bottom: 0, | |
358 display: "block" | |
359 }); | |
360 } | |
361 | |
362 if (x + vw + 14 > c.width && y + vh + 4 > c.height) { | |
363 plot._valueFlagLineLeft.style.display = "none"; | |
364 plot._timeplot.placeDiv(plot._valueFlagLineRight, { | |
365 left: x - 14, | |
366 bottom: y - 14, | |
367 display: "block" | |
368 }); | |
369 plot._timeplot.placeDiv(plot._valueFlag, { | |
370 left: x - vw - 13, | |
371 bottom: y - vh - 13, | |
372 display: "block" | |
373 }); | |
374 } | |
375 else | |
376 if (x + vw + 14 > c.width && y + vh + 4 < c.height) { | |
377 plot._valueFlagLineRight.style.display = "none"; | |
378 plot._timeplot.placeDiv(plot._valueFlagLineLeft, { | |
379 left: x - 14, | |
380 bottom: y, | |
381 display: "block" | |
382 }); | |
383 plot._timeplot.placeDiv(plot._valueFlag, { | |
384 left: x - vw - 13, | |
385 bottom: y + 13, | |
386 display: "block" | |
387 }); | |
388 } | |
389 else | |
390 if (x + vw + 14 < c.width && y + vh + 4 > c.height) { | |
391 plot._valueFlagLineRight.style.display = "none"; | |
392 plot._timeplot.placeDiv(plot._valueFlagLineLeft, { | |
393 left: x, | |
394 bottom: y - 13, | |
395 display: "block" | |
396 }); | |
397 plot._timeplot.placeDiv(plot._valueFlag, { | |
398 left: x + 13, | |
399 bottom: y - 13, | |
400 display: "block" | |
401 }); | |
402 } | |
403 else { | |
404 plot._valueFlagLineLeft.style.display = "none"; | |
405 plot._timeplot.placeDiv(plot._valueFlagLineRight, { | |
406 left: x, | |
407 bottom: y, | |
408 display: "block" | |
409 }); | |
410 plot._timeplot.placeDiv(plot._valueFlag, { | |
411 left: x + 13, | |
412 bottom: y + 13, | |
413 display: "block" | |
414 }); | |
415 } | |
416 } | |
417 } | |
418 | |
419 var timeplotElement = this._timeplot.getElement(); | |
420 this.mouseover = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseover", mouseOverHandler); | |
421 this.mouseout = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mouseout", mouseOutHandler); | |
422 this.mousemove = SimileAjax.DOM.registerPlotEvent(timeplotElement, "mousemove", mouseMoveHandler); | |
423 | |
424 this.opacityPlot = this._timeplot.putDiv( "opacityPlot"+this._timeplot._plots.length, "opacityPlot" ); | |
425 SimileAjax.Graphics.setOpacity(this.opacityPlot, 50 ); | |
426 // this.opacityPlot.style.zIndex = this._timeplot._plots.length; | |
427 this._timeplot.placeDiv( this.opacityPlot, { left: 0, bottom: 0, width: this._canvas.width, height: this._canvas.height }); | |
428 this._opacityCanvas = document.createElement("canvas"); | |
429 this.opacityPlot.appendChild(this._opacityCanvas); | |
430 if(!this._opacityCanvas.getContext && G_vmlCanvasManager) | |
431 this._opacityCanvas = G_vmlCanvasManager.initElement(this._opacityCanvas); | |
432 this._opacityCanvas.width = this._canvas.width; | |
433 this._opacityCanvas.height = this._canvas.height; | |
434 this.opacityPlot.style.visibility = "hidden"; | |
435 | |
436 } | |
437 }; | |
438 | |
439 SimileAjax.DOM.registerPlotEvent = function(elmt, eventName, handler){ | |
440 var handler2 = function(evt){ | |
441 evt = (evt) ? evt : ((event) ? event : null); | |
442 if (evt) { | |
443 var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); | |
444 if (target) { | |
445 target = (target.nodeType == 1 || target.nodeType == 9) ? target : target.parentNode; | |
446 } | |
447 | |
448 return handler(elmt, evt, target); | |
449 } | |
450 return true; | |
451 } | |
452 | |
453 if (SimileAjax.Platform.browser.isIE) { | |
454 elmt.attachEvent("on" + eventName, handler2); | |
455 } | |
456 else { | |
457 elmt.addEventListener(eventName, handler2, false); | |
458 } | |
459 | |
460 return handler2; | |
461 }; | |
462 | |
463 SimileAjax.DOM.getEventRelativeCoordinates = function(evt, elmt) { | |
464 if (SimileAjax.Platform.browser.isIE) { | |
465 var coords = SimileAjax.DOM.getPageCoordinates(elmt); | |
466 return { | |
467 x: evt.clientX - coords.left, | |
468 y: evt.clientY - coords.top | |
469 }; | |
470 } else { | |
471 var coords = SimileAjax.DOM.getPageCoordinates(elmt); | |
472 | |
473 if ((evt.type == "DOMMouseScroll") && | |
474 SimileAjax.Platform.browser.isFirefox && | |
475 (SimileAjax.Platform.browser.majorVersion == 2)) { | |
476 // Due to: https://bugzilla.mozilla.org/show_bug.cgi?id=352179 | |
477 | |
478 return { | |
479 x: evt.screenX - coords.left, | |
480 y: evt.screenY - coords.top | |
481 }; | |
482 } else { | |
483 return { | |
484 x: evt.pageX - coords.left, | |
485 y: evt.pageY - coords.top | |
486 }; | |
487 } | |
488 } | |
489 }; | |
490 | |
491 SimileAjax.Graphics.setOpacity = function(elmt, opacity) { | |
492 if (SimileAjax.Platform.browser.isIE) { | |
493 elmt.style.filter = "alpha(opacity = " + opacity + ")"; | |
494 } else { | |
495 var o = (opacity / 100).toString(); | |
496 elmt.style.opacity = o; | |
497 elmt.style.MozOpacity = o; | |
498 } | |
499 }; | |
500 | |
501 Timeplot.Plot.prototype.fullOpacityPlot = function( left, right, lp, rp, lft, rft, pixel, c ) { | |
502 | |
503 var ctx = this._opacityCanvas.getContext('2d'); | |
504 | |
505 ctx.clearRect(0,0,this._canvas.width,this._canvas.height); | |
506 ctx.lineWidth = this._plotInfo.lineWidth; | |
507 ctx.lineJoin = 'miter'; | |
508 | |
509 var h = this._canvas.height; | |
510 ctx.fillStyle = this._plotInfo.lineColor.toString(); | |
511 | |
512 var data = this._dataSource.getData(); | |
513 var times = data.times; | |
514 var values = data.values; | |
515 var first; | |
516 | |
517 if( lft != null && lft.getTime() != left.getTime() ){ | |
518 var gradient = ctx.createLinearGradient(lp-pixel, 0, lp, 0); | |
519 gradient.addColorStop(0, 'rgba('+c.r1+','+c.g1+','+c.b1+',0)'); | |
520 gradient.addColorStop(1, 'rgba('+c.r1+','+c.g1+','+c.b1+',1)'); | |
521 first = true; | |
522 ctx.beginPath(); | |
523 for (var t = 0; t < times.length; t++){ | |
524 var x = this._timeGeometry.toScreen(times[t]); | |
525 var y = this._valueGeometry.toScreen(values[t]); | |
526 if( times[t].getTime() == left.getTime() ){ | |
527 ctx.lineTo(x, h - y); | |
528 ctx.lineTo(x, h); | |
529 ctx.fillStyle = gradient; | |
530 ctx.fill(); | |
531 break; | |
532 } | |
533 else if ( times[t].getTime() >= lft.getTime() ) { | |
534 if (first) { | |
535 ctx.moveTo(x, h); | |
536 first = false; | |
537 } | |
538 ctx.lineTo(x, h - y); | |
539 } | |
540 } | |
541 } | |
542 | |
543 if( rft != null && rft.getTime() != right.getTime() ){ | |
544 var gradient = ctx.createLinearGradient(rp, 0, rp+pixel, 0); | |
545 gradient.addColorStop(0, 'rgba('+c.r1+','+c.g1+','+c.b1+',1)'); | |
546 gradient.addColorStop(1, 'rgba('+c.r1+','+c.g1+','+c.b1+',0)'); | |
547 first = true; | |
548 ctx.beginPath(); | |
549 for (var t = 0; t < times.length; t++){ | |
550 var x = this._timeGeometry.toScreen(times[t]); | |
551 var y = this._valueGeometry.toScreen(values[t]); | |
552 if( times[t].getTime() == rft.getTime() ){ | |
553 ctx.lineTo(x, h - y); | |
554 ctx.lineTo(x, h); | |
555 ctx.fillStyle = gradient; | |
556 ctx.fill(); | |
557 break; | |
558 } | |
559 else if ( times[t].getTime() >= right.getTime() ) { | |
560 if (first) { | |
561 ctx.moveTo(x, h); | |
562 first = false; | |
563 } | |
564 ctx.lineTo(x, h - y); | |
565 } | |
566 } | |
567 } | |
568 | |
569 first = true; | |
570 ctx.beginPath(); | |
571 ctx.fillStyle = this._plotInfo.lineColor.toString(); | |
572 for (var t = 0; t < times.length; t++) | |
573 if (!(times[t].getTime() < left.getTime() || times[t].getTime() > right.getTime())) { | |
574 var x = this._timeGeometry.toScreen(times[t]); | |
575 var y = this._valueGeometry.toScreen(values[t]); | |
576 if (first) { | |
577 ctx.moveTo(x, h); | |
578 first = false; | |
579 } | |
580 ctx.lineTo(x, h - y); | |
581 if (times[t].getTime() == right.getTime() || t == times.length - 1 ) | |
582 ctx.lineTo(x, h); | |
583 } | |
584 ctx.fill(); | |
585 | |
586 }; | |
587 | |
588 Timeplot._Impl.prototype.regularGrid = function(){ | |
589 | |
590 var canvas = this.getCanvas(); | |
591 var ctx = canvas.getContext('2d'); | |
592 var gradient = ctx.createLinearGradient(0,0,0,canvas.height); | |
593 gradient.addColorStop(0, "rgb(0,0,0)"); | |
594 gradient.addColorStop(1, "rgba(255,255,255,0.9)"); | |
595 ctx.strokeStyle = gradient; | |
596 ctx.lineWidth = 0.5; | |
597 ctx.lineJoin = 'miter'; | |
598 | |
599 var xDist = canvas.width / 9; | |
600 var positions = []; | |
601 for( var i=1; i<9; i++ ){ | |
602 var x = i*xDist; | |
603 ctx.beginPath(); | |
604 ctx.moveTo(x,0); | |
605 ctx.lineTo(x,canvas.height); | |
606 ctx.stroke(); | |
607 positions.push({ label: '', x: x }); | |
608 } | |
609 return positions; | |
610 | |
611 }; | |
612 | |
613 Timeplot.Plot.prototype._plot = function(f) { | |
614 var ctx = this._canvas.getContext('2d'); | |
615 f = function(x,y,draw) { | |
616 if( draw ){ | |
617 ctx.lineTo(x,y); | |
618 } | |
619 else { | |
620 ctx.moveTo(x,y); | |
621 } | |
622 }; | |
623 var data = this._dataSource.getData(); | |
624 if (data) { | |
625 var times = data.times; | |
626 var values = data.values; | |
627 var T = times.length; | |
628 ctx.moveTo(0,0); | |
629 for (var t = 0; t < T; t++) { | |
630 var x = this._timeGeometry.toScreen(times[t]); | |
631 var y = this._valueGeometry.toScreen(values[t]); | |
632 var draw = false; | |
633 if( t > 0 && ( values[t-1] > 0 || values[t] > 0 ) ){ | |
634 draw = true; | |
635 } | |
636 if( t == 0 ){ | |
637 draw = true; | |
638 } | |
639 f(x,y,draw); | |
640 } | |
641 } | |
642 }; | |
643 | |
644 SimileAjax.DOM.registerEvent = function(elmt, eventName, handler) { | |
645 var handler2 = function(evt) { | |
646 evt = (evt) ? evt : ((event) ? event : null); | |
647 if (evt) { | |
648 var target = (evt.target) ? | |
649 evt.target : ((evt.srcElement) ? evt.srcElement : null); | |
650 if (target) { | |
651 target = (target.nodeType == 1 || target.nodeType == 9) ? | |
652 target : target.parentNode; | |
653 } | |
654 | |
655 return handler(elmt, evt, target); | |
656 } | |
657 return true; | |
658 } | |
659 | |
660 if (SimileAjax.Platform.browser.isIE) { | |
661 elmt.attachEvent("on" + eventName, handler2); | |
662 } else { | |
663 if( eventName == "mousewheel" ){ | |
664 eventName = "DOMMouseScroll"; | |
665 } | |
666 elmt.addEventListener(eventName, handler2, false); | |
667 } | |
668 }; | |
669 |