pie-chart canvas | pie-chart javascript | pie-chart html5 | pie-chart css | pie-chart css3 | pie-chart php | pie-chart php met get | pie-chart svg
Het belangrijkste aan deze procedure is dat hij werkt in alle browsers. En daarmee wordt bedoeld dat ook in de oudere IE browsers de pie-charts "op het scherm gezet" worden. Dat houdt wel in dat er een "vette" javascript-library in de head van de pagina staat, maar als je de oude en gebrekkige browsers "links wilt laten liggen", mag je voor mij de library "er uit slopen". In het begin van het javascript staan een paar arrays. Of je ze nu met javascript, of php, van waarden voorziet maakt mij niets uit. De pie chart zal automatisch de juiste verdeling krijgen. Plaats de library in de head-sectie, de html-code in de body, en plaats het script met de array-toewijzingen zo laag als mogelijk in de body-sectie van de pagina.
<canvas id="piechart" width="150" height="150"></canvas>
<canvas id="canvas_piechart_2" width="150" height="150"></canvas>
<canvas id="canvas_piechart_3" width="150" height="150"></canvas>
<script type="text/javascript">
/*global window: false */
/*global document: false */
var piechart = [];
piechart[0] = 128;
piechart[1] = 103;
piechart[2] = 87;
piechart[3] = 33;
var canvas_piechart_2 = [];
canvas_piechart_2[0] = 228;
canvas_piechart_2[1] = 103;
canvas_piechart_2[2] = 87;
canvas_piechart_2[3] = 33;
canvas_piechart_2[4] = 103;
canvas_piechart_2[5] = 87;
canvas_piechart_2[6] = 33;
var canvas_piechart_3 = [];
canvas_piechart_3[0] = 128;
canvas_piechart_3[1] = 103;
canvas_piechart_3[2] = 109;
canvas_piechart_3[3] = 63;
canvas_piechart_3[4] = 42;
var kleur = [];
kleur[0] = "#1E90FF";
kleur[1] = "#DAA520";
kleur[2] = "#BA55D3";
kleur[3] = "#3CB371";
kleur[4] = "#4169E1";
kleur[5] = "#2E8B57";
kleur[6] = "#FF4500";
kleur[7] = "#6B8E23";
kleur[8] = "#ff11ee";
kleur[9] = "#0000ff";
window.onload = function() { (function() {
var x, i,
check_canvas_pie,
canvas_pie_kleur,
hoeveel_canvas_tag=document.getElementsByTagName("canvas"),
lengte_canvas=(hoeveel_canvas_tag.length)+1;
for(x=1;x!==lengte_canvas;x++) {
check_canvas_pie=hoeveel_canvas_tag[x-1].id;
var canvas=document.getElementById(check_canvas_pie);
if(!canvas){return;}
var pie_data=[],
de_pie_kleuren=[],
value=0,
bbk=0.1,
totaal=0;
for (i=0;i<window[check_canvas_pie].length;i++){
if (window[check_canvas_pie].length===0){
continue;}
value=window[check_canvas_pie][i];
pie_data[pie_data.length]=value;
totaal+=value;
canvas_pie_kleur=kleur[i];
de_pie_kleuren[de_pie_kleuren.length]=canvas_pie_kleur;}
if (typeof canvas.getContext==='undefined'){
return;}
var ctx=canvas.getContext('2d');
var canvas_size=[canvas.width,canvas.height];
var radius=Math.min(canvas_size[0],(canvas_size[1])/2)-10;
var centreren=[canvas_size[0]/2,canvas_size[1]/2];
var tot_nu_toe=0;
for (var punt in pie_data){
if (tot_nu_toe!==bbk){
var deze_waarde=pie_data[punt]/totaal;
ctx.beginPath();
ctx.moveTo(centreren[0],centreren[1]);
ctx.arc(centreren[0],centreren[1],radius,Math.PI*(-0.53+2*tot_nu_toe),Math.PI*(-0.53+2*(tot_nu_toe+deze_waarde)),false);
ctx.lineWidth=2.3;
ctx.strokeStyle=de_pie_kleuren[punt];
ctx.stroke();
ctx.fillStyle=de_pie_kleuren[punt];
ctx.fill();
ctx.closePath();
tot_nu_toe+=deze_waarde;
}
}
}
})();
};
</script>
<!--[if lt IE 9]>
<script type="text/javascript">
if(!document.createElement("canvas").getContext){(function(){var h=Math,t,m=10,k=m/2;function g(){return[[1,0,0],[0,1,0],[0,0,1]];}function a(){}function s(i){this.mth_=g();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=2;this.globalAlpha=1;this.canvas=i;var j=i.ownerDocument.createElement("div");j.style.width=i.clientWidth+"px";j.style.height=i.clientHeight+"px";j.style.overflow="hidden";j.style.position="absolute";i.appendChild(j);this.element_=j;this.arcScaleX_=1;this.arcScaleY_=1;this.lineScale_=1;}function b(j){var i=j.srcElement;switch(j.propertyName){case"width":i.style.width=i.attributes.width.nodeValue+"px";i.getContext().clearRect();break;case"height":i.style.height=i.attributes.height.nodeValue+"px";i.getContext().clearRect();break;}}function o(j){var i=j.srcElement;if(i.firstChild){i.firstChild.style.width=i.clientWidth+"px";i.firstChild.style.height=i.clientHeight+"px";}}function e(){return this.context_||(this.context_=new s(this));}var n=Array.prototype.slice;function u(j,v,w){var i=n.call(arguments,2);return function(){return j.apply(v,i.concat(n.call(arguments)));};}var l={init:function(i){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var j=i||document;j.createElement("canvas");j.attachEvent("onreadystatechange",u(this.init_,this,j));}},init_:function(x){if(!x.namespaces.g_vml_){x.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");}if(!x.namespaces.g_o_){x.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");}if(!x.styleSheets.ex_canvas_){var w=x.createStyleSheet();w.owningElement.id="ex_canvas_";w.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}";}var v=x.getElementsByTagName("canvas");for(var j=0;j<v.length;j++){this.initElement(v[j]);}},initElement:function(j){if(!j.getContext){j.getContext=e;j.innerHTML="";j.attachEvent("onpropertychange",b);j.attachEvent("onresize",o);var i=j.attributes;if(i.width&&i.width.specified){j.style.width=i.width.nodeValue+"px";}else{j.width=j.clientWidth;}if(i.height&&i.height.specified){j.style.height=i.height.nodeValue+"px";}else{j.height=j.clientHeight;}}return j;}};l.init();var d=[];for(var q=0;q<16;q++){for(var p=0;p<16;p++){d[q*16+p]=q.toString(16)+p.toString(16);}}function c(v){var y,x=1;v=String(v);if(v.substring(0,3)=="rgb"){var A=v.indexOf("(",3);var j=v.indexOf(")",A+1);var z=v.substring(A+1,j).split(",");y="#";for(var w=0;w<3;w++){y+=d[Number(z[w])];}if(z.length==4&&v.substr(3,1)=="a"){x=z[3];}}else{y=v;}return{color:y,alpha:x};}var f=s.prototype;f.clearRect=function(){this.element_.innerHTML="";};f.beginPath=function(){this.currentPath_=[];};f.moveTo=function(j,i){var v=this.getCoords_(j,i);this.currentPath_.push({type:"moveTo",x:v.x,y:v.y});this.currentX_=v.x;this.currentY_=v.y;};f.lineTo=function(j,i){var v=this.getCoords_(j,i);this.currentPath_.push({type:"lineTo",x:v.x,y:v.y});this.currentX_=v.x;this.currentY_=v.y;};f.arc=function(C,A,B,x,j,v){B*=m;var G=v?"at":"wa";var D=C+h.cos(x)*B-k;var F=A+h.sin(x)*B-k;var i=C+h.cos(j)*B-k;var E=A+h.sin(j)*B-k;if(D==i&&!v){D+=0.125;}var w=this.getCoords_(C,A);var z=this.getCoords_(D,F);var y=this.getCoords_(i,E);this.currentPath_.push({type:G,x:w.x,y:w.y,radius:B,xStart:z.x,yStart:z.y,xEnd:y.x,yEnd:y.y});};f.drawImage=function(K,v){var C,A,E,R,I,F,M,T;var D=K.runtimeStyle.width;var J=K.runtimeStyle.height;K.runtimeStyle.width="auto";K.runtimeStyle.height="auto";var B=K.width;var P=K.height;K.runtimeStyle.width=D;K.runtimeStyle.height=J;if(arguments.length==3){C=arguments[1];A=arguments[2];I=F=0;M=E=B;T=R=P;}else{if(arguments.length==5){C=arguments[1];A=arguments[2];E=arguments[3];R=arguments[4];I=F=0;M=B;T=P;}else{if(arguments.length==9){I=arguments[1];F=arguments[2];M=arguments[3];T=arguments[4];C=arguments[5];A=arguments[6];E=arguments[7];R=arguments[8];}else{throw Error("verkeerd aantal argumenten");}}}var S=this.getCoords_(C,A);var x=M/2;var j=T/2;var Q=[];var i=10;var z=10;Q.push(" <g_vml_:group",' coordsize="',m*i,",",m*z,'"',' coordorigin="0,0"',' style="width:',i,"px;height:",z,"px;position:absolute;");if(this.mth_[0][0]!=1||this.mth_[0][1]){var y=[];y.push("M11=",this.mth_[0][0],",","M12=",this.mth_[1][0],",","M21=",this.mth_[0][1],",","M22=",this.mth_[1][1],",","Dx=",h.round(S.x/m),",","Dy=",h.round(S.y/m),"");var O=S;var N=this.getCoords_(C+E,A);var L=this.getCoords_(C,A+R);var G=this.getCoords_(C+E,A+R);O.x=h.max(O.x,N.x,L.x,G.x);O.y=h.max(O.y,N.y,L.y,G.y);Q.push("padding:0 ",h.round(O.x/m),"px ",h.round(O.y/m),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",y.join(""),", sizingmethod='clip');");}else{Q.push("top:",h.round(S.y/m),"px;left:",h.round(S.x/m),"px;");}Q.push(' ">','<g_vml_:image src="',K.src,'"',' style="width:',m*E,"px;"," height:",m*R,'px;"',' cropleft="',I/B,'"',' croptop="',F/P,'"',' cropright="',(B-I-M)/B,'"',' cropbottom="',(P-F-T)/P,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",Q.join(""));};f.stroke=function(V){var A=[];var B=false;var ag=c(V?this.fillStyle:this.strokeStyle);var R=ag.color;var ac=ag.alpha*this.globalAlpha;var x=10;var D=10;A.push("<g_vml_:shape",' filled="',!!V,'"',' style="position:absolute;width:',x,"px;height:",D,'px;"',' coordorigin="0 0" coordsize="',m*x," ",m*D,'"',' stroked="',!V,'"',' path="');var C=false;var af={x:null,y:null};var N={x:null,y:null};for(var ab=0;ab<this.currentPath_.length;ab++){var aa=this.currentPath_[ab];var ae;switch(aa.type){case"moveTo":ae=aa;A.push(" mth ",h.round(aa.x),",",h.round(aa.y));break;case"lineTo":A.push(" l ",h.round(aa.x),",",h.round(aa.y));break;case"close":A.push(" x ");aa=null;break;case"bezierCurveTo":A.push(" c ",h.round(aa.cp1x),",",h.round(aa.cp1y),",",h.round(aa.cp2x),",",h.round(aa.cp2y),",",h.round(aa.x),",",h.round(aa.y));break;case"at":case"wa":A.push(" ",aa.type," ",h.round(aa.x-this.arcScaleX_*aa.radius),",",h.round(aa.y-this.arcScaleY_*aa.radius)," ",h.round(aa.x+this.arcScaleX_*aa.radius),",",h.round(aa.y+this.arcScaleY_*aa.radius)," ",h.round(aa.xStart),",",h.round(aa.yStart)," ",h.round(aa.xEnd),",",h.round(aa.yEnd));break;}if(aa){if(af.x===null||aa.x<af.x){af.x=aa.x;}if(N.x===null||aa.x>N.x){N.x=aa.x;}if(af.y===null||aa.y<af.y){af.y=aa.y;}if(N.y===null||aa.y>N.y){N.y=aa.y;}}}A.push(' ">');if(!V){var M=this.lineScale_*this.lineWidth;if(M<1){ac*=M;}A.push("<g_vml_:stroke",' opacity="',ac,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',a(this.lineCap),'"',' weight="',M,'px"',' color="',R,'" />');}else{if(typeof this.fillStyle=="object"){var E=this.fillStyle;var K=0;var Z={x:0,y:0};var S=0;var I=1;if(E.type_=="gradient"){var G=E.x0_/this.arcScaleX_;var v=E.y0_/this.arcScaleY_;var F=E.x1_/this.arcScaleX_;var ah=E.y1_/this.arcScaleY_;t=this.getCoords_(G,v);var ad=this.getCoords_(F,ah);var z=ad.x-t.x;var y=ad.y-t.y;K=Math.atan2(z,y)*180/Math.PI;if(K<0){K+=360;}if(K<0.000001){K=0;}}else{t=this.getCoords_(E.x0_,E.y0_);var j=N.x-af.x;var w=N.y-af.y;Z={x:(t.x-af.x)/j,y:(t.y-af.y)/w};j/=this.arcScaleX_*m;w/=this.arcScaleY_*m;var Y=h.max(j,w);S=2*E.r0_/Y;I=2*E.r1_/Y-S;}var Q=E.colors_;Q.sort(function(H,i){return H.offset-i.offset;});var L=Q.length;var P=Q[0].color;var O=Q[L-1].color;var U=Q[0].alpha*this.globalAlpha;var T=Q[L-1].alpha*this.globalAlpha;var X=[];for(ab=0;ab<L;ab++){var J=Q[ab];X.push(J.offset*I+S+" "+J.color);}A.push('<g_vml_:fill type="',E.type_,'"',' method="none" focus="100%"',' color="',P,'"',' color2="',O,'"',' colors="',X.join(","),'"',' opacity="',T,'"',' g_o_:opacity2="',U,'"',' angle="',K,'"',' focusposition="',Z.x,",",Z.y,'" />');}else{A.push('<g_vml_:fill color="',R,'" opacity="',ac,'" />');}}A.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",A.join(""));};f.fill=function(){this.stroke(true);};f.closePath=function(){this.currentPath_.push({type:"close"});};f.getCoords_=function(j,i){var v=this.mth_;return{x:m*(j*v[0][0]+i*v[1][0]+v[2][0])-k,y:m*(j*v[0][1]+i*v[1][1]+v[2][1])-k};};f.arcTo=function(){};function r(i){this.type_=i;this.x0_=0;this.y0_=0;this.r0_=0;this.x1_=0;this.y1_=0;this.r1_=0;this.colors_=[];}})();}
</script>
<![endif]-->