From c7fe04e5b886f942ce84783cb2c39eec41550590 Mon Sep 17 00:00:00 2001 From: Clinton Sheppard Date: Thu, 1 Mar 2012 18:22:52 -0600 Subject: [PATCH] support non-numeric y-axis values and single series timelines --- example.html | 29 +++++++++++++++++++++++++++++ morris.coffee | 15 ++++++++++----- morris.js | 16 ++++++++++------ morris.min.js | 2 +- 4 files changed, 50 insertions(+), 12 deletions(-) diff --git a/example.html b/example.html index 916bb16..6e53757 100644 --- a/example.html +++ b/example.html @@ -114,4 +114,33 @@ }); }); + +

Text values

+
+ diff --git a/morris.coffee b/morris.coffee index ebcbfd0..e4ee183 100644 --- a/morris.coffee +++ b/morris.coffee @@ -95,6 +95,9 @@ class Morris.Line # remove child elements (get rid of old drawings) @el.empty() + isNumber = (o) => + ! isNan (o-0) + # the raphael drawing instance @r = new Raphael(@el[0]) @@ -103,7 +106,7 @@ class Morris.Line width = @el.width() - left - @options.marginRight height = @el.height() - @options.marginTop - @options.marginBottom dx = width / (@xmax - @xmin) - dy = height / @options.ymax + dy = height / (if isNumber(@options.ymax) then @options.ymax else height) # quick translation helpers transX = (x) => @@ -112,13 +115,15 @@ class Morris.Line else left + (x - @xmin) * dx transY = (y) => - return @options.marginTop + height - y * dy + return @options.marginTop + height - (if isNumber(y) then y * dy else dy) # draw y axis labels, horizontal lines - lineInterval = height / (@options.numLines - 1) + lineInterval = height / (if @options.numLines == 1 then 2 else (@options.numLines - 1)) for i in [0..@options.numLines-1] y = @options.marginTop + i * lineInterval - v = Math.round((@options.numLines - 1 - i) * @options.ymax / (@options.numLines - 1)) + v = Math.round((@options.numLines - 1 - i) * @options.ymax / (if @options.numLines == 1 then 1 else (@options.numLines - 1))) + if isNaN(v) + v = "" @r.text(left - @options.marginLeft/2, y, v) .attr('font-size', @options.gridTextSize) .attr('fill', @options.gridTextColor) @@ -187,7 +192,7 @@ class Morris.Line hoverSet.show() xLabel.attr('text', @columnLabels[index]) for i in [0..@series.length-1] - yLabels[i].attr('text', "#{@seriesLabels[i]}: #{@commas(@series[i][index])}") + yLabels[i].attr('text', "#{@seriesLabels[i]}: #{if isNumber(@series[i][index]) then @commas(@series[i][index]) else @series[i][index]}") # recalculate hover box width maxLabelWidth = Math.max.apply null, $.map yLabels, (l) -> l.getBBox().width diff --git a/morris.js b/morris.js index a5c6f32..5b1e9e8 100644 --- a/morris.js +++ b/morris.js @@ -85,15 +85,18 @@ }; Line.prototype.redraw = function() { - var c, circle, columns, coords, dx, dy, height, hideHover, hilight, hover, hoverHeight, hoverMargins, hoverSet, i, label, labelBox, left, lineInterval, path, pointGrow, pointShrink, prevHilight, prevLabelMargin, s, seriesCoords, seriesPoints, touchHandler, transX, transY, updateHilight, updateHover, v, width, x, xLabel, xLabelMargin, y, yLabel, yLabels, _i, _j, _len, _len2, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, + var c, circle, columns, coords, dx, dy, height, hideHover, hilight, hover, hoverHeight, hoverMargins, hoverSet, i, isNumber, label, labelBox, left, lineInterval, path, pointGrow, pointShrink, prevHilight, prevLabelMargin, s, seriesCoords, seriesPoints, touchHandler, transX, transY, updateHilight, updateHover, v, width, x, xLabel, xLabelMargin, y, yLabel, yLabels, _i, _j, _len, _len2, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _this = this; this.el.empty(); + isNumber = function(o) { + return !isNan(o - 0); + }; this.r = new Raphael(this.el[0]); left = this.measureText(this.options.ymax, this.options.gridTextSize).width + this.options.marginLeft; width = this.el.width() - left - this.options.marginRight; height = this.el.height() - this.options.marginTop - this.options.marginBottom; dx = width / (this.xmax - this.xmin); - dy = height / this.options.ymax; + dy = height / (isNumber(this.options.ymax) ? this.options.ymax : height); transX = function(x) { if (_this.xvals.length === 1) { return left + width / 2; @@ -102,12 +105,13 @@ } }; transY = function(y) { - return _this.options.marginTop + height - y * dy; + return _this.options.marginTop + height - (isNumber(y) ? y * dy : dy); }; - lineInterval = height / (this.options.numLines - 1); + lineInterval = height / (this.options.numLines === 1 ? 2 : this.options.numLines - 1); for (i = 0, _ref = this.options.numLines - 1; 0 <= _ref ? i <= _ref : i >= _ref; 0 <= _ref ? i++ : i--) { y = this.options.marginTop + i * lineInterval; - v = Math.round((this.options.numLines - 1 - i) * this.options.ymax / (this.options.numLines - 1)); + v = Math.round((this.options.numLines - 1 - i) * this.options.ymax / (this.options.numLines === 1 ? 1 : this.options.numLines - 1)); + if (isNaN(v)) v = ""; this.r.text(left - this.options.marginLeft / 2, y, v).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end'); this.r.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth); } @@ -183,7 +187,7 @@ hoverSet.show(); xLabel.attr('text', _this.columnLabels[index]); for (i = 0, _ref9 = _this.series.length - 1; 0 <= _ref9 ? i <= _ref9 : i >= _ref9; 0 <= _ref9 ? i++ : i--) { - yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (_this.commas(_this.series[i][index]))); + yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (isNumber(_this.series[i][index]) ? _this.commas(_this.series[i][index]) : _this.series[i][index])); } maxLabelWidth = Math.max.apply(null, $.map(yLabels, function(l) { return l.getBBox().width; diff --git a/morris.min.js b/morris.min.js index 7e1b86c..3d15c65 100644 --- a/morris.min.js +++ b/morris.min.js @@ -1 +1 @@ -((function(){var a,b;a=jQuery,b={},b.Line=function(){function c(c){if(!(this instanceof b.Line))return new b.Line(c);typeof c.element=="string"?this.el=a(document.getElementById(c.element)):this.el=a(c.element),this.options=a.extend({},this.defaults,c);if(this.options.data===void 0||this.options.data.length===0)return;this.el.addClass("graph-initialised"),this.precalc(),this.redraw()}return c.prototype.defaults={lineWidth:3,pointSize:4,lineColors:["#0b62a4","#7A92A3","#4da74d","#afd8f8","#edc240","#cb4b4b","#9440ed"],ymax:"auto",marginTop:25,marginRight:25,marginBottom:30,marginLeft:25,numLines:5,gridLineColor:"#aaa",gridTextColor:"#888",gridTextSize:12,gridStrokeWidth:.5,hoverPaddingX:10,hoverPaddingY:5,hoverMargin:10,hoverFillColor:"#fff",hoverBorderColor:"#ccc",hoverBorderWidth:2,hoverOpacity:.95,hoverLabelColor:"#444",hoverFontSize:12,smooth:!0},c.prototype.precalc=function(){var b,c,d,e,f,g=this;this.options.data.sort(function(a,b){return(a[g.options.xkey]5?this.options.ymax=Math.max(parseInt(this.options.ymax.slice(5),10),c):this.options.ymax=c},c.prototype.redraw=function(){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_=this;this.el.empty(),this.r=new Raphael(this.el[0]),r=this.measureText(this.options.ymax,this.options.gridTextSize).width+this.options.marginLeft,H=this.el.width()-r-this.options.marginRight,h=this.el.height()-this.options.marginTop-this.options.marginBottom,f=H/(this.xmax-this.xmin),g=h/this.options.ymax,C=function(a){return _.xvals.length===1?r+H/2:r+(a-_.xmin)*f},D=function(a){return _.options.marginTop+h-a*g},s=h/(this.options.numLines-1);for(o=0,S=this.options.numLines-1;0<=S?o<=S:o>=S;0<=S?o++:o--)L=this.options.marginTop+o*s,G=Math.round((this.options.numLines-1-o)*this.options.ymax/(this.options.numLines-1)),this.r.text(r-this.options.marginLeft/2,L,G).attr("font-size",this.options.gridTextSize).attr("fill",this.options.gridTextColor).attr("text-anchor","end"),this.r.path("M"+r+","+L+"H"+(r+H)).attr("stroke",this.options.gridLineColor).attr("stroke-width",this.options.gridStrokeWidth);x=null,K=50;for(o=T=Math.ceil(this.xmin),U=Math.floor(this.xmax);T<=U?o<=U:o>=U;T<=U?o++:o--)p=this.r.text(C(o),this.options.marginTop+h+this.options.marginBottom/2,o).attr("font-size",this.options.gridTextSize).attr("fill",this.options.gridTextColor),q=p.getBBox(),x===null||x<=q.x?x=q.x+q.width+K:p.remove();d=function(){var a,b,c,d;c=this.xvals,d=[];for(a=0,b=c.length;a=0;W<=0?o++:o--)e=z[o],e.length>1&&(t=this.createPath(e,this.options.marginTop,r,this.options.marginTop+h,r+H),this.r.path(t).attr("stroke",this.options.lineColors[o]).attr("stroke-width",this.options.lineWidth));A=function(){var a,b;b=[];for(o=0,a=z.length-1;0<=a?o<=a:o>=a;0<=a?o++:o--)b.push([]);return b}();for(o=X=z.length-1;X<=0?o<=0:o>=0;X<=0?o++:o--){Y=z[o];for(P=0,R=Y.length;P=Z;0<=Z?o++:o--)M=this.r.text(0,this.options.hoverFontSize*1.5*(o+1.5)-l/2,"").attr("fill",this.options.lineColors[o]).attr("font-size",this.options.hoverFontSize),N.push(M),n.push(M);return F=function(b){var c,e,f,g,i;n.show(),J.attr("text",_.columnLabels[b]);for(c=0,i=_.series.length-1;0<=i?c<=i:c>=i;0<=i?c++:c--)N[c].attr("text",""+_.seriesLabels[c]+": "+_.commas(_.series[c][b]));return e=Math.max.apply(null,a.map(N,function(a){return a.getBBox().width})),e=Math.max(e,J.getBBox().width),k.attr("width",e+_.options.hoverPaddingX*2),k.attr("x",-_.options.hoverPaddingX-e/2),g=Math.min.apply(null,a.map(_.series,function(a){return D(a[b])})),g>l+_.options.hoverPaddingY*2+_.options.hoverMargin+_.options.marginTop?g=g-l/2-_.options.hoverPaddingY-_.options.hoverMargin:g=g+l/2+_.options.hoverPaddingY+_.options.hoverMargin,g=Math.max(_.options.marginTop+l/2+_.options.hoverPaddingY,g),g=Math.min(_.options.marginTop+h-l/2-_.options.hoverPaddingY,g),f=Math.min(r+H-e/2-_.options.hoverPaddingX,d[b]),f=Math.max(r+e/2+_.options.hoverPaddingX,f),n.attr("transform","t"+f+","+g)},i=function(){return n.hide()},m=a.map(d.slice(1),function(a,b){return(a+d[b])/2}),w=null,u=Raphael.animation({r:this.options.pointSize+3},25,"linear"),v=Raphael.animation({r:this.options.pointSize},25,"linear"),j=function(a){var b,c,d;if(w!==null&&w!==a)for(b=0,d=A.length-1;0<=d?b<=d:b>=d;0<=d?b++:b--)A[b][w].animate(v);if(a!==null&&w!==a){for(b=0,c=A.length-1;0<=c?b<=c:b>=c;0<=c?b++:b--)A[b][a].animate(u);F(a)}w=a;if(a===null)return i()},E=function(a){var b,c,d;a-=_.el.offset().left,d=[];for(b=c=m.length;c<=0?b<=0:b>=0;c<=0?b++:b--){if(b===0||m[b-1]>a){j(b);break}d.push(void 0)}return d},this.el.mousemove(function(a){return E(a.pageX)}),B=function(a){var b;return b=a.originalEvent.touches[0]||a.originalEvent.changedTouches[0],E(b.pageX),b},this.el.bind("touchstart",B),this.el.bind("touchmove",B),this.el.bind("touchend",B),j(0)},c.prototype.createPath=function(b,c,d,e,f){var g,h,i,j,k,l,m,n,o,p,q,r,s;n="";if(this.options.smooth){i=this.gradients(b);for(j=0,s=b.length-1;0<=s?j<=s:j>=s;0<=s?j++:j--)g=b[j],j===0?n+="M"+g.x+","+g.y:(h=i[j],l=b[j-1],m=i[j-1],k=(g.x-l.x)/4,o=l.x+k,q=Math.min(e,l.y+k*m),p=g.x-k,r=Math.min(e,g.y-k*h),n+="C"+o+","+q+","+p+","+r+","+g.x+","+g.y)}else n="M"+a.map(b,function(a){return""+a.x+","+a.y}).join("L");return n},c.prototype.gradients=function(b){return a.map(b,function(a,c){return c===0?(b[1].y-a.y)/(b[1].x-a.x):c===b.length-1?(a.y-b[c-1].y)/(a.x-b[c-1].x):(b[c+1].y-b[c-1].y)/(b[c+1].x-b[c-1].x)})},c.prototype.measureText=function(a,b){var c,d;return b==null&&(b=12),d=this.r.text(100,100,a).attr("font-size",b),c=d.getBBox(),d.remove(),c},c.prototype.parseYear=function(a){var b,c,d,e,f,g,h,i,j,k;return g=a.toString(),c=g.match(/^(\d+) Q(\d)$/),e=g.match(/^(\d+)-(\d+)$/),f=g.match(/^(\d+)-(\d+)-(\d+)$/),c?parseInt(c[1],10)+(parseInt(c[2],10)*3-1)/12:e?parseInt(e[1],10)+(parseInt(e[2],10)-1)/12:f?(k=parseInt(f[1],10),d=parseInt(f[2],10),b=parseInt(f[3],10),h=(new Date(k,d-1,b)).getTime(),i=(new Date(k,0,1)).getTime(),j=(new Date(k+1,0,1)).getTime(),k+(h-i)/(j-i)):parseInt(a,10)},c.prototype.commas=function(a){return Math.max(0,a).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g,",")},c}(),window.Morris=b})).call(this); \ No newline at end of file +((function(){var a,b;a=jQuery,b={},b.Line=function(){function c(c){if(!(this instanceof b.Line))return new b.Line(c);typeof c.element=="string"?this.el=a(document.getElementById(c.element)):this.el=a(c.element),this.options=a.extend({},this.defaults,c);if(this.options.data===void 0||this.options.data.length===0)return;this.el.addClass("graph-initialised"),this.precalc(),this.redraw()}return c.prototype.defaults={lineWidth:3,pointSize:4,lineColors:["#0b62a4","#7A92A3","#4da74d","#afd8f8","#edc240","#cb4b4b","#9440ed"],ymax:"auto",marginTop:25,marginRight:25,marginBottom:30,marginLeft:25,numLines:5,gridLineColor:"#aaa",gridTextColor:"#888",gridTextSize:12,gridStrokeWidth:.5,hoverPaddingX:10,hoverPaddingY:5,hoverMargin:10,hoverFillColor:"#fff",hoverBorderColor:"#ccc",hoverBorderWidth:2,hoverOpacity:.95,hoverLabelColor:"#444",hoverFontSize:12,smooth:!0},c.prototype.precalc=function(){var b,c,d,e,f,g=this;this.options.data.sort(function(a,b){return(a[g.options.xkey]5?this.options.ymax=Math.max(parseInt(this.options.ymax.slice(5),10),c):this.options.ymax=c},c.prototype.redraw=function(){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,ba=this;this.el.empty(),p=function(a){return!isNan(a-0)},this.r=new Raphael(this.el[0]),s=this.measureText(this.options.ymax,this.options.gridTextSize).width+this.options.marginLeft,I=this.el.width()-s-this.options.marginRight,h=this.el.height()-this.options.marginTop-this.options.marginBottom,f=I/(this.xmax-this.xmin),g=h/(p(this.options.ymax)?this.options.ymax:h),D=function(a){return ba.xvals.length===1?s+I/2:s+(a-ba.xmin)*f},E=function(a){return ba.options.marginTop+h-(p(a)?a*g:g)},t=h/(this.options.numLines===1?2:this.options.numLines-1);for(o=0,T=this.options.numLines-1;0<=T?o<=T:o>=T;0<=T?o++:o--)M=this.options.marginTop+o*t,H=Math.round((this.options.numLines-1-o)*this.options.ymax/(this.options.numLines===1?1:this.options.numLines-1)),isNaN(H)&&(H=""),this.r.text(s-this.options.marginLeft/2,M,H).attr("font-size",this.options.gridTextSize).attr("fill",this.options.gridTextColor).attr("text-anchor","end"),this.r.path("M"+s+","+M+"H"+(s+I)).attr("stroke",this.options.gridLineColor).attr("stroke-width",this.options.gridStrokeWidth);y=null,L=50;for(o=U=Math.ceil(this.xmin),V=Math.floor(this.xmax);U<=V?o<=V:o>=V;U<=V?o++:o--)q=this.r.text(D(o),this.options.marginTop+h+this.options.marginBottom/2,o).attr("font-size",this.options.gridTextSize).attr("fill",this.options.gridTextColor),r=q.getBBox(),y===null||y<=r.x?y=r.x+r.width+L:q.remove();d=function(){var a,b,c,d;c=this.xvals,d=[];for(a=0,b=c.length;a=0;X<=0?o++:o--)e=A[o],e.length>1&&(u=this.createPath(e,this.options.marginTop,s,this.options.marginTop+h,s+I),this.r.path(u).attr("stroke",this.options.lineColors[o]).attr("stroke-width",this.options.lineWidth));B=function(){var a,b;b=[];for(o=0,a=A.length-1;0<=a?o<=a:o>=a;0<=a?o++:o--)b.push([]);return b}();for(o=Y=A.length-1;Y<=0?o<=0:o>=0;Y<=0?o++:o--){Z=A[o];for(Q=0,S=Z.length;Q=_;0<=_?o++:o--)N=this.r.text(0,this.options.hoverFontSize*1.5*(o+1.5)-l/2,"").attr("fill",this.options.lineColors[o]).attr("font-size",this.options.hoverFontSize),O.push(N),n.push(N);return G=function(b){var c,e,f,g,i;n.show(),K.attr("text",ba.columnLabels[b]);for(c=0,i=ba.series.length-1;0<=i?c<=i:c>=i;0<=i?c++:c--)O[c].attr("text",""+ba.seriesLabels[c]+": "+(p(ba.series[c][b])?ba.commas(ba.series[c][b]):ba.series[c][b]));return e=Math.max.apply(null,a.map(O,function(a){return a.getBBox().width})),e=Math.max(e,K.getBBox().width),k.attr("width",e+ba.options.hoverPaddingX*2),k.attr("x",-ba.options.hoverPaddingX-e/2),g=Math.min.apply(null,a.map(ba.series,function(a){return E(a[b])})),g>l+ba.options.hoverPaddingY*2+ba.options.hoverMargin+ba.options.marginTop?g=g-l/2-ba.options.hoverPaddingY-ba.options.hoverMargin:g=g+l/2+ba.options.hoverPaddingY+ba.options.hoverMargin,g=Math.max(ba.options.marginTop+l/2+ba.options.hoverPaddingY,g),g=Math.min(ba.options.marginTop+h-l/2-ba.options.hoverPaddingY,g),f=Math.min(s+I-e/2-ba.options.hoverPaddingX,d[b]),f=Math.max(s+e/2+ba.options.hoverPaddingX,f),n.attr("transform","t"+f+","+g)},i=function(){return n.hide()},m=a.map(d.slice(1),function(a,b){return(a+d[b])/2}),x=null,v=Raphael.animation({r:this.options.pointSize+3},25,"linear"),w=Raphael.animation({r:this.options.pointSize},25,"linear"),j=function(a){var b,c,d;if(x!==null&&x!==a)for(b=0,d=B.length-1;0<=d?b<=d:b>=d;0<=d?b++:b--)B[b][x].animate(w);if(a!==null&&x!==a){for(b=0,c=B.length-1;0<=c?b<=c:b>=c;0<=c?b++:b--)B[b][a].animate(v);G(a)}x=a;if(a===null)return i()},F=function(a){var b,c,d;a-=ba.el.offset().left,d=[];for(b=c=m.length;c<=0?b<=0:b>=0;c<=0?b++:b--){if(b===0||m[b-1]>a){j(b);break}d.push(void 0)}return d},this.el.mousemove(function(a){return F(a.pageX)}),C=function(a){var b;return b=a.originalEvent.touches[0]||a.originalEvent.changedTouches[0],F(b.pageX),b},this.el.bind("touchstart",C),this.el.bind("touchmove",C),this.el.bind("touchend",C),j(0)},c.prototype.createPath=function(b,c,d,e,f){var g,h,i,j,k,l,m,n,o,p,q,r,s;n="";if(this.options.smooth){i=this.gradients(b);for(j=0,s=b.length-1;0<=s?j<=s:j>=s;0<=s?j++:j--)g=b[j],j===0?n+="M"+g.x+","+g.y:(h=i[j],l=b[j-1],m=i[j-1],k=(g.x-l.x)/4,o=l.x+k,q=Math.min(e,l.y+k*m),p=g.x-k,r=Math.min(e,g.y-k*h),n+="C"+o+","+q+","+p+","+r+","+g.x+","+g.y)}else n="M"+a.map(b,function(a){return""+a.x+","+a.y}).join("L");return n},c.prototype.gradients=function(b){return a.map(b,function(a,c){return c===0?(b[1].y-a.y)/(b[1].x-a.x):c===b.length-1?(a.y-b[c-1].y)/(a.x-b[c-1].x):(b[c+1].y-b[c-1].y)/(b[c+1].x-b[c-1].x)})},c.prototype.measureText=function(a,b){var c,d;return b==null&&(b=12),d=this.r.text(100,100,a).attr("font-size",b),c=d.getBBox(),d.remove(),c},c.prototype.parseYear=function(a){var b,c,d,e,f,g,h,i,j,k;return g=a.toString(),c=g.match(/^(\d+) Q(\d)$/),e=g.match(/^(\d+)-(\d+)$/),f=g.match(/^(\d+)-(\d+)-(\d+)$/),c?parseInt(c[1],10)+(parseInt(c[2],10)*3-1)/12:e?parseInt(e[1],10)+(parseInt(e[2],10)-1)/12:f?(k=parseInt(f[1],10),d=parseInt(f[2],10),b=parseInt(f[3],10),h=(new Date(k,d-1,b)).getTime(),i=(new Date(k,0,1)).getTime(),j=(new Date(k+1,0,1)).getTime(),k+(h-i)/(j-i)):parseInt(a,10)},c.prototype.commas=function(a){return Math.max(0,a).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g,",")},c}(),window.Morris=b})).call(this); \ No newline at end of file