Plot functionality using Hihcharts
This commit is contained in:
Ammar Yasir
parent
9498f5d4cd
commit
1653fd340c
@ -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);
|
||||
|
||||
@ -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()); }
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
129
js/tbl_zoom_plot.js
Normal file
129
js/tbl_zoom_plot.js
Normal file
@ -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);
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
?>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
