From 8809cef704626667908aa876e84f697b9bf98902 Mon Sep 17 00:00:00 2001 From: Phyks Date: Sat, 29 Mar 2014 17:28:20 +0100 Subject: [PATCH] * Better grid : autoscale + good positionning for y axis * Value available in legend using %v --- examples/index.html | 2 +- timeline.js | 45 +++++++++++++++++++++++++++++++++++++-------- timeline.min.js | 2 +- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/examples/index.html b/examples/index.html index 9f0dd56..c13d473 100644 --- a/examples/index.html +++ b/examples/index.html @@ -8,7 +8,7 @@ } - +
diff --git a/timeline.js b/timeline.js index 5971aa8..9000821 100644 --- a/timeline.js +++ b/timeline.js @@ -81,14 +81,6 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) } SVG.grid = grid; - if(SVG.grid !== "none") { - var grid = document.createElementNS(SVG.ns, 'rect'); - grid.setAttribute('width', "2000"); - grid.setAttribute('height', "2000"); - grid.setAttribute('y', "-20"); - grid.setAttribute('fill', 'url(#grid)'); - SVG.holder.appendChild(grid); - } var marker = document.createElementNS(SVG.ns, 'marker'); marker.setAttribute('id', 'markerArrow'); @@ -117,6 +109,19 @@ SVG.init = function (id, height, width, grid, x_axis, rounded) SVG.g.appendChild(SVG.axis); } + if(SVG.grid !== "none") { + var grid = document.createElementNS(SVG.ns, 'rect'); + grid.setAttribute('width', "100%"); + grid.setAttribute('height', "100%"); + if(SVG.grid === 'big' || SVG.grid === 'both') { + grid.setAttribute('fill', 'url(#grid)'); + } + else { + grid.setAttribute('fill', 'url(#smallGrid)'); + } + SVG.g.appendChild(grid); + } + SVG.rounded = rounded; SVG.x_axis = x_axis; } @@ -150,6 +155,29 @@ SVG.scale = function(data) { } } + y = SVG.newCoordinates(minY+Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop) - SVG.newCoordinates(minY, minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop); + if(SVG.grid === 'big' || SVG.grid === 'both') { + SVG.holder.getElementById('grid').setAttribute('width', y); + SVG.holder.getElementById('grid').setAttribute('height', y); + SVG.holder.getElementById('grid').setAttribute('y', SVG.newCoordinates(Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop)); + SVG.holder.getElementById('grid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y); + + if(SVG.grid === 'both') { + SVG.holder.getElementById('grid').querySelector('rect').setAttribute('width', y); + SVG.holder.getElementById('grid').querySelector('rect').setAttribute('height', y); + } + } + if(SVG.grid === 'small' || SVG.grid === 'both') { + y = y / 10; + SVG.holder.getElementById('smallGrid').setAttribute('width', y); + SVG.holder.getElementById('smallGrid').setAttribute('height', y); + if(SVG.grid === 'small') { + SVG.holder.getElementById('smallGrid').setAttribute('y', SVG.newCoordinates(Math.floor(minY / Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10)))) * Math.pow(10, Math.floor(Math.log(maxY - minY) / Math.log(10))), minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop)); + } + SVG.holder.getElementById('smallGrid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y); + SVG.holder.getElementById('smallGrid').querySelector('path').setAttribute('d', 'M '+y+' 0 L 0 0 0 '+y); + } + /* Draw axis */ if(SVG.x_axis === true) { y = SVG.newCoordinates(0, minY, maxY, 2*SVG.marginBottom, SVG.parent_holder.offsetHeight - SVG.marginTop); @@ -311,6 +339,7 @@ SVG.draw = function() { var i = 0; var tmp = false; for(i = 0; i < text.length; i++) { + text[i] = text[i].replace(/(<([^>]+)>)/ig,"").replace('%v', SVG.raw_points[point][1]); if(i % 2 == 0) { element.appendChild(document.createTextNode(text[i])); diff --git a/timeline.min.js b/timeline.min.js index c7f9fb8..454fc52 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){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;if(SVG.grid!=="none"){var e=document.createElementNS(SVG.ns,"rect");e.setAttribute("width","2000");e.setAttribute("height","2000");e.setAttribute("y","-20");e.setAttribute("fill","url(#grid)");SVG.holder.appendChild(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)}SVG.rounded=j;SVG.x_axis=u};SVG.newCoordinates=function(h,f,d,g,j){var e=(j-g)/(d-f);return e*h-e*f+g};SVG.scale=function(k){var h=false,g=0;var e=false,d=false;var p=0,o=0;var f=false,l=false,q=false;for(point=0;pointe||e===false){e=p}if(od||d===false){d=o}}if(SVG.x_axis===true){o=SVG.newCoordinates(0,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);SVG.axis.setAttribute("y1",o);SVG.axis.setAttribute("y2",o)}var j=new Array();j.minX=h;j.minY=g;j.maxX=e;j.maxY=d;return j};SVG.addPoints=function(d){d.sort(function(f,e){if(f.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;jSVG.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{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;we||e===false){e=p}if(od||d===false){d=o}}o=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",o);SVG.holder.getElementById("grid").setAttribute("height",o);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").querySelector("path").setAttribute("d","M "+o+" 0 L 0 0 0 "+o);if(SVG.grid==="both"){SVG.holder.getElementById("grid").querySelector("rect").setAttribute("width",o);SVG.holder.getElementById("grid").querySelector("rect").setAttribute("height",o)}}if(SVG.grid==="small"||SVG.grid==="both"){o=o/10;SVG.holder.getElementById("smallGrid").setAttribute("width",o);SVG.holder.getElementById("smallGrid").setAttribute("height",o);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").querySelector("path").setAttribute("d","M "+o+" 0 L 0 0 0 "+o);SVG.holder.getElementById("smallGrid").querySelector("path").setAttribute("d","M "+o+" 0 L 0 0 0 "+o)}if(SVG.x_axis===true){o=SVG.newCoordinates(0,g,d,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop);SVG.axis.setAttribute("y1",o);SVG.axis.setAttribute("y2",o)}var j=new Array();j.minX=h;j.minY=g;j.maxX=e;j.maxY=d;return j};SVG.addPoints=function(d){d.sort(function(f,e){if(f.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("%v",SVG.raw_points[w][1]);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{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