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
| browser | procent |
|---|---|
| IE | 30 |
| Mozilla | 30 |
| Chrome | 25 |
| Safari | 8 |
| Opera | 7 |
Plaats in de th-tags van de html-code een omschrijving, en vul de td-tags met items en getallen. Het voorbeeld spreekt voor zichzelf. Het gehele stuk met de html-code behoort in de body-sectie van de pagina thuis. Het (zeer) grote javascript moet in de head-sectie terechtkomen, en het kleine javascript zo laag als mogelijk in de body-sectie. De code valideert voor de css en de html5.
Al valideert de code en is de procedure cross-browser; een schoonheidsprijs verdient de code niet. Het is altijd onverstandig om tabellen voor dit soort doeleinden te gebruiken. Het werkt, en daar is dan ook alles mee gezegd...
Helemaal onderaan deze pagina staat nog een stukje CSS. Als je wilt kan je deze stylesheet nog in de head-sectie plaatsen.
<canvas id="canvas" width="130" height="130"></canvas>
<table id="pie_chart_data">
<tr><th>browser</th><th>procent</th></tr>
<tr><td>IE</td><td>30</td></tr>
<tr><td>Mozilla</td><td>30</td></tr>
<tr><td>Chrome</td><td>25</td></tr>
<tr><td>Safari</td><td>8</td></tr>
<tr><td>Opera</td><td>7</td></tr>
</table>
<script>
var kleur = [];
kleur[1] = "#004400";
kleur[2] = "#aa0000";
kleur[3] = "#eeaa00";
kleur[4] = "#0000aa";
kleur[5] = "#aaaa00";
kleur[6] = "#00ffaa";
kleur[7] = "#ff88ff";
kleur[8] = "#ff11ee";
kleur[9] = "#6600ff";
kleur[10] = "#ff0066";
kleur[11] = "#777777";
window.onload = function () {
(function () {
var tabeldata = document.getElementById('pie_chart_data');
var canvas = document.getElementById('canvas');
var indextd = 1;
var tds, data = [],
color, colors = [],
value = 0,
total = 0;
var trs = tabeldata.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
tds = trs[i].getElementsByTagName('td');
if (tds.length === 0) {
continue;
}
value = parseFloat(tds[indextd].innerHTML);
data[data.length] = value;
total += value;
color = kleur[i];
colors[colors.length] = color;
trs[i].style.backgroundColor = color;
}
if (typeof canvas.getContext === 'undefined') {
return;
}
var ctx = canvas.getContext('2d');
var canvasafmeting = [canvas.width, canvas.height];
var radius = Math.min(canvasafmeting[0], canvasafmeting[1]) / 2;
var center = [canvasafmeting[0] / 2, canvasafmeting[1] / 2];
var tothier = 0;
for (var partje in data) {
if (tothier != 99.99) {
var dezewaarde = data[partje] / total;
ctx.beginPath();
ctx.moveTo(center[0], center[1]);
ctx.arc(center[0], center[1], radius, Math.PI * (-0.5 + 2 * tothier), Math.PI * (-0.5 + 2 * (tothier + dezewaarde)), false);
ctx.lineTo(center[0], center[1]);
ctx.closePath();
ctx.fillStyle = colors[partje];
ctx.fill();
tothier += dezewaarde;
}
}
}());
};
</script>
<!--[if lt IE 9]>
<script>
/*global document: false */
/*global window: false */
/*global navigator: false */
var w;
if (!document.createElement("canvas").getContext) {
(function () {
var h = Math,
j, q, p, ab, e_block, B, t, m = 10,
k = m / 2;
function g() {
return [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
}
function a() {
e_block = 0;
}
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 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_ = new s(this));
}
var n = Array.prototype.slice;
function u(j, v, w) {
e_block = v;
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 (j = 0; j < v.length; j++) {
this.initElement(v[j]);
}
},
initElement: function (j) {
if (!j.getContext) {
j.getContext = e;
j.innerHTML = "";
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 (q = 0; q < 16; q++) {
for (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") {
e_block = 0;
} else {
y = v;
}
return {
color: y,
alpha: x
};
}
var f = s.prototype;
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 P = K.height;
K.runtimeStyle.width = D;
K.runtimeStyle.height = J;
var S = this.getCoords_(C, A);
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 (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") {
e_block = 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 () {};
}());
}
</script>
<![endif]-->
<style type="text/css">
td{
color:#fff;
padding:5px;
font-size:8pt}
th{
font-size:x-small}
canvas{
margin:20px;
float:left}
</style>