timeline.js/timeline.min.js
2014-04-08 20:09:07 +02:00

1 line
10 KiB
JavaScript

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.fill=true;SVG.line="line";SVG.dashed_style="5, 5";SVG.parent_holder=false;SVG.holder=false;SVG.g=false;SVG.axis=false;SVG.graphs=[];SVG.raw_points=[];SVG.x_callback=false;SVG.createElement=function(b,a){var c=document.createElementNS(SVG.ns,b);for(attr in a){c.setAttribute(attr,a[attr])}return c};SVG.hasClass=function(b,a){return(" "+b.getAttribute("class")+" ").indexOf(" "+a+" ")>-1};SVG.addGraph=function(b,a){SVG.graphs[b]=a};SVG.hasGraph=function(a){if(typeof(SVG.graphs[a])==="undefined"){return false}else{return true}};SVG.clearGraph=function(b){if(typeof(b)==="undefined"){SVG.raw_points=[];SVG.graphs=[]}else{for(var a=0;a<SVG.raw_points.length;a++){if(SVG.raw_points[a].graph===b){SVG.raw_points[a]=undefined}}}};SVG.addPoints=function(d,c){for(var a=0;a<c.length;a++){var b={graph:d,x:c[a].x,y:c[a].y};if(typeof(c[a].label)!=="undefined"){b.label=c[a].label}else{b.label=""}if(typeof(c[a].click)!=="undefined"){b.click=c[a].click}else{b.click=false}SVG.raw_points.push(b)}SVG.raw_points.sort(function(f,e){if(f.x<e.x){return -1}else{if(f.x==e.x){return 0}else{return 1}}})};SVG.newCoordinate=function(f,d,b,e,g){var c=(g-e)/(b-d);return c*(f-d)+e};SVG.getNewXY=function(a,c,d,b){return function(e,f){return{x:SVG.newCoordinate(e,a,c,SVG.marginLeft,SVG.parent_holder.offsetWidth-SVG.marginRight),y:SVG.newCoordinate(f,d,b,2*SVG.marginBottom,SVG.parent_holder.offsetHeight-SVG.marginTop)}}};SVG.getControlPoints=function(h){var p=new Array();var o=new Array();var e=h.length-1;var l=new Array();var k=new Array();var j=new Array();var d=new Array();l[0]=0;k[0]=2;j[0]=1;d[0]=h[0]+2*h[1];for(var g=1;g<e-1;g++){l[g]=1;k[g]=4;j[g]=1;d[g]=4*h[g]+2*h[g+1]}l[e-1]=2;k[e-1]=7;j[e-1]=0;d[e-1]=8*h[e-1]+h[e];var f;for(var g=1;g<e;g++){f=l[g]/k[g-1];k[g]=k[g]-f*j[g-1];d[g]=d[g]-f*d[g-1]}p[e-1]=d[e-1]/k[e-1];for(var g=e-2;g>=0;--g){p[g]=(d[g]-j[g]*p[g+1])/k[g]}for(var g=0;g<e-1;g++){o[g]=2*h[g+1]-p[g+1]}o[e-1]=0.5*(h[e]+p[e-1]);return{p1:p,p2:o}};SVG.init=function(j){if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")){alert("ERROR : Your browser does not support embedded SVG.")}SVG.parent_holder=document.getElementById(j.id);var h=SVG.createElement("svg:svg",{width:j.width,height:j.height});h.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink",SVG.xlinkns);SVG.parent_holder.appendChild(h);SVG.holder=SVG.parent_holder.querySelector("svg");defs=SVG.createElement("defs",{});SVG.holder.appendChild(defs);if(j.grid==="small"||j.grid==="both"){var i=SVG.createElement("pattern",{id:"smallGrid",width:8,height:8,patternUnits:"userSpaceOnUse"});var e=SVG.createElement("path",{d:"M 8 0 L 0 0 0 8",fill:"none",stroke:"gray","stroke-width":"0.5"});i.appendChild(e);defs.appendChild(i)}if(j.grid==="big"||j.grid==="both"){var d=SVG.createElement("pattern",{id:"grid",width:80,height:80,patternUnits:"userSpaceOnUse"});if(j.grid==="both"){var c=SVG.createElement("rect",{width:80,height:80,fill:"url(#smallGrid)"});d.appendChild(c)}var f=SVG.createElement("path",{d:"M 80 0 L 0 0 0 80",fill:"none",stroke:"gray","stroke-width":"1"});d.appendChild(f);defs.appendChild(d)}SVG.grid=j.grid;var g=SVG.createElement("marker",{id:"markerArrow",markerWidth:13,markerHeight:13,refX:2,refY:6,orient:"auto"});var b=SVG.createElement("path",{d:"M2,2 L2,11 L10,6 L2,2",fill:"gray"});g.appendChild(b);defs.appendChild(g);SVG.g=SVG.createElement("g",{transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.holder.appendChild(SVG.g);if(j.x_axis===true){SVG.axis=SVG.createElement("line",{x1:SVG.marginLeft,y1:SVG.parent_holder.offsetHeight/2+1.5,x2:SVG.parent_holder.offsetWidth-13-SVG.marginRight,y2:SVG.parent_holder.offsetHeight/2+1.5,stroke:"gray","stroke-width":3,"marker-end":'url("#markerArrow")'});SVG.g.appendChild(SVG.axis)}if(SVG.grid!=="none"){var a=SVG.createElement("rect",{width:"100%",height:"100%"});if(SVG.grid==="big"||SVG.grid==="both"){a.setAttribute("fill","url(#grid)")}else{a.setAttribute("fill","url(#smallGrid)")}SVG.g.appendChild(a)}SVG.rounded=j.rounded;SVG.x_axis=j.x_axis;SVG.line=j.line;SVG.fill=j.fill;SVG.x_callback=j.x_callback};SVG.scale=function(j){var k=true;for(graph in j){k=false;break}if(k){return false}var g=false,e=0;var c=false,b=false;var d=false,l=false,q=false;for(var p=0;p<j.length;p++){if(j[p].x<g||g===false){g=j[p].x}if(j[p].x>c||c===false){c=j[p].x}if(j[p].y<e){e=j[p].y}if(j[p].y>b||b===false){b=j[p].y}}var f=SVG.getNewXY(g,c,e,b);var i=f(Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));var o=f(0,0);var n={x:i.x-o.x,y:i.y-o.y};if(SVG.grid==="big"||SVG.grid==="both"){var a=SVG.holder.getElementById("grid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);var h=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",h.y);a.setAttribute("x",h.x);a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y);if(SVG.grid==="both"){a.querySelector("rect").setAttribute("width",n.x);a.querySelector("rect").setAttribute("height",n.y)}}if(SVG.grid==="small"||SVG.grid==="both"){n.x=n.x/10;n.y=n.y/10;var a=SVG.holder.getElementById("smallGrid");a.setAttribute("width",n.x);a.setAttribute("height",n.y);if(SVG.grid==="small"){var m=f(Math.floor(g/Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(c-g)/Math.log(10))),Math.floor(e/Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))))*Math.pow(10,Math.floor(Math.log(b-e)/Math.log(10))));a.setAttribute("y",m.y);a.setAttribute("x",m.x)}a.querySelector("path").setAttribute("d","M "+n.x+" 0 L 0 0 0 "+n.y)}if(SVG.x_axis===true){y=f(0,0).y;SVG.axis.setAttribute("y1",y);SVG.axis.setAttribute("y2",y)}return f};SVG.draw=function(){var c=SVG.scale(SVG.raw_points);var p=[],s;var n,m;var f;for(var o=0;o<SVG.raw_points.length;o++){var h=c(SVG.raw_points[o].x,SVG.raw_points[o].y);p.push({x:h.x,y:h.y,graph:SVG.raw_points[o].graph,click:SVG.raw_points[o].click,label:SVG.raw_points[o].label})}for(var r in SVG.graphs){var b=p.filter(function(g){return g.graph==r});s="";if(SVG.rounded===true){n=SVG.getControlPoints(x);m=SVG.getControlPoints(y);for(var o=0;o<p.length-1;o++){s+="C "+n.p1[o]+" "+m.p1[o]+" "+n.p2[o]+" "+m.p2[o]+" "+x[o+1]+" "+y[o+1]+" "}}else{for(var o=1;o<b.length;o++){s+="L "+b[o].x+" "+b[o].y+" "}}if(SVG.line!=="none"){f=SVG.createElement("path",{"class":"line",stroke:SVG.graphs[r],"stroke-width":2,fill:"none",d:"M "+b[0].x+" "+b[0].y+" "+s});if(SVG.line==="dashed"){f.setAttribute("style","stroke-dasharray: "+SVG.dashed_style)}SVG.g.appendChild(f)}if(SVG.fill){f=SVG.createElement("path",{"class":"graph",fill:SVG.graphs[r],opacity:"0.25",stroke:"none",d:"M "+b[0].x+" "+2*SVG.marginBottom+" L "+b[0].x+" "+b[0].y+" "+s+" L "+b[b.length-1].x+" "+2*SVG.marginBottom+" Z"});SVG.g.insertBefore(f,SVG.g.querySelectorAll(".over")[0])}for(var o=0;o<b.length;o++){f=SVG.createElement("circle",{"class":"point",id:"point_"+o+"_"+r,cx:b[o].x,cy:b[o].y,r:4,fill:"#333",stroke:SVG.graphs[r],"stroke-width":2});SVG.g.insertBefore(f,SVG.g.querySelectorAll(".label")[0]);if(b[o].click!==false){f.onclick=b[o].click}if(b[o].label!==""){var j=SVG.createElement("g",{"class":"label",id:"label_"+o+"_"+r,transform:"translate(0, "+SVG.parent_holder.offsetHeight+") scale(1, -1)"});SVG.g.appendChild(j);f=SVG.createElement("text",{});var q=b[o].label.replace("</sup>","<sup>").split("<sup>");for(var e=0;e<q.length;e++){q[e]=q[e].replace(/(<([^>]+)>)/ig,"").replace("%y",b[o].y).replace("%x",b[o].x);if(e%2==0){f.appendChild(document.createTextNode(q[e]))}else{var h=SVG.createElement("tspan",{dy:"-5"});h.appendChild(document.createTextNode(q[e]));f.appendChild(h)}}s=SVG.createElement("path",{stroke:"black","stroke-width":2,fill:"white",opacity:0.5});j.appendChild(s);j.appendChild(f);var d=b[o].x-f.getBoundingClientRect().width/2;var l=SVG.parent_holder.offsetHeight-b[o].y-20;var k=f.getBoundingClientRect().width;var a=f.getBoundingClientRect().height;if(b[o].x-f.getBoundingClientRect().width/2<0){d=b[o].x+20;l=SVG.parent_holder.offsetHeight-b[o].y+5;s.setAttribute("d","M "+(d-5)+" "+(l+5)+" L "+(d-5)+" "+(l-a/2+7.5)+" L "+(d-10)+" "+(l-a/2+5)+" L "+(d-5)+" "+(l-a/2+2.5)+" L "+(d-5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l+5)+" Z")}else{if(b[o].y+f.getBoundingClientRect().height+12>SVG.parent_holder.offsetHeight){d=b[o].x+20;l=SVG.parent_holder.offsetHeight-b[o].y+5;s.setAttribute("d","M "+(d-5)+" "+(l+5)+" L "+(d-5)+" "+(l-a/2+7.5)+" L "+(d-10)+" "+(l-a/2+5)+" L "+(d-5)+" "+(l-a/2+2.5)+" L "+(d-5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l+5)+" Z");if(d+k>SVG.parent_holder.offsetWidth){d=b[o].y-k-20;l=SVG.parent_holder.offsetHeight-b[o].y+5;s.setAttribute("d","M "+(d-5)+" "+(l+5)+" L "+(d-5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a/2+2.5)+" L "+(d+k+10)+" "+(l-a/2+5)+" L "+(d+k+5)+" "+(l-a/2+7.5)+" L "+(d+k+5)+" "+(l+5)+" Z")}}else{if(b[o].x+k/2+12>SVG.parent_holder.offsetWidth){d=b[o].x-k-20;l=SVG.parent_holder.offsetHeight-b[o].y+5;s.setAttribute("d","M "+(d-5)+" "+(l+5)+" L "+(d-5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a/2+2.5)+" L "+(d+k+10)+" "+(l-a/2+5)+" L "+(d+k+5)+" "+(l-a/2+7.5)+" L "+(d+k+5)+" "+(l+5)+" Z")}else{s.setAttribute("d","M "+(d-5)+" "+(l+5)+" L "+(d-5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l-a+5)+" L "+(d+k+5)+" "+(l+5)+" L "+(d+k/2+2.5)+" "+(l+5)+" L "+(d+k/2)+" "+(l+10)+" L "+(d+k/2-2.5)+" "+(l+5)+" Z")}}}f.setAttribute("x",d);f.setAttribute("y",l);j.setAttribute("display","none")}}}};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, .legend_x"),function(a){a.parentNode.removeChild(a)});SVG.draw()}};