diff --git a/examples/index.html b/examples/index.html index ad9d554..bf503e5 100644 --- a/examples/index.html +++ b/examples/index.html @@ -8,7 +8,7 @@ } - +
diff --git a/timeline.js b/timeline.js index 75e39ab..874e213 100644 --- a/timeline.js +++ b/timeline.js @@ -1,3 +1,18 @@ +/* Timeline.js + * Author : Phyks (http://phyks.me) + * http://phyks.github.io/timeline.js + + * -------------------------------------------------------------------------------- + * "THE NO-ALCOHOL BEER-WARE LICENSE" (Revision 42): + * Phyks (webmaster@phyks.me) wrote this file. As long as you retain this notice you + * can do whatever you want with this stuff (and you can also do whatever you want + * with this stuff without retaining it, but that's not cool...). If we meet some + * day, and you think this stuff is worth it, you can buy me a beer soda + * in return. + * Phyks + * --------------------------------------------------------------------------------- + */ + var SVG = {}; SVG.ns = "http://www.w3.org/2000/svg"; SVG.xlinkns = "http://www.w3.org/1999/xlink"; @@ -15,21 +30,26 @@ SVG.g = false; SVG.axis = false; SVG.raw_points = []; SVG.labels = []; +SVG.x_callback = false; /* Initialization : + * arg is an object with : * id = id of the parent block * height / width = size of the svg * grid = small / big / both + * x_axis = true / false to show or hide x axis + * rounded = true / false to use splines to smoothen the graph + * x_callback = function(arg) { } or false is called to display the legend on the x axis */ -SVG.init = function (id, height, width, grid, x_axis, rounded) { +SVG.init = function (arg) { if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { alert("Your browser does not support embedded SVG."); } - SVG.parent_holder = document.getElementById(id); + SVG.parent_holder = document.getElementById(arg.id); var svg = document.createElementNS(SVG.ns, 'svg:svg'); - svg.setAttribute('width', width); - svg.setAttribute('height', height); + svg.setAttribute('width', arg.width); + svg.setAttribute('height', arg.height); svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', SVG.xlinkns); SVG.parent_holder.appendChild(svg); @@ -38,7 +58,7 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) { var defs = document.createElementNS(SVG.ns, 'defs'); SVG.holder.appendChild(defs); - if(grid === 'small' || grid === 'both') { + if(arg.grid === 'small' || arg.grid === 'both') { var small_grid_pattern = document.createElementNS(SVG.ns, 'pattern'); small_grid_pattern.setAttribute('id', 'smallGrid'); small_grid_pattern.setAttribute('width', 8); @@ -54,14 +74,14 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) { defs.appendChild(small_grid_pattern); } - if(grid === 'big' || grid === 'both') { + if(arg.grid === 'big' || arg.grid === 'both') { var grid_pattern = document.createElementNS(SVG.ns, 'pattern'); grid_pattern.setAttribute('id', 'grid'); grid_pattern.setAttribute('width', 80); grid_pattern.setAttribute('height', 80); grid_pattern.setAttribute('patternUnits', 'userSpaceOnUse'); - if(grid === 'both') { + if(arg.grid === 'both') { var grid_rect = document.createElementNS(SVG.ns, 'rect'); grid_rect.setAttribute('width', 80); grid_rect.setAttribute('height', 80); @@ -78,7 +98,7 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) { defs.appendChild(grid_pattern); } - SVG.grid = grid; + SVG.grid = arg.grid; var marker = document.createElementNS(SVG.ns, 'marker'); @@ -98,7 +118,7 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) { SVG.g.setAttribute('transform', 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'); SVG.holder.appendChild(SVG.g); - if(x_axis === true) { + if(arg.x_axis === true) { SVG.axis = document.createElementNS(SVG.ns, 'line'); SVG.axis.setAttribute('x1', SVG.marginLeft); SVG.axis.setAttribute('x2', SVG.parent_holder.offsetWidth - 13 - SVG.marginRight); @@ -121,8 +141,10 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) { SVG.g.appendChild(grid); } - SVG.rounded = rounded; - SVG.x_axis = x_axis; + SVG.rounded = arg.rounded; + SVG.x_axis = arg.x_axis; + + SVG.x_callback = arg.x_callback; SVG.parent_holder.addEventListener('mousemove', function(e) { var evt = e || window.event; @@ -388,7 +410,7 @@ SVG.draw = function() { element.setAttribute('fill', SVG.raw_points[graph].color); element.setAttribute('opacity', '0.25'); element.setAttribute('stroke', 'none'); - element.setAttribute('d', 'M '+SVG.marginLeft+' '+2*SVG.marginBottom+' L '+x[0]+' '+y[0]+' '+ path + ' L '+x[SVG.raw_points[graph].data.length - 1]+' '+2*SVG.marginBottom+' Z'); + element.setAttribute('d', 'M '+x[0]+' '+2*SVG.marginBottom+' L '+x[0]+' '+y[0]+' '+ path + ' L '+x[SVG.raw_points[graph].data.length - 1]+' '+2*SVG.marginBottom+' Z'); SVG.g.insertBefore(element, SVG.g.querySelectorAll('.over')[0]); element = document.createElementNS(SVG.ns, 'path'); @@ -409,7 +431,7 @@ SVG.draw = function() { element.setAttribute('fill', '#333'); element.setAttribute('stroke', SVG.raw_points[graph].color); element.setAttribute('stroke-width', 2); - SVG.g.appendChild(element); + SVG.g.insertBefore(element, SVG.g.querySelectorAll('.label')[0]); if(SVG.labels[graph][point] !== '') { var g = document.createElementNS(SVG.ns, 'g'); @@ -501,19 +523,38 @@ SVG.draw = function() { } rect.setAttribute('height', '100%'); SVG.g.appendChild(rect); + + if(SVG.x_callback !== false) { + element = document.createElementNS(SVG.ns, 'text'); + element.setAttribute('class', 'legend_x'); + element.setAttribute('fill', 'gray'); + element.setAttribute('transform', 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'); + element.appendChild(document.createTextNode(SVG.x_callback(x[point]))); + SVG.g.appendChild(element); + element.setAttribute('x', x[point] - element.getBoundingClientRect().width / 2 + 2.5); + element.setAttribute('y', SVG.parent_holder.offsetHeight - SVG.marginBottom - SVG.newCoordinates(0, scale.minY, scale.maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop)); + + element = document.createElementNS(SVG.ns, 'line'); + element.setAttribute('class', 'legend_x'); + element.setAttribute('stroke', 'gray'); + element.setAttribute('stroke-width', 2); + element.setAttribute('x1', x[point]); + element.setAttribute('x2', x[point]); + element.setAttribute('y1', SVG.newCoordinates(0, scale.minY, scale.maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop) - 5); + element.setAttribute('y2', SVG.newCoordinates(0, scale.minY, scale.maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop) + 5); + SVG.g.appendChild(element); + } } } } -var old = window.onresize || function() {}; window.onresize = function() { - old(); if(SVG.g !== false) { SVG.g.setAttribute('transform', 'translate(0, ' + SVG.parent_holder.offsetHeight + ') scale(1, -1)'); if(SVG.x_axis === true) { SVG.axis.setAttribute('x2', SVG.parent_holder.offsetWidth - 13 - SVG.marginRight); } - [].forEach.call(SVG.holder.querySelectorAll('.label, .over, .point, .line, .graph'), function(el) { + [].forEach.call(SVG.holder.querySelectorAll('.label, .over, .point, .line, .graph, .legend_x'), function(el) { el.parentNode.removeChild(el); }); SVG.draw(); diff --git a/timeline.min.js b/timeline.min.js index 90c45db..1009862 100644 --- a/timeline.min.js +++ b/timeline.min.js @@ -1 +1 @@ -var SVG={};SVG.ns="http://www.w3.org/2000/svg";SVG.xlinkns="http://www.w3.org/1999/xlink";SVG.marginBottom=10;SVG.marginTop=15;SVG.marginLeft=10;SVG.marginRight=10;SVG.rounded=false;SVG.x_axis=false;SVG.parent_holder=false;SVG.holder=false;SVG.g=false;SVG.axis=false;SVG.raw_points=[];SVG.labels=[];SVG.init=function(f,v,g,e,u,j){if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("Your browser does not support embedded SVG.")}SVG.parent_holder=document.getElementById(f);var s=document.createElementNS(SVG.ns,"svg:svg");s.setAttribute("width",g);s.setAttribute("height",v);s.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",SVG.xlinkns);SVG.parent_holder.appendChild(s);SVG.holder=SVG.parent_holder.querySelector("svg");var o=document.createElementNS(SVG.ns,"defs");SVG.holder.appendChild(o);if(e==="small"||e==="both"){var t=document.createElementNS(SVG.ns,"pattern");t.setAttribute("id","smallGrid");t.setAttribute("width",8);t.setAttribute("height",8);t.setAttribute("patternUnits","userSpaceOnUse");var l=document.createElementNS(SVG.ns,"path");l.setAttribute("d","M 8 0 L 0 0 0 8");l.setAttribute("fill","none");l.setAttribute("stroke","gray");l.setAttribute("stroke-width","0.5");t.appendChild(l);o.appendChild(t)}if(e==="big"||e==="both"){var k=document.createElementNS(SVG.ns,"pattern");k.setAttribute("id","grid");k.setAttribute("width",80);k.setAttribute("height",80);k.setAttribute("patternUnits","userSpaceOnUse");if(e==="both"){var h=document.createElementNS(SVG.ns,"rect");h.setAttribute("width",80);h.setAttribute("height",80);h.setAttribute("fill","url(#smallGrid)");k.appendChild(h)}var q=document.createElementNS(SVG.ns,"path");q.setAttribute("d","M 80 0 L 0 0 0 80");q.setAttribute("fill","none");q.setAttribute("stroke","gray");q.setAttribute("stroke-width","1");k.appendChild(q);o.appendChild(k)}SVG.grid=e;var p=document.createElementNS(SVG.ns,"marker");p.setAttribute("id","markerArrow");p.setAttribute("markerWidth",13);p.setAttribute("markerHeight",13);p.setAttribute("refX",2);p.setAttribute("refY",6);p.setAttribute("orient","auto");var d=document.createElementNS(SVG.ns,"path");d.setAttribute("d","M2,2 L2,11 L10,6 L2,2");d.setAttribute("fill","gray");p.appendChild(d);o.appendChild(p);SVG.g=document.createElementNS(SVG.ns,"g");SVG.g.setAttribute("transform","translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)");SVG.holder.appendChild(SVG.g);if(u===true){SVG.axis=document.createElementNS(SVG.ns,"line");SVG.axis.setAttribute("x1",SVG.marginLeft);SVG.axis.setAttribute("x2",SVG.parent_holder.offsetWidth-13-SVG.marginRight);SVG.axis.setAttribute("stroke","gray");SVG.axis.setAttribute("stroke-width",3);SVG.axis.setAttribute("marker-end",'url("#markerArrow")');SVG.g.appendChild(SVG.axis)}if(SVG.grid!=="none"){var e=document.createElementNS(SVG.ns,"rect");e.setAttribute("width","100%");e.setAttribute("height","100%");if(SVG.grid==="big"||SVG.grid==="both"){e.setAttribute("fill","url(#grid)")}else{e.setAttribute("fill","url(#smallGrid)")}SVG.g.appendChild(e)}SVG.rounded=j;SVG.x_axis=u;SVG.parent_holder.addEventListener("mousemove",function(z){var w=z||window.event;var y=false;var x=SVG.holder.querySelectorAll(".over");for(y=0;y-1};SVG.overEffect=function(d,f){if(!document.elementFromPoint(d,f)){return}var e=document.elementFromPoint(d,f);if(!SVG.hasClass(e,"over")){return}SVG.holder.getElementById(e.getAttribute("id").replace("over","point")).setAttribute("r","6");if(SVG.labels[graph][parseInt(e.getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(e.getAttribute("id").replace("over","label")).setAttribute("display","block")}e.setAttribute("display","none");SVG.overEffect(d,f);e.setAttribute("display","block")};SVG.newCoordinates=function(h,f,d,g,j){var e=(j-g)/(d-f);return e*h-e*f+g};SVG.scale=function(o){var h=new Array(),g=new Array();var e=new Array(),d=new Array();var u=0,t=0;var f=false,s=false,v=false;var q=false;var p=0;var l=false;var k=false;for(graph in o){q=false;p=0;l=false;k=false;for(point=0;pointl||l===false){l=u}if(tk||k===false){k=t}}h.push(q);g.push(p);e.push(l);d.push(k)}h=Math.min.apply(null,h);g=Math.min.apply(null,g);e=Math.max.apply(null,e);d=Math.max.apply(null,d);u=SVG.newCoordinates(h+Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight)-SVG.newCoordinates(h,h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight);t=SVG.newCoordinates(g+Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop)-SVG.newCoordinates(g,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);if(SVG.grid==="big"||SVG.grid==="both"){SVG.holder.getElementById("grid").setAttribute("width",u);SVG.holder.getElementById("grid").setAttribute("height",t);SVG.holder.getElementById("grid").setAttribute("y",SVG.newCoordinates(Math.floor(g/Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop));SVG.holder.getElementById("grid").setAttribute("x",SVG.newCoordinates(Math.floor(h/Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight));SVG.holder.getElementById("grid").querySelector("path").setAttribute("d","M "+u+" 0 L 0 0 0 "+t);if(SVG.grid==="both"){SVG.holder.getElementById("grid").querySelector("rect").setAttribute("width",u);SVG.holder.getElementById("grid").querySelector("rect").setAttribute("height",t)}}if(SVG.grid==="small"||SVG.grid==="both"){u=u/10;t=t/10;SVG.holder.getElementById("smallGrid").setAttribute("width",u);SVG.holder.getElementById("smallGrid").setAttribute("height",t);if(SVG.grid==="small"){SVG.holder.getElementById("smallGrid").setAttribute("y",SVG.newCoordinates(Math.floor(g/Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop));SVG.holder.getElementById("smallGrid").setAttribute("x",SVG.newCoordinates(Math.floor(h/Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight))}SVG.holder.getElementById("smallGrid").querySelector("path").setAttribute("d","M "+u+" 0 L 0 0 0 "+t)}if(SVG.x_axis===true){t=SVG.newCoordinates(0,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);SVG.axis.setAttribute("y1",t);SVG.axis.setAttribute("y2",t)}var j=new Array();j.minX=h;j.minY=g;j.maxX=e;j.maxY=d;return j};SVG.addGraph=function(e,d){SVG.raw_points[e]={};SVG.raw_points[e].color=d;SVG.raw_points[e].data=new Array();SVG.labels[e]=new Array()};SVG.addPoints=function(e,d){d.sort(function(g,f){if(g.x=0;--i){p1[i]=(r[i]-c[i]*p1[i+1])/b[i]}for(i=0;i","").split("");var j=0;var h=false;for(j=0;j]+)>)/ig,"").replace("%y",SVG.raw_points[graph].data[w][1]).replace("%x",SVG.raw_points[graph].data[w][0]);if(j%2==0){k.appendChild(document.createTextNode(z[j]))}else{h=document.createElementNS(SVG.ns,"tspan");h.setAttribute("dy","-5");h.appendChild(document.createTextNode(z[j]));k.appendChild(h)}}var A=document.createElementNS(SVG.ns,"path");A.setAttribute("stroke","black");A.setAttribute("stroke-width",2);A.setAttribute("fill","white");A.setAttribute("opacity",0.5);l.appendChild(A);l.appendChild(k);var f=u[w]-k.getBoundingClientRect().width/2;var p=SVG.parent_holder.offsetHeight-q[w]-20;var o=k.getBoundingClientRect().width;var d=k.getBoundingClientRect().height;if(u[w]+o/2>SVG.parent_holder.offsetWidth){f=u[w]-o-20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d/2+2.5)+" L "+(f+o+10)+" "+(p-d/2+5)+" L "+(f+o+5)+" "+(p-d/2+7.5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{if(u[w]-k.getBoundingClientRect().width/2<0){f=u[w]+20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d/2+7.5)+" L "+(f-10)+" "+(p-d/2+5)+" L "+(f-5)+" "+(p-d/2+2.5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{if(q[w]+k.getBoundingClientRect().height>SVG.parent_holder.offsetHeight){f=u[w]+20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d/2+7.5)+" L "+(f-10)+" "+(p-d/2+5)+" L "+(f-5)+" "+(p-d/2+2.5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" L "+(f+o/2+2.5)+" "+(p+5)+" L "+(f+o/2)+" "+(p+10)+" L "+(f+o/2-2.5)+" "+(p+5)+" Z")}}}k.setAttribute("x",f);k.setAttribute("y",p);l.setAttribute("display","none")}}for(w=0;w-1};SVG.overEffect=function(d,f){if(!document.elementFromPoint(d,f)){return}var e=document.elementFromPoint(d,f);if(!SVG.hasClass(e,"over")){return}SVG.holder.getElementById(e.getAttribute("id").replace("over","point")).setAttribute("r","6");if(SVG.labels[graph][parseInt(e.getAttribute("id").replace("over_",""))]!==""){SVG.holder.getElementById(e.getAttribute("id").replace("over","label")).setAttribute("display","block")}e.setAttribute("display","none");SVG.overEffect(d,f);e.setAttribute("display","block")};SVG.newCoordinates=function(h,f,d,g,j){var e=(j-g)/(d-f);return e*h-e*f+g};SVG.scale=function(o){var h=new Array(),g=new Array();var e=new Array(),d=new Array();var u=0,t=0;var f=false,s=false,v=false;var q=false;var p=0;var l=false;var k=false;for(graph in o){q=false;p=0;l=false;k=false;for(point=0;pointl||l===false){l=u}if(tk||k===false){k=t}}h.push(q);g.push(p);e.push(l);d.push(k)}h=Math.min.apply(null,h);g=Math.min.apply(null,g);e=Math.max.apply(null,e);d=Math.max.apply(null,d);u=SVG.newCoordinates(h+Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight)-SVG.newCoordinates(h,h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight);t=SVG.newCoordinates(g+Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop)-SVG.newCoordinates(g,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);if(SVG.grid==="big"||SVG.grid==="both"){SVG.holder.getElementById("grid").setAttribute("width",u);SVG.holder.getElementById("grid").setAttribute("height",t);SVG.holder.getElementById("grid").setAttribute("y",SVG.newCoordinates(Math.floor(g/Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop));SVG.holder.getElementById("grid").setAttribute("x",SVG.newCoordinates(Math.floor(h/Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight));SVG.holder.getElementById("grid").querySelector("path").setAttribute("d","M "+u+" 0 L 0 0 0 "+t);if(SVG.grid==="both"){SVG.holder.getElementById("grid").querySelector("rect").setAttribute("width",u);SVG.holder.getElementById("grid").querySelector("rect").setAttribute("height",t)}}if(SVG.grid==="small"||SVG.grid==="both"){u=u/10;t=t/10;SVG.holder.getElementById("smallGrid").setAttribute("width",u);SVG.holder.getElementById("smallGrid").setAttribute("height",t);if(SVG.grid==="small"){SVG.holder.getElementById("smallGrid").setAttribute("y",SVG.newCoordinates(Math.floor(g/Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(d-g)/Math.log(10))),g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop));SVG.holder.getElementById("smallGrid").setAttribute("x",SVG.newCoordinates(Math.floor(h/Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(e-h)/Math.log(10))),h,e,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight))}SVG.holder.getElementById("smallGrid").querySelector("path").setAttribute("d","M "+u+" 0 L 0 0 0 "+t)}if(SVG.x_axis===true){t=SVG.newCoordinates(0,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);SVG.axis.setAttribute("y1",t);SVG.axis.setAttribute("y2",t)}var j=new Array();j.minX=h;j.minY=g;j.maxX=e;j.maxY=d;return j};SVG.addGraph=function(e,d){SVG.raw_points[e]={};SVG.raw_points[e].color=d;SVG.raw_points[e].data=new Array();SVG.labels[e]=new Array()};SVG.addPoints=function(e,d){d.sort(function(g,f){if(g.x=0;--i){p1[i]=(r[i]-c[i]*p1[i+1])/b[i]}for(i=0;i","").split("");var j=0;var h=false;for(j=0;j]+)>)/ig,"").replace("%y",SVG.raw_points[graph].data[w][1]).replace("%x",SVG.raw_points[graph].data[w][0]);if(j%2==0){k.appendChild(document.createTextNode(z[j]))}else{h=document.createElementNS(SVG.ns,"tspan");h.setAttribute("dy","-5");h.appendChild(document.createTextNode(z[j]));k.appendChild(h)}}var A=document.createElementNS(SVG.ns,"path");A.setAttribute("stroke","black");A.setAttribute("stroke-width",2);A.setAttribute("fill","white");A.setAttribute("opacity",0.5);l.appendChild(A);l.appendChild(k);var f=u[w]-k.getBoundingClientRect().width/2;var p=SVG.parent_holder.offsetHeight-q[w]-20;var o=k.getBoundingClientRect().width;var d=k.getBoundingClientRect().height;if(u[w]+o/2>SVG.parent_holder.offsetWidth){f=u[w]-o-20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d/2+2.5)+" L "+(f+o+10)+" "+(p-d/2+5)+" L "+(f+o+5)+" "+(p-d/2+7.5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{if(u[w]-k.getBoundingClientRect().width/2<0){f=u[w]+20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d/2+7.5)+" L "+(f-10)+" "+(p-d/2+5)+" L "+(f-5)+" "+(p-d/2+2.5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{if(q[w]+k.getBoundingClientRect().height>SVG.parent_holder.offsetHeight){f=u[w]+20;p=SVG.parent_holder.offsetHeight-q[w]+5;A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d/2+7.5)+" L "+(f-10)+" "+(p-d/2+5)+" L "+(f-5)+" "+(p-d/2+2.5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" Z")}else{A.setAttribute("d","M "+(f-5)+" "+(p+5)+" L "+(f-5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p-d+5)+" L "+(f+o+5)+" "+(p+5)+" L "+(f+o/2+2.5)+" "+(p+5)+" L "+(f+o/2)+" "+(p+10)+" L "+(f+o/2-2.5)+" "+(p+5)+" Z")}}}k.setAttribute("x",f);k.setAttribute("y",p);l.setAttribute("display","none")}}for(w=0;w