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
Onderin het javascript staat bij de function "init" de regel die begint met:
svg_pie_chart(canvas, [
Hierna staan er zes getallen gescheiden door komma's. Deze getallen bepalen de verdeling van de "pie" -procents-gewijs-, dus de som van alle getallen hoeft geen honderd te zijn. Op dezelfde regel staan (zes) kleuren die voor de achtergrond van de piecharts bepalend zijn. En als laatste staan er zes omschrijvingen, die naast de pie-chart getoond worden. Je kan natuurlijk zoveel items toevoegen als je wilt; zolang de aantallen maar gelijk zijn voor wat betreft de cijfers, kleuren en omschrijvingen. Voordat je het onderstaande javascipt op jouw pagina gaat gebruiken, moet je eerst de html-regel met de canvas-id (ergens) in jouw body-sectie plaatsen. Hier is de regel:
<p id="canvas_container"></p>
Voor het overige is nog te melden dat de procedure in alle moderne browsers werkt (dus ook Opera) en dat bezoekers met oude, en gebrekkige, browsers het vriendelijke verzoek krijgen om hun browser naar een recente(re) versie te upgraden. Het script is volgens de strenge JSLint-norm foutloos, en dat geldt ook voor de CSS en de html5 van de pagina.
<script>
/*global XMLSerializer: false */
/*global document: false */
/*global window: false */
function pad2(getal) {
return (getal < 10 ? '0' : '') + getal;
}
function check_svg_support() {
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.1");
}
var i, container_canvas, start_hoek_pie, pie_chart_svg = {};
pie_chart_svg.name_space = "http://www.w3.org/2000/svg";
pie_chart_svg.xlinkns = "http://www.w3.org/1999/xlink";
pie_chart_svg.maak_kanvas = function (id, pixel_breedte, pixel_hoogte, gekozen_breedte, gekozen_hoogte) {
if (check_svg_support()) {
var svg = document.createElementNS(pie_chart_svg.name_space, "svg:svg");
svg.setAttribute("id", id);
svg.setAttribute("width", pixel_breedte);
svg.setAttribute("height", pixel_hoogte);
svg.setAttribute("viewBox", "0 0 " + gekozen_breedte + " " + gekozen_hoogte);
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", pie_chart_svg.xlinkns);
return svg;
}};
pie_chart_svg.maak_url_data = function (canvas) {
var text = (new XMLSerializer()).serializeToString(canvas);
var encode_tekst = encodeURIComponent(text);
return "data:image/svg+xml," + encode_tekst;
};
function svg_pie_chart(canvas, data, cx, cy, r, colors, labels, lx, ly) {
if (!check_svg_support()) {
return false;
}
if (typeof canvas === "string") {canvas = document.getElementById(canvas);}
var total = 0;
for (i = 0; i < data.length; i++) {total += data[i];}
var factor = 100/total;
var pie_graden = [];
for (i = 0; i < data.length; i++) {pie_graden[i] = data[i] / total * Math.PI * 2;}
start_hoek_pie = 0;
for (i = 0; i < data.length; i++) {
var eind_hoek_pie = start_hoek_pie + pie_graden[i];
var x1 = cx + r * Math.sin(start_hoek_pie);
var y1 = cy - r * Math.cos(start_hoek_pie);
var x2 = cx + r * Math.sin(eind_hoek_pie);
var y2 = cy - r * Math.cos(eind_hoek_pie);
var groot = 0;
if (eind_hoek_pie - start_hoek_pie > Math.PI) {groot = 1;}
var pie_chart_pad = document.createElementNS(pie_chart_svg.name_space, "path");
var d = "M " + cx + "," + cy + " L " + x1 + "," + y1 + " A " + r + "," + r + " 0 " + groot + " 1 " + x2 + "," + y2 + " Z";
pie_chart_pad.setAttribute("d", d);
pie_chart_pad.setAttribute("fill", colors[i]);
pie_chart_pad.setAttribute("stroke", colors[i]);
pie_chart_pad.setAttribute("stroke-width", "1");
canvas.appendChild(pie_chart_pad);
start_hoek_pie = eind_hoek_pie;
var svg_kleur_blokje = document.createElementNS(pie_chart_svg.name_space, "rect");
svg_kleur_blokje.setAttribute("x", lx);
svg_kleur_blokje.setAttribute("y", ly + 30 * i);
svg_kleur_blokje.setAttribute("width", 40);
svg_kleur_blokje.setAttribute("height", 20);
svg_kleur_blokje.setAttribute("fill", colors[i]);
svg_kleur_blokje.setAttribute("stroke", colors[i]);
svg_kleur_blokje.setAttribute("stroke-width", "1");
canvas.appendChild(svg_kleur_blokje);
var label = document.createElementNS(pie_chart_svg.name_space, "text");
label.setAttribute("x", lx + 60);
label.setAttribute("y", ly + 30 * i + 18);
label.setAttribute("font-family", "sans-serif");
label.setAttribute("font-size", "28");
label.setAttribute("color", "#ff0000");
label.setAttribute("font-style", "italic");
labels[i]=pad2(Math.round(data[i]*factor))+" % __ "+labels[i];
label.appendChild(document.createTextNode(labels[i]));
canvas.appendChild(label);
}
}
function init() {
var canvas = pie_chart_svg.maak_kanvas("canvas", 500, 200, 1000, 400);
svg_pie_chart(canvas, [155, 62, 48, 39, 17, 10], 200, 200, 150, ["#bb0000", "#000088", "#ffbb00", "#005500", "#ff00d0", "#7cc4ff"], ["slice", "canvas", "svg", "chart", "css", "javascript"], 400, 100);
container_canvas = document.getElementById('canvas_container');
if (check_svg_support()) {
container_canvas.appendChild(canvas);
} else {
container_canvas.innerHTML = '<em><ins>upgrade jouw browser</ins></em>';
}
}
window.onload = init;
</script>