diff --git a/README b/README index 63018b2..44d5d86 100644 --- a/README +++ b/README @@ -2,7 +2,8 @@ // Charting class for Mootools using Canvas // // MIT-style license. Copyright 2010 Matt V. Murphy | bW11cnBoMjExQGdtYWlsLmNvbQ== -// Requires Mootools 1.3 and Mootools 1.3 More (Class.Binds, Color) and ExCanvas for Internet Explorer support +// Requires Mootools 1.3 and Mootools 1.3 More (Class.Binds, Color) +// Requires ExCanvas for Internet Explorer 6-8 support // Credits to Greg Houston (http://demos.greghoustondesign.com/piechart/) // ////////////////////////////////////////////////////////////////////////// @@ -14,7 +15,7 @@ ////////////////////////////////////////////////////////////////////////// // Features: // -// - Cross browser compatible (Internet Explorer, FireFox, Chrome, Safari) +// - Cross browser compatible (Internet Explorer, FireFox, Chrome, Safari, Opera) // - Pie charts with tooltips // ////////////////////////////////////////////////////////////////////////// diff --git a/index.html b/index.html index 73bc834..693c3c2 100644 --- a/index.html +++ b/index.html @@ -90,11 +90,11 @@

Matts411.com Visitors:

- + diff --git a/javascripts/Chart.js b/javascripts/Chart.js index c48303d..d5217b6 100644 --- a/javascripts/Chart.js +++ b/javascripts/Chart.js @@ -6,7 +6,7 @@ // Credits to Greg Houston (http://demos.greghoustondesign.com/piechart/) // //////////////////////////////////// -Chart = new Class({ +var Chart = new Class({ Implements : [Options], Binds : ["showToolTip", "hideToolTip"], diff --git a/javascripts/demo_compressed.js b/javascripts/demo_compressed.js index aa790aa..f9f71c2 100644 --- a/javascripts/demo_compressed.js +++ b/javascripts/demo_compressed.js @@ -433,4 +433,4 @@ var g=Math.round((this[2]*(6000-this[1]*(60-j)))/600000*255);switch(Math.floor(e case 4:return[g,k,h];case 5:return[h,k,i];}}return false;}});String.implement({rgbToHsb:function(){var e=this.match(/\d{1,3}/g);return(e)?e.rgbToHsb():null; },hsbToRgb:function(){var e=this.match(/\d{1,3}/g);return(e)?e.hsbToRgb():null;}});})(); -Chart=new Class({Implements:[Options],Binds:["showToolTip","hideToolTip"],options:{showTooltips:true,selectorPrefix:"chart",selectorSuffix:"",chartType:"",chartData:[],chartMinSize:[-Infinity,-Infinity],chartMaxSize:[Infinity,Infinity]},clearPng:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=",initialize:function(b,a){this.element=document.id(b);this.setOptions(a);this.options.selectorSuffix=(this.options.selectorSuffix!=="")?this.options.selectorSuffix:new Date().getTime();if(this.options.chartType==="pieChart"){this.renderPieChart()}},renderPieChart:function(){var h=(Browser.ie6||Browser.ie7||Browser.ie8),n=this.options.showTooltips,u=this.options.selectorPrefix,c=this.options.selectorSuffix,m=this.element.set("html",""),k,p=document.createElement("canvas"),e=this.options.chartData,w,y=this.options.chartMinSize,z=this.options.chartMaxSize,d,o,r,f,l,g=0,t=-1*(Math.PI/2),x=36,b=[],a=0;k=m.getSize();w=Math.max(Math.min(k.x,k.y,z[0],z[1]),y[0],y[1]);d=Math.floor(w/2);o=Math.floor((w-20)/2);for(var v=e.length-1,q;q=e[v];v--){g+=Math.abs(q[1])}p.id=u+"Chart"+c;if(h){p.style.width=w+"px";p.style.height=w+"px"}else{p.setAttribute("width",w);p.setAttribute("height",w)}m.appendChild(p);if(h){G_vmlCanvasManager.initElement(p)}r=p.getContext("2d");r.globalCompositeOperation="source-over";r.beginPath();r.moveTo(d+2,d+2);r.arc(d+2,d+2,o+1,0,2*Math.PI,false);r.closePath();r.fillStyle="#cccccc";r.fill();r.beginPath();r.moveTo(d,d);r.arc(d,d,o,0,2*Math.PI,false);r.closePath();r.fillStyle="#ffffff";r.fill();for(var v=e.length-1,q;q=e[v];v--){q[4]=((Math.abs(q[1])/g)*2*Math.PI);q[4]=(h&&q[4]===(2*Math.PI))?0.99999*q[4]:q[4];q[5]=[];q[6]=0;q[7]=(t+q[4])-t;q[8]=Math.max(Math.round((q[7]/(2*Math.PI))*x)-2,0);q[9]=q[7]/Math.max(q[8],1);q[10]=0;l=r.createRadialGradient(d,d,0,d,d,o);if(h){l.addColorStop(0,"#ffffff");l.addColorStop(0.1,(q[1]<0)?"#eeeeee":q[3])}else{if(q[1]<0){l.addColorStop(0,"#fafafa");l.addColorStop(1,"#eeeeee")}else{f=q[3].hexToRgb(true).rgbToHsb();f=[f[0]-15,f[1]-15,f[2]+20];f[0]=(f[0]>=0)?f[0]:360+f[0];l.addColorStop(0,"rgb("+f.hsbToRgb(true).join(", ")+")");l.addColorStop(1,q[3])}}r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.fillStyle=l;r.fill();if(!h&&q[1]>=0){f=q[3].hexToRgb(true);l=r.createRadialGradient(d,d,0,d,d,o);l.addColorStop(0,"rgba("+f.join(", ")+", 0.0)");l.addColorStop(1,"rgba(255, 255, 255, 0.05)");r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.fillStyle=l;r.fill()}r.lineWidth=1;r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.strokeStyle="rgba(255, 255, 255, 0.5)";r.stroke();if(n){q[5][q[6]++]=d;q[5][q[6]++]=d;q[5][q[6]++]=d+Math.round(Math.cos(t)*o);q[5][q[6]++]=d+Math.round(Math.sin(t)*o);for(var s=0;s"}t+=q[4]}if(n){new Element("MAP",{id:u+"Map"+c,name:u+"Map"+c,"class":u+"Map",html:b.join(""),events:{mouseleave:this.hideToolTip}}).inject(m);new Element("IMG",{id:u+"Image"+c,usemap:"#"+u+"Map"+c,"class":u+"Image",src:(!Browser.ie6&&!Browser.ie7)?this.clearPng:"stylesheets/clear.gif",styles:{width:k.x,height:k.y}}).inject(m);this.toolTipThrottle=-1;this.toolTip=(!!this.toolTip)?this.toolTip:new Element("DIV",{id:u+"Tooltip"+c,"class":u+"Tooltip"}).inject(document.body);m.getElements("AREA").addEvent("mousemove",this.showToolTip)}},showToolTip:function(c){this.toolTipThrottle++;if(this.toolTipThrottle&1){return}var a=c.target.getAttribute("index"),e=c.page.y+15,d=c.page.x+15,b;if(this.lastIndex!==a){this.lastIndex=a;b=this.options.chartData[a.toInt()];this.toolTip.set("html",""+b[0]+"
"+b[1].toFixed(2)+"%
"+b[2])}if(this.lastTop!==e||this.lastLeft!==d){this.lastTop=e;this.lastLeft=d;this.toolTip.setStyle("cssText","top:"+e+"px;left:"+d+"px;")}},hideToolTip:function(a){this.toolTipThrottle=-1;this.lastIndex=undefined;if(!!this.toolTip){this.toolTip.set({html:"",styles:{cssText:""}})}},cleanUp:function(){if(!!this.toolTip){this.toolTip.dispose();this.toolTip=null}return null}}); +var Chart=new Class({Implements:[Options],Binds:["showToolTip","hideToolTip"],options:{showTooltips:true,selectorPrefix:"chart",selectorSuffix:"",chartType:"",chartData:[],chartMinSize:[-Infinity,-Infinity],chartMaxSize:[Infinity,Infinity]},clearPng:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=",initialize:function(b,a){this.element=document.id(b);this.setOptions(a);this.options.selectorSuffix=(this.options.selectorSuffix!=="")?this.options.selectorSuffix:new Date().getTime();if(this.options.chartType==="pieChart"){this.renderPieChart()}},renderPieChart:function(){var h=(Browser.ie6||Browser.ie7||Browser.ie8),n=this.options.showTooltips,u=this.options.selectorPrefix,c=this.options.selectorSuffix,m=this.element.set("html",""),k,p=document.createElement("canvas"),e=this.options.chartData,w,y=this.options.chartMinSize,z=this.options.chartMaxSize,d,o,r,f,l,g=0,t=-1*(Math.PI/2),x=36,b=[],a=0;k=m.getSize();w=Math.max(Math.min(k.x,k.y,z[0],z[1]),y[0],y[1]);d=Math.floor(w/2);o=Math.floor((w-20)/2);for(var v=e.length-1,q;q=e[v];v--){g+=Math.abs(q[1])}p.id=u+"Chart"+c;if(h){p.style.width=w+"px";p.style.height=w+"px"}else{p.setAttribute("width",w);p.setAttribute("height",w)}m.appendChild(p);if(h){G_vmlCanvasManager.initElement(p)}r=p.getContext("2d");r.globalCompositeOperation="source-over";r.beginPath();r.moveTo(d+2,d+2);r.arc(d+2,d+2,o+1,0,2*Math.PI,false);r.closePath();r.fillStyle="#cccccc";r.fill();r.beginPath();r.moveTo(d,d);r.arc(d,d,o,0,2*Math.PI,false);r.closePath();r.fillStyle="#ffffff";r.fill();for(var v=e.length-1,q;q=e[v];v--){q[4]=((Math.abs(q[1])/g)*2*Math.PI);q[4]=(h&&q[4]===(2*Math.PI))?0.99999*q[4]:q[4];q[5]=[];q[6]=0;q[7]=(t+q[4])-t;q[8]=Math.max(Math.round((q[7]/(2*Math.PI))*x)-2,0);q[9]=q[7]/Math.max(q[8],1);q[10]=0;l=r.createRadialGradient(d,d,0,d,d,o);if(h){l.addColorStop(0,"#ffffff");l.addColorStop(0.1,(q[1]<0)?"#eeeeee":q[3])}else{if(q[1]<0){l.addColorStop(0,"#fafafa");l.addColorStop(1,"#eeeeee")}else{f=q[3].hexToRgb(true).rgbToHsb();f=[f[0]-15,f[1]-15,f[2]+20];f[0]=(f[0]>=0)?f[0]:360+f[0];l.addColorStop(0,"rgb("+f.hsbToRgb(true).join(", ")+")");l.addColorStop(1,q[3])}}r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.fillStyle=l;r.fill();if(!h&&q[1]>=0){f=q[3].hexToRgb(true);l=r.createRadialGradient(d,d,0,d,d,o);l.addColorStop(0,"rgba("+f.join(", ")+", 0.0)");l.addColorStop(1,"rgba(255, 255, 255, 0.05)");r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.fillStyle=l;r.fill()}r.lineWidth=1;r.beginPath();r.moveTo(d,d);r.arc(d,d,o,t,t+q[4],false);r.lineTo(d,d);r.closePath();r.strokeStyle="rgba(255, 255, 255, 0.5)";r.stroke();if(n){q[5][q[6]++]=d;q[5][q[6]++]=d;q[5][q[6]++]=d+Math.round(Math.cos(t)*o);q[5][q[6]++]=d+Math.round(Math.sin(t)*o);for(var s=0;s"}t+=q[4]}if(n){new Element("MAP",{id:u+"Map"+c,name:u+"Map"+c,"class":u+"Map",html:b.join(""),events:{mouseleave:this.hideToolTip}}).inject(m);new Element("IMG",{id:u+"Image"+c,usemap:"#"+u+"Map"+c,"class":u+"Image",src:(!Browser.ie6&&!Browser.ie7)?this.clearPng:"stylesheets/clear.gif",styles:{width:k.x,height:k.y}}).inject(m);this.toolTipThrottle=-1;this.toolTip=(!!this.toolTip)?this.toolTip:new Element("DIV",{id:u+"Tooltip"+c,"class":u+"Tooltip"}).inject(document.body);m.getElements("AREA").addEvent("mousemove",this.showToolTip)}},showToolTip:function(c){this.toolTipThrottle++;if(this.toolTipThrottle&1){return}var a=c.target.getAttribute("index"),e=c.page.y+15,d=c.page.x+15,b;if(this.lastIndex!==a){this.lastIndex=a;b=this.options.chartData[a.toInt()];this.toolTip.set("html",""+b[0]+"
"+b[1].toFixed(2)+"%
"+b[2])}if(this.lastTop!==e||this.lastLeft!==d){this.lastTop=e;this.lastLeft=d;this.toolTip.setStyle("cssText","top:"+e+"px;left:"+d+"px;")}},hideToolTip:function(a){this.toolTipThrottle=-1;this.lastIndex=undefined;if(!!this.toolTip){this.toolTip.set({html:"",styles:{cssText:""}})}},cleanUp:function(){if(!!this.toolTip){this.toolTip.dispose();this.toolTip=null}return null}});