/** * o------------------------------------------------------------------------------o * | This file is part of the RGraph package - you can learn more at: | * | | * | http://www.rgraph.net | * | | * | This package is licensed under the RGraph license. For all kinds of business | * | purposes there is a small one-time licensing fee to pay and for non | * | commercial purposes it is free to use. You can read the full license here: | * | | * | http://www.rgraph.net/LICENSE.txt | * o------------------------------------------------------------------------------o */ if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; /** * Installs the event handlers for zooming an area of the graph * * @param object obj Your graph object */ RGraph.ZoomArea = function (obj) { if (obj.Get('chart.zoom.mode') == 'area') { var canvas = obj.canvas; var context = obj.context; obj.canvas.style.cursor = 'crosshair'; RGraph.Register(obj); canvas.onmousedown = function(e) { var canvas = e.target; var coords = RGraph.getMouseXY(e); var obj = canvas.__object__; if (RGraph.Registry.Get('chart.zoomed.area.div')) { RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none'; } if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) { RGraph.Registry.Set('chart.zoomed.area.divs', []); } else { var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); if (divs && divs.length) { for (var i=0; i= 0 && height >= 0) { context.beginPath(); context.lineWidth = 1; context.strokeStyle = 'black'; context.fillStyle = 'rgba(220,220,220,0.3)'; context.fillRect(startx, starty, width, height); context.strokeRect(startx, starty, width, height); context.fill(); context.stroke(); } else if (width < -5 || height < -5) { var canvasCoords = RGraph.getCanvasXY(canvas); var noticeDiv = document.createElement('DIV'); noticeDiv.style.position = 'absolute'; noticeDiv.style.top = 0; noticeDiv.style.left = 0; noticeDiv.style.zIndex = 99; noticeDiv.style.border = '1px dashed black'; noticeDiv.style.backgroundColor = '#ffc1c1'; noticeDiv.style.MozBoxShadow = '0 0 5px #999'; noticeDiv.style.MozBorderRadius = '5px'; noticeDiv.style.WebkitBoxShadow = '0 0 5px #999'; noticeDiv.style.WebkitBorderRadius = '5px'; noticeDiv.style.borderRadius = '5px'; noticeDiv.style.boxShadow = '0 0 5px #999'; noticeDiv.style.padding = '2px'; noticeDiv.innerHTML = 'Zoom goes right and down'; document.body.appendChild(noticeDiv); // Reposition the warning noticeDiv.style.top = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px'; noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px'; noticeDiv.style.width = noticeDiv.offsetWidth + 'px'; setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100); setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200); setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300); setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400); setTimeout(function () {noticeDiv.style.display = 'none';}, 2500); setTimeout(function () {noticeDiv = null;}, 2600); } } } canvas.onmouseup = function (e) { RGraph.FixEventObject(e); var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); var coords = RGraph.getMouseXY(e); // Do the zooming here if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) { RGraph.Redraw(); if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) { RGraph.Registry.Set('chart.zoomed.area.mousedown', false); return; } var canvas = e.target; var obj = canvas.__object__; var context = obj.context; var canvasCoords = RGraph.getCanvasXY(e.target); var coords = RGraph.getMouseXY(e); var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); var startx = startCoords[0]; var starty = startCoords[1]; var endx = coords[0]; var endy = coords[1]; var width = Math.abs(endx - startx); var height = Math.abs(endy - starty); var factor = obj.Get('chart.zoom.factor') - 1; var img = document.createElement('IMG'); img.src = canvas.toDataURL(); img.style.position = 'relative'; img.style.left = (factor + 1) * -1 * startx + 'px'; img.style.top = (factor + 1) * -1 * starty + 'px'; img.width = (factor + 1) * canvas.width; img.height = (factor + 1) * canvas.height; var div = document.createElement('DIV'); div.__object__ = obj; div.className = 'RGraph_zoomed_area'; div.style.position = 'absolute'; div.style.backgroundColor = 'white'; div.style.cursor = 'move'; div.style.top = e.pageY + 'px'; div.style.left = e.pageX + 'px'; div.origWidth = width; div.origHeight = height; div.style.width = width + 'px'; div.style.height = height + 'px'; div.style.border = '1px dashed black'; div.style.boxShadow = '0 0 15px black'; div.style.MozBoxShadow = '0 0 15px black'; div.style.WebkitBoxShadow = '0 0 15px black'; div.style.overflow = 'hidden'; div.style.opacity = 0; div.style.zIndex = 99; document.body.appendChild(div); div.appendChild(img); /** * This facilitates expanding the zoomed area once visible (the double click) */ div.ondblclick = function (event) { var event = RGraph.FixEventObject(event); var img = event.target; var div = event.target.parentNode; var current_width = div.offsetWidth var current_height = div.offsetHeight var target_width = img.offsetWidth; var target_height = img.offsetHeight; var diff_width = target_width - current_width; var diff_height = target_height - current_height; var img_offset_left = parseInt(img.offsetLeft); var img_offset_top = parseInt(img.offsetTop); // Global vars on purpose so the timers can access them __zoomed_div_style__ = div.style; __zoomed_img_style__ = img.style; setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50); setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100); setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150); setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200); setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250); setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50); setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100); setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150); setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200); setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250); setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50); setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100); setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150); setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200); setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250); setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50); setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100); setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150); setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200); setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250); // Move the image within the div setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50); setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100); setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150); setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200); setTimeout("__zoomed_img_style__.left = 0", 250); setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50); setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100); setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150); setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200); setTimeout("__zoomed_img_style__.top = 0", 250); div.ondblclick = null; } /** * Make the zoomed bit draggable */ div.onmousedown = function (e) { e = RGraph.FixEventObject(e); var div = e.target.parentNode; var img = div.childNodes[0]; if (e.button == 0 || e.button == 1 ) { div.__offsetx__ = e.offsetX + img.offsetLeft; div.__offsety__ = e.offsetY + img.offsetTop; RGraph.Registry.Set('chart.mousedown', div); RGraph.Registry.Set('chart.button', 0); } else { img.__startx__ = e.pageX; img.__starty__ = e.pageY; img.__originalx__ = img.offsetLeft; img.__originaly__ = img.offsetTop; RGraph.Registry.Set('chart.mousedown', img); RGraph.Registry.Set('chart.button', 2); /** * Don't show a context menu when the zoomed area is right-clicked on */ window.oncontextmenu = function (e) { e = RGraph.FixEventObject(e); e.stopPropagation(); // [18th July 2010] Is this reallly necessary? window.oncontextmenu = function (e) { return true; } return false; } } e.stopPropagation(); return false; } window.onmouseup = function (e) { RGraph.Registry.Set('chart.mousedown', false); } window.onmousemove = function (e) { if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) { var div = RGraph.Registry.Get('chart.mousedown'); var x = e.pageX - div.__offsetx__; var y = e.pageY - div.__offsety__; div.style.left = x + 'px'; div.style.top = y + 'px'; } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) { var img = RGraph.Registry.Get('chart.mousedown'); var x = img.__originalx__ + e.pageX - img.__startx__; var y = img.__originaly__ + e.pageY - img.__starty__; img.style.left = x + 'px'; img.style.top = y + 'px'; } } // End dragging code var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); if (typeof(divs) == 'object') { divs.push(div); } else { RGraph.Registry.Set('chart.zoomed.area.divs', [div]) } // Create the background var bg = document.createElement('DIV'); bg.style.position = 'fixed' bg.style.zIndex = 98; bg.style.top = 0; bg.style.left = 0; bg.style.backgroundColor = '#999'; bg.style.opacity = 0; bg.style.width = (screen.width + 100) + 'px'; bg.style.height = (screen.height + 100) + 'px'; document.body.appendChild(bg); bg.onclick = function (e) { div.style.display = 'none'; bg.style.display = 'none'; div = null; bg = null; } setTimeout(function (){div.style.opacity = 0.2;}, 50); setTimeout(function (){div.style.opacity = 0.4;}, 100); setTimeout(function (){div.style.opacity = 0.6;}, 150); setTimeout(function (){div.style.opacity = 0.8;}, 200); setTimeout(function (){div.style.opacity = 1.0;}, 250); setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50); setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100); setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150); setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200); setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250); setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50); setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100); setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150); setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200); setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250); setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50); setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100); setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150); setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200); setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250); setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50); setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100); setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150); setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200); setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250); setTimeout(function (){bg.style.opacity = 0.1;}, 50); setTimeout(function (){bg.style.opacity = 0.2;}, 100); setTimeout(function (){bg.style.opacity = 0.3;}, 150); setTimeout(function (){bg.style.opacity = 0.4;}, 200); setTimeout(function (){bg.style.opacity = 0.5;}, 250); RGraph.Registry.Set('chart.zoomed.area.bg', bg); RGraph.Registry.Set('chart.zoomed.area.img', img); RGraph.Registry.Set('chart.zoomed.area.div', div); RGraph.Registry.Set('chart.zoomed.area.mousedown', null); } /** * Fire the zoom event */ RGraph.FireCustomEvent(obj, 'onzoom'); } canvas.onmouseout = function (e) { var obj = e.target.__object__; // DON'T use RGraph.Redraw() - it hides any tooltip RGraph.Clear(obj.canvas); obj.Draw(); RGraph.Registry.Set('chart.zoomed.area.mousedown', null); RGraph.Registry.Set('chart.zoomed.area.div', null); } } } /** * This function sets up the zoom window if requested * * @param obj object The graph object */ RGraph.ShowZoomWindow = function (obj) { var gutter = obj.Get('chart.gutter'); if (obj.Get('chart.zoom.mode') == 'thumbnail') { RGraph.ZoomWindow(obj.canvas); } if (obj.Get('chart.zoom.mode') == 'area') { RGraph.ZoomArea(obj); } } /** * Installs the evnt handler for the zoom window */ RGraph.ZoomWindow = function (canvas) { canvas.onmousemove = function (e) { e = RGraph.FixEventObject(e); var obj = e.target.__object__; var canvas = obj.canvas; var context = obj.context; var coords = RGraph.getMouseXY(e); /** * Create the DIV */ if (!RGraph.Registry.Get('chart.zoomed.div')) { var div = document.createElement('div'); div.className = 'RGraph_zoom_window'; div.style.width = obj.Get('chart.zoom.thumbnail.width') + 'px'; div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px'; div.style.border = '2px dashed gray'; div.style.position = 'absolute'; div.style.overflow = 'hidden'; div.style.backgroundColor = 'white'; // Initially the zoomed layer should be off-screen div.style.left = '-1000px'; div.style.top = '-1000px'; // Should these be 0? No. div.style.borderRadius = '5px'; div.style.MozBorderRadius = '5px'; div.style.WebkitBorderRadius = '5px'; if (obj.Get('chart.zoom.shadow')) { div.style.boxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; div.style.MozBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; } //div.style.opacity = 0.2; div.__object__ = obj; document.body.appendChild(div); /** * Get the canvas as an image */ var img = document.createElement('img'); img.width = obj.canvas.width * obj.Get('chart.zoom.factor'); img.height = obj.canvas.height * obj.Get('chart.zoom.factor'); img.style.position = 'relative'; img.style.backgroundColor = 'white'; img.__object__ = obj; div.appendChild(img); RGraph.Registry.Set('chart.zoomed.div', div); RGraph.Registry.Set('chart.zoomed.img', img); // Fade the zoom in setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5); } else { div = RGraph.Registry.Get('chart.zoomed.div'); img = RGraph.Registry.Get('chart.zoomed.img'); } // Make sure the image is up-to-date img.src = canvas.toDataURL(); /** * Ensure the div is visible */ if (div && div.style.opacity < 1) { setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); } /** * Get the canvas x/y coords */ var c = RGraph.getCanvasXY(obj.canvas); var x = c[0]; var y = c[1]; /** * Position the div and img */ var offset = 7; div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px'; div.style.top = (e.pageY - obj.Get('chart.zoom.thumbnail.height') - offset) + 'px'; var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor')); var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor')); // More positioning img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; /** * Fire the onzoom event */ RGraph.FireCustomEvent(obj, 'onzoom'); } /** * The onmouseover event. Evidently. Fades the zoom window in */ canvas.onmouseover = function (e) { var div = RGraph.Registry.Get('chart.zoomed.div'); // ??? if (!div) return; var obj = div.__object__; // Used for the enlargement animation var targetWidth = obj.Get('chart.zoom.thumbnail.width'); var targetHeight = obj.Get('chart.zoom.thumbnail.height'); div.style.width = 0; div.style.height = 0; if (obj.Get('chart.zoom.fade.in')) { RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2; setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); } else { setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1); } // The enlargement animation frames setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375); } canvas.onmouseout = function (e) { if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); // Get rid of the zoom window setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); } else { // Get rid of the zoom window if (RGraph.Registry.Get('chart.zoomed.div')) { setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41); } } } } /** * A zoom in function * * @param e object The event object */ RGraph.Zoom = function (e) { e = RGraph.FixEventObject(e); /** * Show the zoom window */ //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') ) { // return RGraph.ZoomWindow(e); //} var canvas = e.target.__canvas__; var context = canvas.getContext('2d'); var obj = canvas.__object__; var dataurl = canvas.toDataURL(); var tmp = canvas; var coords = RGraph.getCanvasXY(canvas); var factor = obj.Get('chart.zoom.factor') - 1; var x = coords[0]; var y = coords[1]; var img = document.createElement('img'); img.className = 'RGraph_zoomed_canvas'; img.style.border = '3px solid gray'; img.style.width = canvas.width + 'px'; img.style.height = canvas.height + 'px'; img.style.position = 'absolute'; img.style.left = x + 'px'; img.style.top = y + 'px'; img.style.backgroundColor = 'white'; img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1; img.style.zIndex = 99; img.src = dataurl; document.body.appendChild(img); //RGraph.Registry.Set('chart.zoomedimage', img); // Store the zoomed image in a global var - NOT the registry __zoomedimage__ = img; __zoomedimage__.obj = obj; // Image onclick should not hide the image img.onclick = function (e) { e = RGraph.FixEventObject(e); e.stopPropagation(); return false; } setTimeout(function () {window.onclick = RGraph.HideZoomedCanvas;}, 1); var width = parseInt(canvas.width); var height = parseInt(canvas.height); var frames = obj.Get('chart.zoom.frames'); var delay = obj.Get('chart.zoom.delay'); // Increase the width over 10 frames - center if (obj.Get('chart.zoom.hdir') == 'center') { for (var i=1; i<=frames; ++i) { var newWidth = width * factor * (i/frames) + width; var rightHandEdge = x + canvas.width; var newLeft = (x + (canvas.width / 2)) - (newWidth / 2); setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); } // Left } else if (obj.Get('chart.zoom.hdir') == 'left') { for (var i=1; i<=frames; ++i) { var newWidth = width * factor * (i/frames) + width; var rightHandEdge = x + canvas.width; var newLeft = rightHandEdge - newWidth; setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); } // Right (default) } else { for (var i=1; i<=frames; ++i) { var newWidth = width * factor * (i/frames) + width; setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay); } } // Increase the height over 10 frames - up if (obj.Get('chart.zoom.vdir') == 'up') { for (var i=1; i<=frames; ++i) { var newHeight = (height * factor * (i/frames)) + height; var bottomEdge = y + canvas.height; var newTop = bottomEdge - newHeight; setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); } // center } else if (obj.Get('chart.zoom.vdir') == 'center') { for (var i=1; i<=frames; ++i) { var newHeight = (height * factor * (i/frames)) + height; var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2); var newTop = bottomEdge - newHeight; setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); } // Down (default } else { for (var i=1; i<=frames; ++i) { setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay); } } // If enabled, increase the opactity over 10 frames if (obj.Get('chart.zoom.fade.in')) { for (var i=1; i<=frames; ++i) { setTimeout("__zoomedimage__.style.opacity = " + String(i / frames), i * delay); } } // If stipulated, produce a shadow if (obj.Get('chart.zoom.shadow')) { for (var i=1; i<=frames; ++i) { setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); } } /** * The onmouseout event. Hides the zoom window. Fades the zoom out */ canvas.onmouseout = function (e) { if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); // Get rid of the zoom window setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); } else { // Get rid of the zoom window if (RGraph.Registry.Get('chart.zoomed.div')) { setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1); } } } // The background if (obj.Get('chart.zoom.background')) { var div = document.createElement('DIV'); div.style.backgroundColor = '#999'; div.style.opacity = 0; div.style.position = 'fixed'; div.style.top = 0; div.style.left = 0; div.style.width = (screen.width + 100) + 'px'; div.style.height = (screen.height + 100) + 'px'; div.style.zIndex = 98; // Hides the zoomed caboodle div.oncontextmenu = function (e) { return RGraph.HideZoomedCanvas(e); } // 30th July 2010 - Is this necessary? //for (var i=1; i<=frames; ++i) { // setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay); // // // MSIE doesn't support zoom // //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50); //} div.origHeight = div.style.height; document.body.appendChild(div); __zoomedbackground__ = div; // If the window is resized, hide the zoom //window.onresize = RGraph.HideZoomedCanvas; for (var i=1; i<=frames; ++i) { setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * delay); } } /** * Fire the onzoom event */ RGraph.FireCustomEvent(obj, 'onzoom'); }