From 1653fd340c080d2caefb4c6bf1bd21a98443baa9 Mon Sep 17 00:00:00 2001
From: Ammar Yasir <ammaryasir.88@gmail.com>
Date: Fri, 17 Jun 2011 01:31:31 +0530
Subject: [PATCH] Plot functionality using Hihcharts

---
 js/canvg/canvg.js           | 304 +++++++-----------------------------
 js/highcharts/exporting.js  |  13 +-
 js/highcharts/highcharts.js |   2 +-
 js/tbl_zoom_plot.js         | 129 +++++++++++++++
 tbl_zoom_select.php         |  18 ++-
 5 files changed, 200 insertions(+), 266 deletions(-)
 create mode 100644 js/tbl_zoom_plot.js

diff --git a/js/canvg/canvg.js b/js/canvg/canvg.js
index 7b7e963542..83c91b45fc 100644
--- a/js/canvg/canvg.js
+++ b/js/canvg/canvg.js
@@ -12,6 +12,7 @@ if(!window.console) {
 	window.console.dir = function(str) {};
 }
 
+// <3 IE
 if(!Array.indexOf){
 	Array.prototype.indexOf = function(obj){
 		for(var i=0; i<this.length; i++){
@@ -27,7 +28,7 @@ if(!Array.indexOf){
 	// canvg(target, s)
 	// empty parameters: replace all 'svg' elements on page with 'canvas' elements
 	// target: canvas element or the id of a canvas element
-	// s: svg string, url to svg file, or xml document
+	// s: svg string or url to svg file
 	// opts: optional hash of options
 	//		 ignoreMouse: true => ignore mouse events
 	//		 ignoreAnimation: true => ignore animations
@@ -74,11 +75,7 @@ if(!Array.indexOf){
 		svg.opts = opts;
 		
 		var ctx = target.getContext('2d');
-		if (typeof(s.documentElement) != 'undefined') {
-			// load from xml doc
-			svg.loadXmlDoc(ctx, s);
-		}
-		else if (s.substr(0,1) == '<') {
+		if (s.substr(0,1) == '<') {
 			// load from xml string
 			svg.loadXml(ctx, s);
 		}
@@ -92,7 +89,6 @@ if(!Array.indexOf){
 		var svg = { };
 		
 		svg.FRAMERATE = 30;
-		svg.MAX_VIRTUAL_PIXELS = 30000;
 		
 		// globals
 		svg.init = function(ctx) {
@@ -103,7 +99,6 @@ if(!Array.indexOf){
 			svg.ctx = ctx;
 			svg.ViewPort = new (function () {
 				this.viewPorts = [];
-				this.Clear = function() { this.viewPorts = []; }
 				this.SetCurrent = function(width, height) { this.viewPorts.push({ width: width, height: height }); }
 				this.RemoveCurrent = function() { this.viewPorts.pop(); }
 				this.Current = function() { return this.viewPorts[this.viewPorts.length - 1]; }
@@ -556,7 +551,7 @@ if(!Array.indexOf){
 				}
 			}
 			
-			var data = svg.trim(svg.compressSpaces(v)).split(/\s(?=[a-z])/);
+			var data = v.split(/\s(?=[a-z])/);
 			for (var i=0; i<data.length; i++) {
 				var type = data[i].split('(')[0];
 				var s = data[i].split('(')[1].replace(')','');
@@ -621,7 +616,7 @@ if(!Array.indexOf){
 				return a;
 			}
 			
-			// get or create style, crawls up node tree
+			// get or create style
 			this.style = function(name, createIfNotExists) {
 				var s = this.styles[name];
 				if (s != null) return s;
@@ -630,14 +625,6 @@ if(!Array.indexOf){
 				if (a != null && a.hasValue()) {
 					return a;
 				}
-				
-				var p = this.parent;
-				if (p != null) {
-					var ps = p.style(name);
-					if (ps != null && ps.hasValue()) {
-						return ps;
-					}
-				}
 					
 				s = new svg.Property(name, '');
 				if (createIfNotExists == true) this.styles[name] = s;
@@ -648,9 +635,6 @@ if(!Array.indexOf){
 			this.render = function(ctx) {
 				// don't render display=none
 				if (this.attribute('display').value == 'none') return;
-				
-				// don't render visibility=hidden
-				if (this.attribute('visibility').value == 'hidden') return;
 			
 				ctx.save();
 				this.setContext(ctx);
@@ -697,7 +681,7 @@ if(!Array.indexOf){
 				}
 										
 				// add tag styles
-				var styles = svg.Styles[node.nodeName];
+				var styles = svg.Styles[this.type];
 				if (styles != null) {
 					for (var name in styles) {
 						this.styles[name] = styles[name];
@@ -714,12 +698,6 @@ if(!Array.indexOf){
 								this.styles[name] = styles[name];
 							}
 						}
-						styles = svg.Styles[node.nodeName+'.'+classes[j]];
-						if (styles != null) {
-							for (var name in styles) {
-								this.styles[name] = styles[name];
-							}
-						}
 					}
 				}
 				
@@ -878,7 +856,7 @@ if(!Array.indexOf){
 				
 				var width = svg.ViewPort.width();
 				var height = svg.ViewPort.height();
-				if (typeof(this.root) == 'undefined' && this.attribute('width').hasValue() && this.attribute('height').hasValue()) {
+				if (this.attribute('width').hasValue() && this.attribute('height').hasValue()) {
 					width = this.attribute('width').Length.toPixels('x');
 					height = this.attribute('height').Length.toPixels('y');
 					
@@ -1208,6 +1186,9 @@ if(!Array.indexOf){
 				pp.reset();
 
 				var bb = new svg.BoundingBox();
+				
+				if(this.attribute('visibility').value=='hidden') return;
+				
 				if (ctx != null) ctx.beginPath();
 				while (!pp.isEnd()) {
 					pp.nextCommand();
@@ -1488,37 +1469,6 @@ if(!Array.indexOf){
 				for (var i=0; i<stopsContainer.stops.length; i++) {
 					g.addColorStop(stopsContainer.stops[i].offset, stopsContainer.stops[i].color);
 				}
-				
-				if (this.attribute('gradientTransform').hasValue()) {
-					// render as transformed pattern on temporary canvas
-					var rootView = svg.ViewPort.viewPorts[0];
-					
-					var rect = new svg.Element.rect();
-					rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0);
-					rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0);
-					rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
-					rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
-					
-					var group = new svg.Element.g();
-					group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
-					group.children = [ rect ];
-					
-					var tempSvg = new svg.Element.svg();
-					tempSvg.attributes['x'] = new svg.Property('x', 0);
-					tempSvg.attributes['y'] = new svg.Property('y', 0);
-					tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
-					tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
-					tempSvg.children = [ group ];
-					
-					var c = document.createElement('canvas');
-					c.width = rootView.width;
-					c.height = rootView.height;
-					var tempCtx = c.getContext('2d');
-					tempCtx.fillStyle = g;
-					tempSvg.render(tempCtx);		
-					return tempCtx.createPattern(c, 'no-repeat');
-				}
-				
 				return g;				
 			}
 		}
@@ -1544,8 +1494,16 @@ if(!Array.indexOf){
 				var y2 = (this.gradientUnits == 'objectBoundingBox' 
 					? bb.y() + bb.height() * this.attribute('y2').numValue()
 					: this.attribute('y2').Length.toPixels('y'));
-
-				return ctx.createLinearGradient(x1, y1, x2, y2);
+				
+				var p1 = new svg.Point(x1, y1);
+				var p2 = new svg.Point(x2, y2);
+				if (this.attribute('gradientTransform').hasValue()) { 
+					var transform = new svg.Transform(this.attribute('gradientTransform').value);
+					transform.applyToPoint(p1);
+					transform.applyToPoint(p2);
+				}
+				
+				return ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
 			}
 		}
 		svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
@@ -1582,7 +1540,22 @@ if(!Array.indexOf){
 					? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
 					: this.attribute('r').Length.toPixels());
 				
-				return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
+				var c = new svg.Point(cx, cy);
+				var f = new svg.Point(fx, fy);
+				if (this.attribute('gradientTransform').hasValue()) { 
+					var transform = new svg.Transform(this.attribute('gradientTransform').value);
+					transform.applyToPoint(c);
+					transform.applyToPoint(f);
+					
+					for (var i=0; i<transform.transforms.length; i++) {
+						// average the scaling part of the transform, apply to radius
+						var scale1 = transform.transforms[i].m[0];
+						var scale2 = transform.transforms[i].m[3];
+						r = r * ((scale1 + scale2) / 2.0);
+					}
+				}				
+				
+				return ctx.createRadialGradient(f.x, f.y, 0, c.x, c.y, r);
 			}
 		}
 		svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
@@ -1720,73 +1693,6 @@ if(!Array.indexOf){
 		}
 		svg.Element.animateTransform.prototype = new svg.Element.animate;
 		
-		// font element
-		svg.Element.font = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-
-			this.horizAdvX = this.attribute('horiz-adv-x').numValue();			
-			
-			this.isRTL = false;
-			this.isArabic = false;
-			this.fontFace = null;
-			this.missingGlyph = null;
-			this.glyphs = [];			
-			for (var i=0; i<this.children.length; i++) {
-				var child = this.children[i];
-				if (child.type == 'font-face') {
-					this.fontFace = child;
-					if (child.style('font-family').hasValue()) {
-						svg.Definitions[child.style('font-family').value] = this;
-					}
-				}
-				else if (child.type == 'missing-glyph') this.missingGlyph = child;
-				else if (child.type == 'glyph') {
-					if (child.arabicForm != '') {
-						this.isRTL = true;
-						this.isArabic = true;
-						if (typeof(this.glyphs[child.unicode]) == 'undefined') this.glyphs[child.unicode] = [];
-						this.glyphs[child.unicode][child.arabicForm] = child;
-					}
-					else {
-						this.glyphs[child.unicode] = child;
-					}
-				}
-			}	
-		}
-		svg.Element.font.prototype = new svg.Element.ElementBase;
-		
-		// font-face element
-		svg.Element.fontface = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);	
-			
-			this.ascent = this.attribute('ascent').value;
-			this.descent = this.attribute('descent').value;
-			this.unitsPerEm = this.attribute('units-per-em').numValue();				
-		}
-		svg.Element.fontface.prototype = new svg.Element.ElementBase;
-		
-		// missing-glyph element
-		svg.Element.missingglyph = function(node) {
-			this.base = svg.Element.path;
-			this.base(node);	
-			
-			this.horizAdvX = 0;
-		}
-		svg.Element.missingglyph.prototype = new svg.Element.path;
-		
-		// glyph element
-		svg.Element.glyph = function(node) {
-			this.base = svg.Element.path;
-			this.base(node);	
-			
-			this.horizAdvX = this.attribute('horiz-adv-x').numValue();
-			this.unicode = this.attribute('unicode').value;
-			this.arabicForm = this.attribute('arabic-form').value;
-		}
-		svg.Element.glyph.prototype = new svg.Element.path;
-		
 		// text element
 		svg.Element.text = function(node) {
 			this.base = svg.Element.RenderedElementBase;
@@ -1809,16 +1715,19 @@ if(!Array.indexOf){
 			this.baseSetContext = this.setContext;
 			this.setContext = function(ctx) {
 				this.baseSetContext(ctx);
-				if (this.style('text-anchor').hasValue()) {
-					var textAnchor = this.style('text-anchor').value;
+				if (this.attribute('text-anchor').hasValue()) {
+					var textAnchor = this.attribute('text-anchor').value;
 					ctx.textAlign = textAnchor == 'middle' ? 'center' : textAnchor;
 				}
 				if (this.attribute('alignment-baseline').hasValue()) ctx.textBaseline = this.attribute('alignment-baseline').value;
 			}
 			
 			this.renderChildren = function(ctx) {
+				if(this.attribute('visibility').value=='hidden') return;
+				
 				var x = this.attribute('x').Length.toPixels('x');
 				var y = this.attribute('y').Length.toPixels('y');
+				
 				for (var i=0; i<this.children.length; i++) {
 					var child = this.children[i];
 				
@@ -1850,63 +1759,8 @@ if(!Array.indexOf){
 			this.base = svg.Element.RenderedElementBase;
 			this.base(node);
 			
-			this.getGlyph = function(font, text, i) {
-				var c = text[i];
-				var glyph = null;
-				if (font.isArabic) {
-					var arabicForm = 'isolated';
-					if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal'; 
-					if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial';
-					if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial';
-					if (typeof(font.glyphs[c]) != 'undefined') {
-						glyph = font.glyphs[c][arabicForm];
-						if (glyph == null && font.glyphs[c].type == 'glyph') glyph = font.glyphs[c];
-					}
-				}
-				else {
-					glyph = font.glyphs[c];
-				}
-				if (glyph == null) glyph = font.missingGlyph;
-				return glyph;
-			}
-			
 			this.renderChildren = function(ctx) {
-				var customFont = this.parent.style('font-family').Definition.getDefinition();
-				if (customFont != null) {
-					var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
-					var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
-					var text = this.getText();
-					if (customFont.isRTL) text = text.split("").reverse().join("");
-					
-					if (this.parent.style('text-anchor').value == 'middle') {
-						this.x = this.x - this.measureText(ctx) / 2.0;
-					}
-					
-					var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
-					for (var i=0; i<text.length; i++) {
-						var glyph = this.getGlyph(customFont, text, i);
-						var scale = fontSize / customFont.fontFace.unitsPerEm;
-						ctx.translate(this.x, this.y);
-						ctx.scale(scale, -scale);
-						var lw = ctx.lineWidth;
-						ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize;
-						if (fontStyle == 'italic') ctx.transform(1, 0, .4, 1, 0, 0);
-						glyph.render(ctx);
-						if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0);
-						ctx.lineWidth = lw;
-						ctx.scale(1/scale, -1/scale);
-						ctx.translate(-this.x, -this.y);	
-						
-						this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
-						if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
-							this.x += dx[i];
-						}
-					}
-					return;
-				}
-			
-				if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
-				if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
+				ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
 			}
 			
 			this.getText = function() {
@@ -1914,23 +1768,6 @@ if(!Array.indexOf){
 			}
 			
 			this.measureText = function(ctx) {
-				var customFont = this.parent.style('font-family').Definition.getDefinition();
-				if (customFont != null) {
-					var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
-					var measure = 0;
-					var text = this.getText();
-					if (customFont.isRTL) text = text.split("").reverse().join("");
-					var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
-					for (var i=0; i<text.length; i++) {
-						var glyph = this.getGlyph(customFont, text, i);
-						measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm;
-						if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
-							measure += dx[i];
-						}
-					}
-					return measure;
-				}
-			
 				var textToMeasure = svg.compressSpaces(this.getText());
 				if (!ctx.measureText) return textToMeasure.length * 10;
 				return ctx.measureText(textToMeasure).width;
@@ -1943,9 +1780,8 @@ if(!Array.indexOf){
 			this.base = svg.Element.TextElementBase;
 			this.base(node);
 			
-			this.text = node.nodeType == 3 ? node.nodeValue : // text
-						node.childNodes.length > 0 ? node.childNodes[0].nodeValue : // element
-						node.text;
+			//								 TEXT			  ELEMENT
+			this.text = node.nodeType == 3 ? node.nodeValue : node.childNodes[0].nodeValue;
 			this.getText = function() {
 				return this.text;
 			}
@@ -2095,9 +1931,8 @@ if(!Array.indexOf){
 			this.base = svg.Element.ElementBase;
 			this.base(node);
 			
-			// text, or spaces then CDATA
-			var css = node.childNodes[0].nodeValue + (node.childNodes.length > 1 ? node.childNodes[1].nodeValue : '');
-			css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
+			var css = node.childNodes[0].nodeValue;
+			css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(\/\/.*)/gm, ''); // remove comments
 			css = svg.compressSpaces(css); // replace whitespace
 			var cssDefs = css.split('}');
 			for (var i=0; i<cssDefs.length; i++) {
@@ -2110,31 +1945,14 @@ if(!Array.indexOf){
 						if (cssClass != '') {
 							var props = {};
 							for (var k=0; k<cssProps.length; k++) {
-								var prop = cssProps[k].indexOf(':');
-								var name = cssProps[k].substr(0, prop);
-								var value = cssProps[k].substr(prop + 1, cssProps[k].length - prop);
+								var prop = cssProps[k].split(':');
+								var name = prop[0];
+								var value = prop[1];
 								if (name != null && value != null) {
-									props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value));
+									props[svg.trim(prop[0])] = new svg.Property(svg.trim(prop[0]), svg.trim(prop[1]));
 								}
 							}
 							svg.Styles[cssClass] = props;
-							if (cssClass == '@font-face') {
-								var fontFamily = props['font-family'].value.replace(/"/g,'');
-								var srcs = props['src'].value.split(',');
-								for (var s=0; s<srcs.length; s++) {
-									if (srcs[s].indexOf('format("svg")') > 0) {
-										var urlStart = srcs[s].indexOf('url');
-										var urlEnd = srcs[s].indexOf(')', urlStart);
-										var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6);
-										var doc = svg.parseXml(svg.ajax(url));
-										var fonts = doc.getElementsByTagName('font');
-										for (var f=0; f<fonts.length; f++) {
-											var font = svg.CreateElement(fonts[f]);
-											svg.Definitions[fontFamily] = font;
-										}
-									}
-								}
-							}
 						}
 					}
 				}
@@ -2186,10 +2004,6 @@ if(!Array.indexOf){
 					}
 				}
 			}
-			
-			this.render = function(ctx) {
-				// NO RENDER
-			}
 		}
 		svg.Element.clipPath.prototype = new svg.Element.ElementBase;
 
@@ -2210,8 +2024,7 @@ if(!Array.indexOf){
 		
 		// element factory
 		svg.CreateElement = function(node) {	
-			var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace
-			className = className.replace(/\-/g,''); // remove dashes
+			var className = node.nodeName.replace(/^[^:]+:/,'');
 			var e = null;
 			if (typeof(svg.Element[className]) != 'undefined') {
 				e = new svg.Element[className](node);
@@ -2231,10 +2044,6 @@ if(!Array.indexOf){
 		
 		// load from xml
 		svg.loadXml = function(ctx, xml) {
-			svg.loadXmlDoc(ctx, svg.parseXml(xml));
-		}
-		
-		svg.loadXmlDoc = function(ctx, dom) {
 			svg.init(ctx);
 			
 			var mapXY = function(p) {
@@ -2261,24 +2070,19 @@ if(!Array.indexOf){
 				};
 			}
 		
+			var dom = svg.parseXml(xml);
 			var e = svg.CreateElement(dom.documentElement);
-			e.root = true;
 					
 			// render loop
 			var isFirstRender = true;
 			var draw = function() {
-				svg.ViewPort.Clear();
-				if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
-			
 				if (svg.opts == null || svg.opts['ignoreDimensions'] != true) {
 					// set canvas size
 					if (e.style('width').hasValue()) {
-						ctx.canvas.width = e.style('width').Length.toPixels('x');
-						ctx.canvas.style.width = ctx.canvas.width + 'px';
+						ctx.canvas.width = e.style('width').Length.toPixels(ctx.canvas.parentNode.clientWidth);
 					}
 					if (e.style('height').hasValue()) {
-						ctx.canvas.height = e.style('height').Length.toPixels('y');
-						ctx.canvas.style.height = ctx.canvas.height + 'px';
+						ctx.canvas.height = e.style('height').Length.toPixels(ctx.canvas.parentNode.clientHeight);
 					}
 				}
 				svg.ViewPort.SetCurrent(ctx.canvas.clientWidth, ctx.canvas.clientHeight);		
diff --git a/js/highcharts/exporting.js b/js/highcharts/exporting.js
index 171ea503ca..4f134d5868 100644
--- a/js/highcharts/exporting.js
+++ b/js/highcharts/exporting.js
@@ -309,8 +309,7 @@ extend(Chart.prototype, {
             canvas=createElement('canvas');
         
         $('body').append(canvas);
-        $(canvas).css('position','absolute');
-        $(canvas).css('left','-10000px');
+        $(canvas).hide();
         
         var submitData = function(chartData) {
                 // merge the options
@@ -349,19 +348,11 @@ extend(Chart.prototype, {
         if(options && options.type=='image/svg+xml') {
             submitData(chart.getSVG(chartOptions));
         } else {
-            if (typeof FlashCanvas != "undefined") {
-                FlashCanvas.initElement(canvas);
-            }
-            
             // Generate data uri and submit once done
             canvg(canvas, chart.getSVG(chartOptions),{
                 ignoreAnimation:true,
                 ignoreMouse:true,
-                renderCallback:function() { 
-                    // IE8 fix: flashcanvas doesn't update the canvas immediately, thus requiring setTimeout. 
-                    // See also http://groups.google.com/group/flashcanvas/browse_thread/thread/e36ff7a03e1bfb0a
-                    setTimeout(function() { submitData(canvas.toDataURL()); }, 100); 
-                }
+                renderCallback:function() { submitData(canvas.toDataURL()); }
             });
         }
     },
diff --git a/js/highcharts/highcharts.js b/js/highcharts/highcharts.js
index 4ad0c6c4ae..c15862b4f0 100644
--- a/js/highcharts/highcharts.js
+++ b/js/highcharts/highcharts.js
@@ -2210,7 +2210,7 @@ SVGRenderer.prototype = {
 						if (lineNo) {
 							// Webkit and opera sometimes return 'normal' as the line height. In that
 							// case, webkit uses offsetHeight, while Opera falls back to 18
-							if(window.getComputedStyle) lineHeight = pInt(window.getComputedStyle(lastLine, null).getPropertyValue('line-height'));
+							lineHeight = pInt(window.getComputedStyle(lastLine, null).getPropertyValue('line-height'));
 							if (isNaN(lineHeight)) {
 								lineHeight = textLineHeight || lastLine.offsetHeight || 18;
 							}
diff --git a/js/tbl_zoom_plot.js b/js/tbl_zoom_plot.js
new file mode 100644
index 0000000000..5ade2a5224
--- /dev/null
+++ b/js/tbl_zoom_plot.js
@@ -0,0 +1,129 @@
+var chart_xaxis_idx = -1;
+var chart_series;
+var chart_series_index = -1;
+
+$(document).ready(function() {
+    var currentChart=null;
+
+    // Get query result 
+    var chart_data = jQuery.parseJSON($('#querydata').html());
+    var xLabel = $('#tableid_0').val();
+    var yLabel = $('#tableid_1').val();
+
+    var currentSettings = {
+        chart: {
+            renderTo: 'resizer',
+            defaultSeriesType: 'scatter',
+	    zoomType: 'xy',
+	    width:$('#resizer').width()-20,
+            height:$('#resizer').height()-20
+	},
+	xAxis: {
+	    title: { text: $('#tableid_0').val() },
+        },
+        yAxis: {
+	    title: { text: $('#tableid_1').val() },
+	},
+        title: { text: 'Scatter Plot' },
+        label: { text: $('#dataLabel').val() },
+    }
+
+    function drawChart(noAnimation) {
+
+        currentSettings.chart.width=$('#resizer').width()-20;
+        currentSettings.chart.height=$('#resizer').height()-20;
+
+        if(currentChart!=null) currentChart.destroy();
+        
+        if(noAnimation) currentSettings.plotOptions.series.animation = false;
+        currentChart = PMA_queryChart(chart_data,currentSettings);
+        if(noAnimation) currentSettings.plotOptions.series.animation = true;
+    }
+    drawChart();
+});
+
+function in_array(element,array) {
+	for(var i=0; i<array.length; i++)
+		if(array[i]==element) return true;
+	return false;
+}
+
+Array.max = function (array) {
+	return Math.max.apply( Math, array );
+}
+
+Array.min = function (array) {
+	return Math.min.apply( Math, array );
+}
+
+function PMA_queryChart(data,passedSettings) {
+
+    if($('#querydata').length==0) return;
+
+    var columnNames = new Array();
+    var colorCodes = ['#FF0000','#00FFFF','#0000FF','#0000A0','#FF0080','#800080','#FFFF00','#00FF00','#FF00FF'];
+    var series = new Array();
+    var xCord = new Array();
+    var yCord = new Array();
+    var it = 0;
+   
+    // Get column names
+    for (key in data[0]) columnNames.push(key);
+
+    $.each(data,function(key,value) {
+	series[it] = new Object();
+        series[it].data = new Array();
+	series[it].color = colorCodes[it % 8];
+	series[it].marker = {
+            symbol: 'circle'
+        };
+        xCord.push(value[passedSettings.xAxis.title.text]);
+        yCord.push(value[passedSettings.yAxis.title.text]);
+        series[it].data.push({ name: value[passedSettings.label.text], x:value[passedSettings.xAxis.title.text], y:value[passedSettings.yAxis.title.text], color: colorCodes[it % 8], id: it } );
+	it++;   
+    });
+
+    var settings = {
+        series: series,
+	plotOptions: {
+	    series: {
+	        allowPointSelect: true,
+                cursor: 'pointer',
+		showInLegend: false,
+                dataLabels: {
+                    enabled: false,
+                },
+	        point: {
+                    events: {
+                        click: function() {
+			    var str = '';
+			    var id = this.id;
+			    $.each(columnNames,function(key,value) {
+			        str = str + value + " : " + data[id][value] + "\n";
+                            });
+			    alert(str);
+                        }
+                    }
+	        }
+	    }
+	},
+	tooltip: {
+	    formatter: function() {
+	        return this.point.name;
+	    }
+	},
+        xAxis: { 
+	    max: Array.max(xCord) + 2,
+	    min: Array.min(xCord) - 2
+        },
+        yAxis: { 
+	    max: Array.max(yCord) + 2,
+	    min: Array.min(yCord) - 2
+        }
+    };
+ 
+    // Overwrite/Merge default settings with passedsettings
+    $.extend(true,settings,passedSettings);
+	
+    return new Highcharts.Chart(settings);
+}
diff --git a/tbl_zoom_select.php b/tbl_zoom_select.php
index 1ccad423e8..26052018f6 100644
--- a/tbl_zoom_select.php
+++ b/tbl_zoom_select.php
@@ -14,8 +14,13 @@ require_once './libraries/common.inc.php';
 require_once './libraries/mysql_charsets.lib.php';
 require_once './libraries/tbl_select.lib.php';
 
-$GLOBALS['js_include'][] = 'sql.js';
 $GLOBALS['js_include'][] = 'tbl_select.js';
+$GLOBALS['js_include'][] = 'tbl_zoom_plot.js';
+$GLOBALS['js_include'][] = 'highcharts/highcharts.js';
+/* Files required for chart exporting */
+$GLOBALS['js_include'][] = 'highcharts/exporting.js';
+$GLOBALS['js_include'][] = 'canvg/canvg.js';
+$GLOBALS['js_include'][] = 'canvg/rgbcolor.js';
 $GLOBALS['js_include'][] = 'jquery/jquery-ui-1.8.custom.js';
 $GLOBALS['js_include'][] = 'jquery/timepicker.js';
 
@@ -128,6 +133,7 @@ if(isset($zoom_submit)) {
     while ($row = PMA_DBI_fetch_assoc($result)) {
         $data[] = $row;
     }
+    $query_data = $data;
     $scatter_plot = PMA_SVG_scatter_plot($data,$settings); 
 ?>
 
@@ -143,10 +149,12 @@ if(isset($zoom_submit)) {
 
 <fieldset id="zoom_fieldset_table_qbe">
 <?php if(isset($zoom_submit) && !empty($scatter_plot)){ ?>
+    <div id='resizer' style="width:600px; height:400px;float:right">
+        <legend><?php echo __('Display Plot'); ?></legend>
+        <div id="querydata" style="display:none;">
+            <?php if(isset($data)) echo json_encode($data); ?>
+        </div>
 
-    <legend><?php echo __('Display Plot'); ?></legend>
-    <div id="placeholder" style="width:<?php echo($settings['width'] + 20); ?>px;height:<?php echo($settings['height'] + 20); ?>px;border:1px solid #484;float:right">
-        <?php echo $scatter_plot; ?>
     </div>
 
 
@@ -266,6 +274,8 @@ if(isset($zoom_submit)) {
     <input type="hidden" name="collations[<?php echo $i; ?>]"
         value="<?php if(isset($tbl_fields_collation[$i]))echo $tbl_fields_collation[$i]; ?>" />
 
+
+
 <?php
     }
 ?>