diff --git a/dist/origami.js b/dist/origami.js index a87c1c7..72cf68c 100644 --- a/dist/origami.js +++ b/dist/origami.js @@ -17,7 +17,7 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . * - * Date: 2016-10-29T20:51Z + * Date: 2017-10-30T17:49Z */ (function( window ) { @@ -904,6 +904,186 @@ Origami.text = function(text, x, y, style) { return this; }; +function ChartBar(config) { + var ctx = this.paper.ctx, + width = this.paper.width, + height = this.paper.height; + + if (config.frame) + ctx.clearRect(0, 0, this.paper.width, this.paper.height); + + var animation = config.animation; + + var xPadding = 40; + var yPadding = 40; + var sets = config.datasets; + + var gridLines = { + vertical: true, + horizontal: true + }; + + function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); + } + + function getMinOfArray(numArray) { + return Math.min.apply(null, numArray); + } + + function getMaxAndMin() { + var max = 0, + min = 0; + + for (var i = 0; i < config.datasets.length; i++) { + var biggest, lowest; + biggest = getMaxOfArray(config.datasets[i].data); + lowest = getMinOfArray(config.datasets[i].data); + + if (biggest > max) { + max = biggest; + } + if (lowest < min) { + min = lowest; + } + } + return { + max: max, + min: min + }; + } + + var maxAndMin = getMaxAndMin(); + var maxY = Math.round(maxAndMin.max); + var minY = Math.round(maxAndMin.min); + + var xScale = Math.floor((width - (xPadding*3)/2))/config.labels.length; + + function getXPixel(i) { + return xPadding + xScale * i; + } + + var yRange = maxY - minY; + var unRoundedTickGap = yRange / 10; + var magnitude = Math.ceil(Math.log10(unRoundedTickGap)); + var roundedTickGap = ( (Math.round(unRoundedTickGap / Math.pow(10,magnitude-1))/10) * Math.pow(10,magnitude)); + var lowerBound = roundedTickGap * Math.floor(minY/roundedTickGap); + var upperBound = roundedTickGap * Math.floor(1 + maxY/roundedTickGap); + var yScale = (height - ((3/2)*yPadding))/(upperBound - lowerBound); + + function getYPixel(val) { + return height - (yScale * (val - lowerBound) + yPadding); + } + + var gridLinesColor = '#e7e7e7'; + if (config.gridLinesColor) { + gridLinesColor = config.gridLinesColor; + } + + if (config.gridLines) { + if (config.gridLines.vertical === false) + gridLines.vertical = false; + + if (config.gridLines.horizontal === false) + gridLines.horizontal = false; + } + + ctx.fillStyle = '#5e5e5e'; + if (config.labelColor) { + ctx.fillStyle = config.labelColor; + } + + ctx.font = 'normal 11px Helvetica'; + ctx.globalAlpha = 1; + + // axes + ctx.beginPath(); + ctx.strokeStyle=gridLinesColor; + ctx.lineWidth = 1.6; + ctx.moveTo(xPadding,yPadding/2); + ctx.lineTo(xPadding,height - yPadding); + ctx.lineTo(width - xPadding/2, height - yPadding); + ctx.stroke(); + + // vertical gridlines and label + ctx.textAlign = "center"; + ctx.textBaseline = "alphabetic"; + for (var i=0;i 1) + var barSpacing = parseFloat((0.15 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length - 1)); + else + var barSpacing = 0; + + // drawing bars + for (var i=0;i max) { - max = m; + var biggest, lowerst; + if (typeof(sets[i].data[0]) === 'object') { + biggest = getMaxOfArray(sets[i].data.map(function(x){ + return x[1] + })); + lowerst = getMinOfArray(sets[i].data.map(function(x){ + return x[1] + })); + } else { + biggest = getMaxOfArray(sets[i].data); + lowerst = getMinOfArray(sets[i].data); + } + if (biggest > max) { + max = biggest; + } + if (lowerst < min) { + min = lowerst; } } + max += yPadding - max % 10; - return max; + min -= yPadding + min % 10; + return { + max: max, + min: min + }; } function getXPixel(val) { - return ((width - xPadding) / config.labels.length) * val + xPadding; + return parseFloat(((width - xPadding) / config.labels.length) * val + xPadding); } function getYPixel(val) { - return height - (((height - yPadding) / getMaxY()) * val) - yPadding; + var scale = maxY / (maxY - minY); + return parseFloat((height - (((height - yPadding) / maxY) * val)) * scale); } if (animation) { @@ -1048,8 +1257,11 @@ function ChartLine(config) { ctx.strokeStyle = line.borderColor; ctx.moveTo(getXPixel(0), getYPixel(set.data[0])); - for (var x = 1; x < set.data.length; x++) { - ctx.lineTo(getXPixel(x), getYPixel(set.data[x])); + for (var x = 0; x < set.data.length; x++) { + if (typeof(set.data[x]) === 'object') + ctx.lineTo(getXPixel(set.data[x][0]), getYPixel(set.data[x][1])); + else + ctx.lineTo(getXPixel(x), getYPixel(set.data[x])); } ctx.stroke(); @@ -1068,7 +1280,11 @@ function ChartLine(config) { for (var z = 0; z < set.data.length; z++) { ctx.beginPath(); ctx.fillStyle = (set.pointsColor) ? set.pointsColor : 'rgb(75,75,75)'; - ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true); + if (typeof(set.data[z]) === 'object') + ctx.arc(getXPixel(set.data[z][0]), getYPixel(set.data[z][1]), 4, 0, Math.PI * 2, true); + else + ctx.arc(getXPixel(z), getYPixel(set.data[z]), 4, 0, Math.PI * 2, true); + ctx.fill(); ctx.closePath(); ctx.beginPath(); diff --git a/dist/origami.min.js b/dist/origami.min.js index 9899409..b228f8f 100644 --- a/dist/origami.min.js +++ b/dist/origami.min.js @@ -1,2 +1,2 @@ -!function(a){function b(a,b,c){this.paper.queue.push({assign:a,params:b,loaded:c})}function c(a,b){for(var c=0;c
',e=a.URL||a.webkitURL||a,f=new Image,g=new Blob([d],{type:"image/svg+xml;charset=utf-8"}),h=e.createObjectURL(g);return f.src=h,f.addEventListener("load",function(){c.paper.ctx.beginPath(),c.paper.ctx.drawImage(f,0,0),e.revokeObjectURL(h),c.paper.ctx.closePath()}),c}function s(a){var b=a.properties,c=a.width/b.frames;t.call(this,{image:a.image,posX:b.currentFrame>0&&b.currentFrame<=b.frames?c*(b.currentFrame-1):0,posY:0,animation:b.animation,frame:b.frames,loop:b.loop,width:c,widthTotal:a.width,height:a.height,dx:a.x,dy:a.y,speed:b.speed,update:null})}function t(b){var c=this;if(b.posX===b.widthTotal){if(!b.loop)return void a.cancelAnimationFrame(b.update);b.posX=0}c.paper.ctx.clearRect(b.dx,b.dy,b.width,b.height),c.paper.ctx.beginPath(),c.paper.ctx.drawImage(b.image,b.posX,b.posY,b.width,b.height,b.dx,b.dy,b.width,b.height),c.paper.ctx.closePath(),b.animation&&(b.posX=b.posX+b.width),setTimeout(function(){b.update=a.requestAnimationFrame(t.bind(c,b))},b.speed)}function u(a){var b=x.defaults.text,c=a.text,d=a.x,e=a.y,f=a.style;this.paper.ctx.beginPath(),this.paper.ctx.setLineDash(f.borderStyle),this.paper.ctx.textBaseline="middle",this.paper.ctx.lineWidth=f.borderSize?f.borderSize:b.lineWidth,this.paper.ctx.strokeStyle=f.borderColor?f.borderColor:b.strokeStyle,this.paper.ctx.font=f.font||b.font,this.paper.ctx.fillStyle=f.color||b.color,this.paper.ctx.textAlign=f.align||b.align,this.paper.ctx.fillText(c,d,e),this.paper.ctx.strokeText(c,d,e),this.paper.ctx.fill(),this.paper.ctx.stroke(),this.paper.ctx.setLineDash([]),this.paper.ctx.closePath()}function v(a){function b(a){return Math.max.apply(null,a)}function c(){for(var a=0,c=0;ca&&(a=d)}return a+=n-a%10}function d(b){return(i-m)/a.labels.length*b+m}function f(a){return j-(j-n)/c()*a-n}function g(a,b){return Math.random()*(b-a)+a}var h=this.paper.ctx,i=this.paper.width,j=this.paper.height;a.frame&&h.clearRect(0,0,this.paper.width,this.paper.height);var k=2,l=a.animation;a.props||(a.props={alpha:1});var m=40,n=40,o=a.datasets,p={vertical:!0,horizontal:!0},q="#e7e7e7";a.gridLinesColor&&(q=a.gridLinesColor),a.gridLines&&(a.gridLines.vertical===!1&&(p.vertical=!1),a.gridLines.horizontal===!1&&(p.horizontal=!1)),h.fillStyle="#5e5e5e",a.labelColor&&(h.fillStyle=a.labelColor),h.font="normal 11px Helvetica",h.globalAlpha=1,h.textAlign="left",h.textBaseline="alphabetic";for(var r=0;r
',e=a.URL||a.webkitURL||a,f=new Image,g=new Blob([d],{type:"image/svg+xml;charset=utf-8"}),h=e.createObjectURL(g);return f.src=h,f.addEventListener("load",function(){c.paper.ctx.beginPath(),c.paper.ctx.drawImage(f,0,0),e.revokeObjectURL(h),c.paper.ctx.closePath()}),c}function s(a){var b=a.properties,c=a.width/b.frames.total,d=b.frames,e=0;d.current&&d.current<=d.total&&(e=c*(d.current-1)),t.call(this,{image:a.image,posX:e,posY:0,frames:b.frames,animation:b.animation,loop:b.loop,width:c,widthTotal:a.width,height:a.height,dx:a.x,dy:a.y,speed:b.speed,update:null})}function t(b){var c=this;if(b.posX===b.widthTotal){if(b.loop!==!0)return void a.cancelAnimationFrame(b.update);b.posX=0}c.paper.ctx.clearRect(b.dx,b.dy,b.width,b.height),c.paper.ctx.beginPath(),c.paper.ctx.drawImage(b.image,b.posX,b.posY,b.width,b.height,b.dx,b.dy,b.width,b.height),c.paper.ctx.closePath(),b.animation!==!1&&(b.posX=b.posX+b.width),setTimeout(function(){b.update=a.requestAnimationFrame(t.bind(c,b))},b.speed)}function u(a){var b=y.defaults.text,c=a.text,d=a.x,e=a.y,f=a.style;this.paper.ctx.beginPath(),this.paper.ctx.setLineDash(f.borderStyle),this.paper.ctx.textBaseline="middle",this.paper.ctx.lineWidth=f.borderSize?f.borderSize:b.lineWidth,this.paper.ctx.strokeStyle=f.borderColor?f.borderColor:b.strokeStyle,this.paper.ctx.font=f.font||b.font,this.paper.ctx.fillStyle=f.color||b.color,this.paper.ctx.textAlign=f.align||b.align,this.paper.ctx.fillText(c,d,e),this.paper.ctx.strokeText(c,d,e),this.paper.ctx.fill(),this.paper.ctx.stroke(),this.paper.ctx.setLineDash([]),this.paper.ctx.closePath()}function v(a){function b(a){return Math.max.apply(null,a)}function c(a){return Math.min.apply(null,a)}function d(){for(var d=0,e=0,f=0;fd&&(d=g),h1)var B=parseFloat(.15*(e(1)-e(0))/(a.datasets.length-1));else var B=0;for(var y=0;ya&&(a=f),g max) { + max = biggest; + } + if (lowest < min) { + min = lowest; + } + } + return { + max: max, + min: min + }; + } + + var maxAndMin = getMaxAndMin(); + var maxY = Math.round(maxAndMin.max); + var minY = Math.round(maxAndMin.min); + + var xScale = Math.floor((width - (xPadding*3)/2))/config.labels.length; + + function getXPixel(i) { + return xPadding + xScale * i; + } + + var yRange = maxY - minY; + var unRoundedTickGap = yRange / 10; + var magnitude = Math.ceil(Math.log10(unRoundedTickGap)); + var roundedTickGap = ( (Math.round(unRoundedTickGap / Math.pow(10,magnitude-1))/10) * Math.pow(10,magnitude)); + var lowerBound = roundedTickGap * Math.floor(minY/roundedTickGap); + var upperBound = roundedTickGap * Math.floor(1 + maxY/roundedTickGap); + var yScale = (height - ((3/2)*yPadding))/(upperBound - lowerBound); + + function getYPixel(val) { + return height - (yScale * (val - lowerBound) + yPadding); + } + + var gridLinesColor = '#e7e7e7'; + if (config.gridLinesColor) { + gridLinesColor = config.gridLinesColor; + } + + if (config.gridLines) { + if (config.gridLines.vertical === false) + gridLines.vertical = false; + + if (config.gridLines.horizontal === false) + gridLines.horizontal = false; + } + + ctx.fillStyle = '#5e5e5e'; + if (config.labelColor) { + ctx.fillStyle = config.labelColor; + } + + ctx.font = 'normal 11px Helvetica'; + ctx.globalAlpha = 1; + + // axes + ctx.beginPath(); + ctx.strokeStyle=gridLinesColor; + ctx.lineWidth = 1.6; + ctx.moveTo(xPadding,yPadding/2); + ctx.lineTo(xPadding,height - yPadding); + ctx.lineTo(width - xPadding/2, height - yPadding); + ctx.stroke(); + + // vertical gridlines and label + ctx.textAlign = "center"; + ctx.textBaseline = "alphabetic"; + for (var i=0;i 1) + var barSpacing = parseFloat((0.15 * (getXPixel(1) - getXPixel(0)))/(config.datasets.length - 1)); + else + var barSpacing = 0; + + // drawing bars + for (var i=0;i