2 * o------------------------------------------------------------------------------o
3 * | This file is part of the RGraph package - you can learn more at: |
5 * | http://www.rgraph.net |
7 * | This package is licensed under the RGraph license. For all kinds of business |
8 * | purposes there is a small one-time licensing fee to pay and for non |
9 * | commercial purposes it is free to use. You can read the full license here: |
11 * | http://www.rgraph.net/LICENSE.txt |
12 * o------------------------------------------------------------------------------o
15 if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
19 * Installs the event handlers for zooming an area of the graph
21 * @param object obj Your graph object
23 RGraph.ZoomArea = function (obj)
25 if (obj.Get('chart.zoom.mode') == 'area') {
27 var canvas = obj.canvas;
28 var context = obj.context;
30 obj.canvas.style.cursor = 'crosshair';
35 canvas.onmousedown = function(e)
37 var canvas = e.target;
38 var coords = RGraph.getMouseXY(e);
39 var obj = canvas.__object__;
41 if (RGraph.Registry.Get('chart.zoomed.area.div')) {
42 RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none';
45 if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) {
46 RGraph.Registry.Set('chart.zoomed.area.divs', []);
50 var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
52 if (divs && divs.length) {
53 for (var i=0; i<divs.length; ++i) {
55 divs[i].style.display = 'none';
63 * Create the indicator DIV
65 var canvasXY = RGraph.getCanvasXY(canvas);
66 var areaDiv = document.createElement('DIV');
67 areaDiv.__canvas__ = canvas;
68 areaDiv.style.position = 'absolute';
69 areaDiv.style.left = canvasXY[0] + coords[0] + 'px'
70 areaDiv.style.top = canvasXY[1] + coords[1] + 'px'
71 areaDiv.style.width = 0;
72 areaDiv.style.height = 0;
73 areaDiv.style.border = '1px solid black';
74 areaDiv.style.backgroundColor = 'rgba(220,220,220,0.3)';
75 areaDiv.style.display = 'none';
77 areaDiv.onmouseover = function (e)
79 setTimeout(function () {e.target.style.opacity = 0.8;}, 50);
80 setTimeout(function () {e.target.style.opacity = 0.6;}, 100);
81 setTimeout(function () {e.target.style.opacity = 0.4;}, 150);
82 setTimeout(function () {e.target.style.opacity = 0.2;}, 200);
83 setTimeout(function () {e.target.style.opacity = 0;}, 250);
84 setTimeout(function () {e.target.style.display = 'none';}, 300);
85 setTimeout(function () {e.target = null;}, 350);
88 document.body.appendChild(areaDiv);
91 RGraph.Registry.Set('chart.zoomed.area.div', null);
92 RGraph.Registry.Set('chart.zoomed.area.mousedown', coords);
93 RGraph.Registry.Set('chart.zoomed.area.areadiv', areaDiv);
97 canvas.onmousemove = function (e)
99 var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
101 if (startCoords && startCoords.length) {
103 var coords = RGraph.getMouseXY(e);
104 var canvasXY = RGraph.getCanvasXY(e.target);
105 var obj = e.target.__object__;
106 var context = obj.context;
107 var canvas = obj.canvas;
108 var startx = startCoords[0];
109 var starty = startCoords[1];
110 var endx = coords[0];
111 var endy = coords[1];
112 var width = endx - startx;
113 var height = endy - starty;
114 var areaDiv = RGraph.Registry.Get('chart.zoomed.area.areadiv');
116 if (width >= 0 && height >= 0) {
118 if (width > 5 && height > 5) {
119 areaDiv.style.width = (width - 15) + 'px';
120 areaDiv.style.height = (height - 15) + 'px';
121 areaDiv.style.display = 'inline';
123 areaDiv.style.display = 'none';
126 } else if (width < -5 || height < -5) {
128 var canvasCoords = RGraph.getCanvasXY(canvas);
129 var noticeDiv = document.createElement('DIV');
131 noticeDiv.style.position = 'absolute';
132 noticeDiv.style.top = 0;
133 noticeDiv.style.left = 0;
134 noticeDiv.style.zIndex = 99;
135 noticeDiv.style.border = '1px dashed black';
136 noticeDiv.style.backgroundColor = '#ffc1c1';
137 noticeDiv.style.MozBoxShadow = '0 0 5px #999';
138 noticeDiv.style.WebkitBoxShadow = '0 0 5px #999';
139 noticeDiv.style.boxShadow = '0 0 5px #999';
140 noticeDiv.style.padding = '2px';
141 noticeDiv.innerHTML = 'Zoom goes right and down';
142 document.body.appendChild(noticeDiv);
144 // Reposition the warning
145 noticeDiv.style.top = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px';
146 noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px';
147 noticeDiv.style.width = noticeDiv.offsetWidth + 'px';
149 setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100);
150 setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200);
151 setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300);
152 setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400);
153 setTimeout(function () {noticeDiv.style.display = 'none';}, 2500);
154 setTimeout(function () {noticeDiv = null;}, 2600);
160 canvas.onmouseup = function (e)
162 RGraph.FixEventObject(e);
164 var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
165 var coords = RGraph.getMouseXY(e);
167 // Do the zooming here
168 if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) {
172 RGraph.Registry.Get('chart.zoomed.area.areadiv').style.display = 'none';
173 RGraph.Registry.Get('chart.zoomed.area.areadiv').style.left = '-1000px';
174 RGraph.Registry.Get('chart.zoomed.area.areadiv').style.top = '-1000px';
175 RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
177 if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) {
178 RGraph.Registry.Set('chart.zoomed.area.mousedown', false);
182 var canvas = e.target;
183 var obj = canvas.__object__;
184 var context = obj.context;
185 var canvasCoords = RGraph.getCanvasXY(e.target);
186 var coords = RGraph.getMouseXY(e);
187 var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
188 var startx = startCoords[0];
189 var starty = startCoords[1];
190 var endx = coords[0] - 15;
191 var endy = coords[1] - 15;
192 var width = Math.abs(endx - startx);
193 var height = Math.abs(endy - starty);
194 var factor = obj.Get('chart.zoom.factor') - 1;
196 var img = document.createElement('IMG');
197 img.src = canvas.toDataURL();
198 img.style.position = 'relative';
199 img.style.left = (factor + 1) * -1 * startx + 'px';
200 img.style.top = (factor + 1) * -1 * starty + 'px';
201 img.width = (factor + 1) * canvas.width;
202 img.height = (factor + 1) * canvas.height;
204 var div = document.createElement('DIV');
205 div.__object__ = obj;
206 div.className = 'RGraph_zoomed_area';
207 div.style.position = 'absolute';
208 div.style.backgroundColor = 'white';
209 div.style.cursor = 'move';
211 div.style.top = e.pageY + 'px';
212 div.style.left = e.pageX + 'px';
213 div.origWidth = width;
214 div.origHeight = height;
215 div.style.width = width + 'px';
216 div.style.height = height + 'px';
217 div.style.border = '1px solid black';
218 div.style.boxShadow = '0 0 15px black';
219 div.style.MozBoxShadow = '0 0 15px black';
220 div.style.WebkitBoxShadow = '0 0 15px black';
221 div.style.overflow = 'hidden';
222 div.style.opacity = 0;
223 div.style.zIndex = 99;
225 document.body.appendChild(div);
226 div.appendChild(img);
230 * This facilitates expanding the zoomed area once visible (the double click)
232 div.ondblclick = function (event)
234 var event = RGraph.FixEventObject(event);
235 var img = event.target;
236 var div = event.target.parentNode;
238 var current_width = div.offsetWidth
239 var current_height = div.offsetHeight
240 var target_width = img.offsetWidth;
241 var target_height = img.offsetHeight;
242 var diff_width = target_width - current_width;
243 var diff_height = target_height - current_height;
245 var img_offset_left = parseInt(img.offsetLeft);
246 var img_offset_top = parseInt(img.offsetTop);
248 // Global vars on purpose so the timers can access them
249 __zoomed_div_style__ = div.style;
250 __zoomed_img_style__ = img.style;
252 setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50);
253 setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100);
254 setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150);
255 setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200);
256 setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250);
258 setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50);
259 setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100);
260 setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150);
261 setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200);
262 setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250);
264 setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50);
265 setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100);
266 setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150);
267 setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200);
268 setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250);
270 setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50);
271 setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100);
272 setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150);
273 setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200);
274 setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250);
276 // Move the image within the div
277 setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50);
278 setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100);
279 setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150);
280 setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200);
281 setTimeout("__zoomed_img_style__.left = 0", 250);
283 setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50);
284 setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100);
285 setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150);
286 setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200);
287 setTimeout("__zoomed_img_style__.top = 0", 250);
289 div.ondblclick = null;
292 * Make the zoomed bit draggable
294 div.onmousedown = function (e)
296 e = RGraph.FixEventObject(e);
298 var div = e.target.parentNode;
299 var img = div.childNodes[0];
301 if (e.button == 0 || e.button == 1 ) {
303 div.__offsetx__ = e.offsetX + img.offsetLeft;
304 div.__offsety__ = e.offsetY + img.offsetTop;
306 RGraph.Registry.Set('chart.mousedown', div);
307 RGraph.Registry.Set('chart.button', 0);
311 img.__startx__ = e.pageX;
312 img.__starty__ = e.pageY;
314 img.__originalx__ = img.offsetLeft;
315 img.__originaly__ = img.offsetTop;
317 RGraph.Registry.Set('chart.mousedown', img);
318 RGraph.Registry.Set('chart.button', 2);
321 * Don't show a context menu when the zoomed area is right-clicked on
323 window.oncontextmenu = function (e)
325 e = RGraph.FixEventObject(e);
329 // [18th July 2010] Is this reallly necessary?
330 window.oncontextmenu = function (e)
345 window.onmouseup = function (e)
347 RGraph.Registry.Set('chart.mousedown', false);
350 window.onmousemove = function (e)
352 if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) {
354 var div = RGraph.Registry.Get('chart.mousedown');
356 var x = e.pageX - div.__offsetx__;
357 var y = e.pageY - div.__offsety__;
359 div.style.left = x + 'px';
360 div.style.top = y + 'px';
362 } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) {
364 var img = RGraph.Registry.Get('chart.mousedown');
366 var x = img.__originalx__ + e.pageX - img.__startx__;
367 var y = img.__originaly__ + e.pageY - img.__starty__;
369 img.style.left = x + 'px';
370 img.style.top = y + 'px';
376 var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
377 if (typeof(divs) == 'object') {
380 RGraph.Registry.Set('chart.zoomed.area.divs', [div])
383 // Create the background
384 var bg = document.createElement('DIV');
385 bg.style.position = 'fixed'
386 bg.style.zIndex = 98;
389 bg.style.backgroundColor = '#999';
390 bg.style.opacity = 0;
391 bg.style.width = (screen.width + 100) + 'px';
392 bg.style.height = (screen.height + 100) + 'px';
393 document.body.appendChild(bg);
395 bg.onclick = function (e)
397 div.style.display = 'none';
398 bg.style.display = 'none';
404 setTimeout(function (){div.style.opacity = 0.2;}, 50);
405 setTimeout(function (){div.style.opacity = 0.4;}, 100);
406 setTimeout(function (){div.style.opacity = 0.6;}, 150);
407 setTimeout(function (){div.style.opacity = 0.8;}, 200);
408 setTimeout(function (){div.style.opacity = 1.0;}, 250);
410 setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50);
411 setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100);
412 setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150);
413 setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200);
414 setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250);
416 setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50);
417 setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100);
418 setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150);
419 setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200);
420 setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250);
422 setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50);
423 setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100);
424 setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150);
425 setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200);
426 setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250);
428 setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50);
429 setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100);
430 setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150);
431 setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200);
432 setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250);
434 setTimeout(function (){bg.style.opacity = 0.1;}, 50);
435 setTimeout(function (){bg.style.opacity = 0.2;}, 100);
436 setTimeout(function (){bg.style.opacity = 0.3;}, 150);
437 setTimeout(function (){bg.style.opacity = 0.4;}, 200);
438 setTimeout(function (){bg.style.opacity = 0.5;}, 250);
440 RGraph.Registry.Set('chart.zoomed.area.bg', bg);
441 RGraph.Registry.Set('chart.zoomed.area.img', img);
442 RGraph.Registry.Set('chart.zoomed.area.div', div);
443 RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
447 * Fire the zoom event
449 RGraph.FireCustomEvent(obj, 'onzoom');
452 canvas.onmouseout = function (e)
454 RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
455 RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
456 RGraph.Registry.Set('chart.zoomed.area.div', null);
463 * This function sets up the zoom window if requested
465 * @param obj object The graph object
467 RGraph.ShowZoomWindow = function (obj)
469 var gutter = obj.Get('chart.gutter');
471 if (obj.Get('chart.zoom.mode') == 'thumbnail') {
472 RGraph.ZoomWindow(obj.canvas);
475 if (obj.Get('chart.zoom.mode') == 'area') {
476 RGraph.ZoomArea(obj);
482 * Installs the evnt handler for the zoom window/THUMBNAIL
484 RGraph.ZoomWindow = function (canvas)
486 canvas.onmousemove = function (e)
488 e = RGraph.FixEventObject(e);
490 var obj = e.target.__object__;
491 var canvas = obj.canvas;
492 var context = obj.context;
493 var coords = RGraph.getMouseXY(e);
498 if (!RGraph.Registry.Get('chart.zoomed.div')) {
500 var div = document.createElement('div');
501 div.className = 'RGraph_zoom_window';
502 div.style.width = obj.Get('chart.zoom.thumbnail.width') + 'px';
503 div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px';
505 // Added back in on the 17th December
506 div.style.border = '2px dashed gray';
508 div.style.position = 'absolute';
509 div.style.overflow = 'hidden';
510 div.style.backgroundColor = 'white';
512 // Initially the zoomed layer should be off-screen
513 div.style.left = '-1000px';
514 div.style.top = '-1000px';
516 // Should these be 0? No.
517 div.style.borderRadius = '5px';
518 div.style.MozBorderRadius = '5px';
519 div.style.WebkitBorderRadius = '5px';
521 if (obj.Get('chart.zoom.shadow')) {
522 div.style.boxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
523 div.style.MozBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
524 div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
527 //div.style.opacity = 0.2;
528 div.__object__ = obj;
529 document.body.appendChild(div);
532 * Get the canvas as an image
534 var img = document.createElement('img');
535 img.width = obj.canvas.width * obj.Get('chart.zoom.factor');
536 img.height = obj.canvas.height * obj.Get('chart.zoom.factor');
537 img.style.position = 'relative';
538 img.style.backgroundColor = 'white';
539 img.__object__ = obj;
541 div.appendChild(img);
543 RGraph.Registry.Set('chart.zoomed.div', div);
544 RGraph.Registry.Set('chart.zoomed.img', img);
547 setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5);
551 div = RGraph.Registry.Get('chart.zoomed.div');
552 img = RGraph.Registry.Get('chart.zoomed.img');
555 // Make sure the image is up-to-date
556 img.src = canvas.toDataURL();
559 * Ensure the div is visible
561 if (div && div.style.opacity < 1) {
562 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
566 * Get the canvas x/y coords
568 var c = RGraph.getCanvasXY(obj.canvas);
573 * Position the div and img
577 div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px';
578 div.style.top = (e.pageY - obj.Get('chart.zoom.thumbnail.height') - offset) + 'px';
580 var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor'));
581 var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor'));
584 img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
585 img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
588 * Fire the onzoom event
590 RGraph.FireCustomEvent(obj, 'onzoom');
594 * The onmouseover event. Evidently. Fades the zoom window in
596 canvas.onmouseover = function (e)
598 var div = RGraph.Registry.Get('chart.zoomed.div');
603 var obj = div.__object__;
605 // Used for the enlargement animation
606 var targetWidth = obj.Get('chart.zoom.thumbnail.width');
607 var targetHeight = obj.Get('chart.zoom.thumbnail.height');
610 div.style.height = 0;
612 if (obj.Get('chart.zoom.fade.in')) {
614 RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2;
615 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100);
616 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200);
617 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300);
618 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
622 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1);
625 // The enlargement animation frames
626 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75);
627 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150);
628 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225);
629 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300);
630 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325);
632 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75);
633 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150);
634 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225);
635 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300);
636 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375);
639 canvas.onmouseout = function (e)
641 if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
643 RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
644 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
645 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
646 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
647 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
649 // Get rid of the zoom window
650 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
651 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
654 // Get rid of the zoom window
655 if (RGraph.Registry.Get('chart.zoomed.div')) {
656 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
657 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41);
666 * @param e object The event object
668 RGraph.Zoom = function (e)
670 e = RGraph.FixEventObject(e);
673 * Show the zoom window
675 //if ((e.target.__canvas__ && e.target.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') || (e.target.parentNode.__canvas__ && e.target.parentNode.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') ) {
676 // return RGraph.ZoomWindow(e);
679 var canvas = e.target.__canvas__;
680 var context = canvas.getContext('2d');
681 var obj = canvas.__object__;
682 var dataurl = canvas.toDataURL();
684 var coords = RGraph.getCanvasXY(canvas);
685 var factor = obj.Get('chart.zoom.factor') - 1;
690 var img = document.createElement('img');
691 img.className = 'RGraph_zoomed_canvas';
692 img.style.border = '3px solid gray';
693 img.style.width = canvas.width + 'px';
694 img.style.height = canvas.height + 'px';
695 img.style.position = 'absolute';
696 img.style.left = x + 'px';
697 img.style.top = y + 'px';
698 img.style.backgroundColor = 'white';
699 img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1;
700 img.style.zIndex = 99;
702 document.body.appendChild(img);
704 //RGraph.Registry.Set('chart.zoomedimage', img);
705 // Store the zoomed image in a global var - NOT the registry
706 __zoomedimage__ = img;
707 __zoomedimage__.obj = obj;
709 // Image onclick should not hide the image
710 img.onclick = function (e)
712 e = RGraph.FixEventObject(e);
717 setTimeout(function () {window.onclick = RGraph.HideZoomedCanvas;}, 1);
719 var width = parseInt(canvas.width);
720 var height = parseInt(canvas.height);
721 var frames = obj.Get('chart.zoom.frames');
722 var delay = obj.Get('chart.zoom.delay');
724 // Increase the width over 10 frames - center
725 if (obj.Get('chart.zoom.hdir') == 'center') {
727 for (var i=1; i<=frames; ++i) {
728 var newWidth = width * factor * (i/frames) + width;
729 var rightHandEdge = x + canvas.width;
730 var newLeft = (x + (canvas.width / 2)) - (newWidth / 2);
732 setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
736 } else if (obj.Get('chart.zoom.hdir') == 'left') {
737 for (var i=1; i<=frames; ++i) {
738 var newWidth = width * factor * (i/frames) + width;
739 var rightHandEdge = x + canvas.width;
740 var newLeft = rightHandEdge - newWidth;
742 setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
747 for (var i=1; i<=frames; ++i) {
748 var newWidth = width * factor * (i/frames) + width;
749 setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay);
753 // Increase the height over 10 frames - up
754 if (obj.Get('chart.zoom.vdir') == 'up') {
755 for (var i=1; i<=frames; ++i) {
756 var newHeight = (height * factor * (i/frames)) + height;
757 var bottomEdge = y + canvas.height;
758 var newTop = bottomEdge - newHeight;
760 setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
764 } else if (obj.Get('chart.zoom.vdir') == 'center') {
765 for (var i=1; i<=frames; ++i) {
766 var newHeight = (height * factor * (i/frames)) + height;
767 var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2);
768 var newTop = bottomEdge - newHeight;
770 setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
775 for (var i=1; i<=frames; ++i) {
776 setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay);
780 // If enabled, increase the opactity over 10 frames
781 if (obj.Get('chart.zoom.fade.in')) {
782 for (var i=1; i<=frames; ++i) {
783 setTimeout("__zoomedimage__.style.opacity = " + String(i / frames), i * delay);
787 // If stipulated, produce a shadow
788 if (obj.Get('chart.zoom.shadow')) {
789 for (var i=1; i<=frames; ++i) {
790 setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
791 setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
792 setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
797 * The onmouseout event. Hides the zoom window. Fades the zoom out
799 canvas.onmouseout = function (e)
801 if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
803 RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
804 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
805 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
806 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
807 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
809 // Get rid of the zoom window
810 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
811 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
815 // Get rid of the zoom window
816 if (RGraph.Registry.Get('chart.zoomed.div')) {
817 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
818 setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1);
824 if (obj.Get('chart.zoom.background')) {
825 var div = document.createElement('DIV');
826 div.style.backgroundColor = '#999';
827 div.style.opacity = 0;
828 div.style.position = 'fixed';
831 div.style.width = (screen.width + 100) + 'px';
832 div.style.height = (screen.height + 100) + 'px';
833 div.style.zIndex = 98;
835 // Hides the zoomed caboodle
836 div.oncontextmenu = function (e)
838 return RGraph.HideZoomedCanvas(e);
841 // 30th July 2010 - Is this necessary?
842 //for (var i=1; i<=frames; ++i) {
843 // setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay);
845 // // MSIE doesn't support zoom
846 // //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50);
849 div.origHeight = div.style.height;
851 document.body.appendChild(div);
853 __zoomedbackground__ = div;
855 // If the window is resized, hide the zoom
856 //window.onresize = RGraph.HideZoomedCanvas;
858 for (var i=1; i<=frames; ++i) {
859 setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * delay);
864 * Fire the onzoom event
866 RGraph.FireCustomEvent(obj, 'onzoom');