jquery-toastchart.js

/**
 * @author Tyson Cadenhead | tysoncadenheadAtGmailDotCom | tysonlloydcadenhead.com
 * @description This is a charting library using the HTML5 canvas
 * @copyright Copyright (c) 2012 Moontoast, Inc.
 * @license http://alphabase.moontoast.com/licenses/bsd-3-clause.txt BSD 3-Clause License
 *
 * BUILDING THIS PROJECT:
 * This requires node and r.js to build. From the src/ directory, run:
 *
 *   node /path/to/r.js -o name=application out=../jquery-toastchart.js
 *
 */

if(typeof $!="function")throw"You need to include jquery!";$.toastchart={helper:{},model:{},view:{},controller:{}},define("config/main",function(){}),CanvasRenderingContext2D.prototype.dashedLine=function(e,t,n,r,i){i==undefined&&(i=2),this.beginPath(),this.moveTo(e,t);var s=n-e,o=r-t,u=Math.floor(Math.sqrt(s*s+o*o)/i),a=s/u,f=o/u,l=0;while(l++<u)e+=a,t+=f,this[l%2==0?"moveTo":"lineTo"](e,t);this[l%2==0?"moveTo":"lineTo"](n,r),this.stroke(),this.closePath()},CanvasRenderingContext2D.prototype.solidLine=function(e,t,n,r){this.beginPath(),this.lineTo(e,t),this.lineTo(n,r),this.stroke(),this.closePath()},define("helpers/canvas",function(){}),$.toastchart=$.toastchart||{},$.toastchart.helper=$.extend($.toastchart.helper,{getMonth:function(e){var t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];return t[e]},getHighestNumber:function(e){var t=0;for(var n=0;n<e.length;n++)e[n]>t&&(t=e[n]);return t},max:function(e){var t=0,n="number",r;for(i=0;i<e.length;i++)e[i]&&e[i].getTime?(n="date",r=e[i].getTime()):r=e[i],t<r&&(t=r);return n==="date"&&(t=new Date(t)),t},min:function(e){var t=null,n="number",r;for(i=0;i<e.length;i++){e[i]&&e[i].getTime?(n="date",r=e[i].getTime()):r=e[i];if(t>r||t===null||t===undefined)t=r}return n==="date"&&(t=new Date(t)),t},mergeArrays:function(e){var t=e[0];for(i=1;i<e.length;i++)t=t.concat(e[i]);return t},compareDates:function(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()==t.getDate()?!0:!1},getDifference:function(e,t){return e&&typeof e=="object"?Math.round(Math.abs(t.getTime()-e.getTime())/864e5):t-e},getYAxis:function(e){var t={min:$.toastchart.helper.min($.toastchart.helper.mergeArrays(e.data.y)),max:$.toastchart.helper.max($.toastchart.helper.mergeArrays(e.data.y))};return t.min===t.max&&(t.max=2e3),t.difference=$.toastchart.helper.getDifference(t.min,t.max),t.distance=(e.style.height-e.style.padding.top-e.style.padding.bottom)/t.difference,t},getXAxis:function(e){var t={min:$.toastchart.helper.min($.toastchart.helper.mergeArrays(e.data.x)),max:$.toastchart.helper.max($.toastchart.helper.mergeArrays(e.data.x))};return t.difference=$.toastchart.helper.getDifference(t.min,t.max),t.distance=(e.style.width-e.style.padding.left-e.style.padding.right)/t.difference,t},getPointY:function(e,t){var n={verticalSpace:t.ignoreAxisSpacing||0,y:e.y};t.ignoreAxis?n.max=$.toastchart.helper.getHighestNumber(e.series):n.max=t.axis.y.max,n.min=t.min||0;if(n.y===null){n.pointStart=null,n.pointEnd=null;for(var r=e.lineIndex;r<t.data.y[e.seriesIndex].length;r++)n.pointEnd===null&&t.data.y[e.seriesIndex][r]!==null&&t.data.y[e.seriesIndex][r]!==undefined&&(n.pointEnd=t.data.y[e.seriesIndex][r],n.pointEndIndex=r);for(var r=e.lineIndex;r>0;r--)n.pointStart===null&&t.data.y[e.seriesIndex][r]!==null&&t.data.y[e.seriesIndex][r]!==undefined&&(n.pointStart=t.data.y[e.seriesIndex][r],n.pointStartIndex=r);n.nullPointDifference=(n.pointEnd-n.pointStart)/parseInt(n.pointEndIndex-n.pointStartIndex),n.nullPointY=n.pointStart-n.nullPointDifference*(n.pointStartIndex-e.lineIndex),n.point=$.toastchart.helper.getDifference(n.nullPointY,n.max)}else{if(t.ignoreAxis){var i=.6+.1*e.seriesIndex;n.y=n.y*i}n.point=$.toastchart.helper.getDifference(n.y,n.max)}return n.difference=$.toastchart.helper.getDifference(n.min,n.max),n.distance=(t.style.height-t.style.padding.top-t.style.padding.bottom)/n.difference,n.point*n.distance},getPointX:function(e,t){var n={point:$.toastchart.helper.getDifference(t.axis.x.min,e.x)};return n.point*t.axis.x.distance},getYPixlePoint:function(e,t){return parseInt((t.style.height-t.style.padding.bottom-e)/t.axis.y.distance)},getYTickPoints:function(e){var t=[],n=null,r;if(e.axis.y.tickInterval){if(e.axis.y.tickInterval==="month")for(var i=0;i<e.data.y[0].length;i++)n!==e.data.y[0][i].getMonth()&&(t.push({y:$.toastchart.helper.getPointY({y:e.data.x[0][i],seriesIndex:i,lineIndex:0},e),number:e.data.y[0][i].getMonth()}),n=e.data.y[0][i].getMonth())}else for(var i=0;i<e.axis.y.ticks;i++)t.push({y:e.style.height/e.axis.y.ticks*i,number:$.toastchart.helper.getYPixlePoint(e.style.height/e.axis.y.ticks*i,e)});return t},calculateStartAndEnd:function(e){var t,n;if(e.axis.x.type&&e.axis.x.type==="date")for(var r=0;r<e.data.x.length;r++){t=e.data.x[r].length-1;if(e.axis.x.end&&e.axis.x.end>e.data.x[r][t]){n=$.toastchart.helper.getDifference(e.axis.x.end,e.data.x[r][t]);for(var i=0;i<=n;i++){var s=new Date;s.setFullYear(e.data.x[r][t].getFullYear()),s.setMonth(e.data.x[r][t].getMonth()),s.setDate(e.data.x[r][t].getDate()+i),e.data.x[r][t+i]=s}}}return e},getXTickPoints:function(e){var t=[],n=null;if(e.axis.x.tickInterval&&e.axis.x.tickInterval==="month")for(var r=0;r<e.data.x[0].length;r++)n!==e.data.x[0][r].getMonth()&&(t.push({x:$.toastchart.helper.getPointX({x:e.data.x[0][r]},e),number:e.data.x[0][r].getMonth()}),n=e.data.x[0][r].getMonth());return t},getFirstValue:function(e,t){var n;if(e.data[t][0][0])n=e.data[t][0][0];else for(var r=0;r<e.data[t].length&&!n;r++)for(var i=0;i<e.data[t][r].length&&!n;i++)!n&&(e.data[t][r][i]||e.data[t][r][i]===0)&&(n=e.data[t][r][i]);return n},getShadedColor:function(e,t){return e=e.split(","),e[3]=t+" )",String(e)},getGraphPoints:function(e){var t=[];for(var n=0;n<e.data.x.length;n++){t.push([]);for(var r=0;r<e.data.x[n].length;r++)t[n].push({value:e.data.y[n][r],series:n,index:r,x:e.data.x[n][r],y:e.data.y[n][r],top:parseInt($.toastchart.helper.getPointY({y:e.data.y[n][r],series:e.data.y[n],lineIndex:r,seriesIndex:n},e)+e.style.padding.top),left:parseInt($.toastchart.helper.getPointX({x:e.data.x[n][r]},e)+e.style.padding.left)})}return t}}),define("helpers/math",function(){}),$.toastchart=$.toastchart||{},$.toastchart.controller=$.toastchart.controller||{},$.toastchart.controller.xaxis=function(){var e={draw:function(e){var t={tickPoints:$.toastchart.helper.getXTickPoints(e)};for(var n=0;n<e.data.x[0].length;n++)t.tick="",typeof e.axis.x.tickRenderer=="function"&&(t.tick=e.axis.x.tickRenderer(n,e)),t.$div=$('<div class="toastchart-xlegend-day" />'),t.$div.css({left:n*e.axis.x.distance}),t.$div.html(t.tick),e.$xaxis.append(t.$div);for(var n=0;n<t.tickPoints.length;n++)typeof e.axis.x.renderer=="function"?t.tickPoints[n].number=e.axis.x.renderer(t.tickPoints[n],e):e.axis.x.tickInterval&&e.axis.x.tickInterval==="month"&&(t.tickPoints[n].number=$.toastchart.helper.getMonth(t.tickPoints[n].number)),t.$div=$('<div class="toastchart-xlegend">'),t.$div.css({left:t.tickPoints[n].x}),t.$div.html(t.tickPoints[n].number),e.$xaxis.append(t.$div)},render:function(t){var n={$xaxis:$('<div class="toastchart-xaxis" />')};t.$xaxis=$('<div class="toastchart-xaxis-inner" />'),n.$xaxis.css({left:t.style.margin.left}),n.$xaxis.append(t.$xaxis),t.$this.append(n.$xaxis),e.draw(t)},init:function(){$("body").bind("toastchart-init",function(t,n){e.render(n)})}()};return e}(),define("controllers/xaxis_controller",function(){}),$.toastchart=$.toastchart||{},$.toastchart.controller=$.toastchart.controller||{},$.toastchart.controller.yaxis=function(){var e={draw:function(e){var t={tickPoints:$.toastchart.helper.getYTickPoints(e)};for(var n=0;n<t.tickPoints.length;n++)typeof e.axis.y.renderer=="function"?t.tickPoints[n].number=e.axis.y.renderer(t.tickPoints[n],e):e.axis.y.tickInterval&&e.axis.y.tickInterval==="month"&&(t.tickPoints[n].number=$.toastchart.helper.getMonth(t.tickPoints[n].number)),t.$div=$('<div class="toastchart-ylegend">'),t.$div.css({top:t.tickPoints[n].y}),t.$div.html(t.tickPoints[n].number),e.$yaxis.append(t.$div)},render:function(t){var n={$yaxis:$('<div class="toastchart-yaxis" />')};n.$yaxis.css({top:t.style.margin.top}),t.$yaxis=$('<div class="toastchart-yaxis-inner" />'),n.$yaxis.append(t.$yaxis),t.$this.append(n.$yaxis),e.draw(t)},init:function(){$("body").bind("toastchart-init",function(t,n){e.render(n)})}()};return e}(),define("controllers/yaxis_controller",function(){}),$.toastchart=$.toastchart||{},$.toastchart.controller.grid=function(){var e={drawXAxis:function(e){var t={tickPoints:$.toastchart.helper.getXTickPoints(e),ctx:e.$grid[0].getContext("2d")};t.ctx.strokeStyle=e.axis.x.color,t.ctx.lineWidth=e.axis.x.lineWidth;for(var n=0;n<t.tickPoints.length;n++)e.axis.x.lineType==="dashed"?t.ctx.dashedLine(t.tickPoints[n].x,0,t.tickPoints[n].x,e.style.height,e.axis.x.lineSpacing):t.ctx.solidLine(t.tickPoints[n].x,0,t.tickPoints[n].x,e.style.height)},drawYAxis:function(e){var t={tickPoints:$.toastchart.helper.getYTickPoints(e),ctx:e.$grid[0].getContext("2d")};t.ctx.strokeStyle=e.axis.y.color,t.ctx.lineWidth=e.axis.y.lineWidth;for(var n=0;n<t.tickPoints.length;n++)e.axis.y.lineType==="dashed"?t.ctx.dashedLine(0,t.tickPoints[n].y,e.style.width,t.tickPoints[n].y,e.axis.y.lineSpacing):t.ctx.solidLine(0,t.tickPoints[n].y,e.style.width,t.tickPoints[n].y)},render:function(t){var n={height:t.style.height-2,width:t.style.width-2};t.$grid=$('<canvas class="toastchart-canvas toastchart-grid" height="'+n.height+'px" width="'+n.width+'px" />'),t.$canvas.append(t.$grid),e.drawXAxis(t),e.drawYAxis(t)},init:function(){$("body").bind("toastchart-init",function(t,n){e.render(n)})}()};return e}(),define("controllers/grid_controller",function(){}),$.toastchart=$.toastchart||{},$.toastchart.controller=$.toastchart.controller||{},$.toastchart.controller.linegraph=function(){var e=!1,t=!0,n={drawShadedNullArea:function(e,t,n){var r={ctx:n.$shadedCanvas[0].getContext("2d")};r.ctx.beginPath(),r.ctx.fillStyle=$.toastchart.helper.getShadedColor(n.series[t].color,.2),r.ctx.moveTo(e.start.left,n.style.height-n.style.padding.bottom),r.ctx.lineTo(e.start.left,e.start.top),r.ctx.lineTo(e.end.left,e.end.top),r.ctx.lineTo(e.end.left,n.style.height-n.style.padding.bottom),r.ctx.fill(),r.ctx.closePath(),r.ctx.fillStyle=n.series[t].color},drawLinedNullArea:function(e,t,n){var r={ctx:n.$shadedCanvas[0].getContext("2d")};r.ctx.beginPath(),r.ctx.strokeStyle=n.series[t].strokeStyle,r.ctx.lineWidth=n.series[t].lineWidth/2,r.ctx.dashedLine(e.start.left,e.start.top,e.end.left,e.end.top,10),r.ctx.stroke(),r.ctx.closePath()},drawShadedGraph:function(e){var t={ctx:e.$shadedCanvas[0].getContext("2d"),nullArea:{}};for(i=0;i<e.points.length;i++){if(!e.series[i].hidden){t.beginPath=!0,t.ctx.fillStyle=e.series[i].color;for(j=0;j<e.points[i].length;j++)e.points[i][j].y===null||e.points[i][j].y===undefined?(t.beginPath?j===0&&e.points[i][j].y===null&&(t.nullArea.start=e.points[i][j]):(e.points[i][j].y===null&&(t.nullArea.start=e.points[i][j-1]),t.ctx.lineTo(parseInt(e.points[i][j-1].left+e.style.padding.left),e.style.height-e.style.padding.bottom),t.ctx.moveTo(0+parseInt(e.points[i][j-1].left+e.style.padding.left),e.style.height-e.style.padding.bottom),t.ctx.fill(),t.ctx.closePath()),t.beginPath=!0):t.beginPath&&(t.nullArea.start&&(t.nullArea.end=e.points[i][j],t.nullArea.end.index&&n.drawShadedNullArea(t.nullArea,i,e),t.nullArea={}),t.ctx.beginPath(),t.ctx.moveTo(0+parseInt(e.points[i][j].left+e.style.padding.left),e.style.height-e.style.padding.bottom),t.beginPath=!1),t.ctx.lineTo(parseInt(e.points[i][j].left),parseInt(e.points[i][j].top));t.nullArea.start?(t.nullArea.end=e.points[i][e.points[i].length-1],n.drawShadedNullArea(t.nullArea,i,e)):t.beginPath||(t.ctx.lineTo(e.style.width-e.style.padding.right,e.style.height-e.style.padding.bottom),t.ctx.moveTo(0+e.style.padding.left,e.style.height-e.style.padding.bottom),t.ctx.fill()),t.ctx.closePath()}t.nullArea={}}},drawLineGraph:function(e){var t={ctx:e.$lineCanvas[0].getContext("2d"),nullArea:{}};for(i=0;i<e.points.length;i++){if(!e.series[i].hidden){t.ctx.strokeStyle=e.series[i].strokeStyle,t.ctx.lineWidth=e.series[i].lineWidth,t.beginPath=!0;for(j=0;j<e.points[i].length;j++)e.points[i][j].y===null||e.points[i][j].y===undefined?(t.beginPath?j===0&&e.points[i][j].y===null&&(t.nullArea.start=e.points[i][j]):(t.ctx.stroke(),e.points[i][j].y===null&&(t.nullArea.start=e.points[i][j-1],t.ctx.closePath())),t.beginPath=!0):t.beginPath&&(t.nullArea.start&&(t.nullArea.end=e.points[i][j],t.nullArea.end.index&&n.drawLinedNullArea(t.nullArea,i,e),t.nullArea={}),t.ctx.beginPath(),parseInt(e.points[i][j].left+e.style.padding.left)===0&&t.ctx.moveTo(parseInt(e.points[i][j].left+e.style.padding.left),parseInt(e.points[i][j].top+e.style.padding.top)),t.beginPath=!1),t.nullArea.start&&j===e.points[i].length-1?(t.nullArea.end=e.points[i][e.points[i].length-1],n.drawLinedNullArea(t.nullArea,i,e)):t.ctx.lineTo(parseInt(e.points[i][j].left),parseInt(e.points[i][j].top));t.nullArea.start||(t.ctx.stroke(),t.nullArea={}),t.ctx.closePath()}t.nullArea={}}},tap:function(r,i,s){var o=10,u=null,a=$(i).offset(),f,l;f=r.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-Math.floor(a.left),l=r.clientY+document.body.scrollTop+document.documentElement.scrollTop-Math.floor(a.top)+1;for(var c=0;c<s.points.length;c++)for(var h=0;h<s.points[c].length;h++)l>parseInt(s.points[c][h].top-o)&&l<=parseInt(s.points[c][h].top+o)&&f>=parseInt(s.points[c][h].left-o)&&f<=parseInt(s.points[c][h].left+o)&&!s.series[c].hidden&&t&&(u=s.points[c][h]);u&&!e?(n.highlightOn(u,s),e=!0,typeof s.series[u.series].hoverOn=="function"&&s.series[u.series].hoverOn(u,s)):u||(n.highlightOff(s),e=!1)},mouseMove:function(r,i,s){var o=10,u=null,a=$(i).offset(),f,l;f=r.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-Math.floor(a.left),l=r.clientY+document.body.scrollTop+document.documentElement.scrollTop-Math.floor(a.top)+1;for(var c=0;c<s.points.length;c++)for(var h=0;h<s.points[c].length;h++)l>parseInt(s.points[c][h].top-o)&&l<=parseInt(s.points[c][h].top+o)&&f>=parseInt(s.points[c][h].left-o)&&f<=parseInt(s.points[c][h].left+o)&&!s.series[c].hidden&&t&&(u=s.points[c][h]);u&&!e?(n.highlightOn(u,s),e=!0,typeof s.series[u.series].hoverOn=="function"&&s.series[u.series].hoverOn(u,s)):u||(n.highlightOff(s),e=!1,typeof s.hoverOff=="function"&&s.hoverOff(s))},highlightOn:function(e,t){var n={ctx:t.$pointCanvas[0].getContext("2d")};t.series[e.series].color&&(n.ctx.fillStyle=t.series[e.series].color,n.ctx.beginPath(),n.ctx.arc(e.left,e.top,7,0,Math.PI*2,!0),n.ctx.closePath(),n.ctx.fill()),t.$this.addClass("hover-on")},highlightOff:function(e){var t={ctx:e.$pointCanvas[0].getContext("2d")};t.ctx.clearRect(0,0,1e4,1e4),e.$this.removeClass("hover-on")},disableHighlight:function(e){t=!1},enableHighlight:function(e){t=!0},render:function(e){var t={height:e.style.height,width:e.style.width};e.$lineCanvas=$('<canvas class="toastchart-canvas" height="'+(t.height-e.style.padding.bottom)+'px" width="'+(t.width-e.style.padding.right)+'px" />'),e.$pointCanvas=$('<canvas class="toastchart-canvas" height="'+(t.height-e.style.padding.bottom)+'px" width="'+(t.width-e.style.padding.right)+'px" />'),e.$shadedCanvas=$('<canvas class="toastchart-canvas" height="'+(t.height-e.style.padding.bottom)+'px" width="'+(t.width-e.style.padding.right)+'px" />'),e.$canvasOverlay=$('<div class="toastchart-canvas toastchard-canvasoverlay" height="'+(t.height-e.style.padding.bottom)+'px" width="'+(t.width-e.style.padding.right)+'px" />'),e.$canvasOverlay.css({height:t.height-e.style.padding.bottom,width:t.width-e.style.padding.right}),e.$canvas.append(e.$canvasOverlay),e.$canvas.append(e.$lineCanvas),e.$canvas.append(e.$shadedCanvas),e.$canvas.append(e.$pointCanvas),n.drawLineGraph(e),n.drawShadedGraph(e),e.$canvasOverlay.unbind("mousemove").bind("mousemove",function(t){n.mouseMove(t,this,e)}),e.$canvasOverlay.unbind("click").bind("click",function(t){n.tap(t,this,e)})},init:function(){$("body").bind("toastchart-init",function(e,t){n.render(t)}),$("body").bind("toastchart-highlight-disable",function(e,t){n.disableHighlight()}),$("body").bind("toastchart-highlight-enable",function(e,t){n.enableHighlight()})}()};return n}(),define("controllers/linegraph_controller",function(){}),require(["config/main","helpers/canvas","helpers/math","controllers/xaxis_controller","controllers/yaxis_controller","controllers/grid_controller","controllers/linegraph_controller"],function(){$.fn.toastchart=function(e){var t=["51, 102, 255","102, 51, 255","204, 51, 255","255, 51, 204","255, 51, 102","255, 102, 51","255, 204, 51","204, 255, 51","102, 255, 51","51, 255, 102","51, 255, 204","51, 204, 255"];return e.$this=$(this).addClass("toastchart"),e.$chart=$(this).append('<div class="toastchart-graph" />').find(".toastchart-graph"),e.$canvas=$('<div class="toastchart-canvases" />'),e.$this.width()||e.$this.css({width:"100%"}),e.$this.height()<50&&e.$this.css({height:"100%"}),e.style=e.style||{},e.style.margin=e.style.margin||{},e.style.margin.top=e.style.margin.top||0,e.style.margin.bottom=e.style.margin.bottom||30,e.style.margin.left=e.style.margin.left||45,e.style.margin.right=e.style.margin.right||35,e.style.padding=e.style.padding||{},e.style.padding.top=e.style.padding.top||0,e.style.padding.bottom=e.style.padding.bottom||0,e.style.padding.left=e.style.padding.left||0,e.style.padding.right=e.style.padding.right||0,e.style.height=e.style.height||$(this).height()-e.style.margin.top-e.style.margin.bottom,e.style.width=e.style.width||$(this).width()-e.style.margin.left-e.style.margin.right,$(document).ready(function(){e.axis=e.axis||{},e.axis.x=$.extend({type:typeof $.toastchart.helper.getFirstValue(e,"x")=="object"?"date":"number",color:"#000",lineWidth:1,legendColor:"#333",font:"9pt Arial",space:35,tickInterval:typeof $.toastchart.helper.getFirstValue(e,"x")=="object"?"month":undefined},e.axis.x),e.axis.y=$.extend({type:typeof $.toastchart.helper.getFirstValue(e,"y")=="object"?"date":"number",ticks:25,color:"#000",lineWidth:1,lineSpacing:3,lineType:"dashed",legendColor:"#333",font:"9pt Arial",tickInterval:typeof $.toastchart.helper.getFirstValue(e,"y")=="object"?"month":null},e.axis.y),e=$.toastchart.helper.calculateStartAndEnd(e),e.axis.y=$.extend(e.axis.y,$.toastchart.helper.getYAxis(e)),e.axis.x=$.extend(e.axis.x,$.toastchart.helper.getXAxis(e)),e.series=e.series||[];for(var n=0;n<e.data.y.length;n++)e.series[n]=$.extend({color:"rgba("+t[n]+", 0.4)",name:"",strokeStyle:"rgba("+t[n]+", 0.9)",lineWidth:4,hidden:!1},e.series[n]);e.points=$.toastchart.helper.getGraphPoints(e),e.$chart.css({height:e.style.height-2,width:e.style.width-2,left:e.style.margin.left,top:e.style.margin.top}),e.$chart.append(e.$canvas),e.disableHighlight=function(){$("body").trigger("toastchart-highlight-disable")},e.enableHighlight=function(){$("body").trigger("toastchart-highlight-enable")},$("body").trigger("toastchart-init",e),e.updated&&typeof e.updated=="function"&&e.updated(e)}),e},$("body").trigger("toastchart-ready")}),define("application",function(){})