HTML5 Game - Creating a pie chart

Introduction

Pie charts shows the relative weights of data elements.
The following code shows how to create a configurable Pie Chart class.
It takes in an array of data elements and produces a pie chart.
Demo

<!DOCTYPE HTML>
<html>
<head>
<script>
class PieChart {/* w w w  . j  ava 2  s  .  c o m*/
    constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        this.padding = 10;
        this.legendBorder = 2;
        this.pieBorder = 5;
        this.colorLabelSize = 20;
        this.borderColor = "#555";
        this.shadowColor = "#777";
        this.shadowBlur = 10;
        this.shadowX = 2;
        this.shadowY = 2;
        this.font = "16pt Calibri";
    }
    getLegendWidth() {
        this.context.font = this.font;
        let labelWidth = 0;

        for (let n = 0; n < this.data.length; n++) {
            let label = this.data[n].label;
            labelWidth = Math.max(labelWidth, this.context.measureText(label).width);
        }

        return labelWidth + (this.padding * 2) + this.legendBorder + this.colorLabelSize;
    }

    drawPieBorder() {
        let context = this.context;
        context.save();
        context.fillStyle = "white";
        context.shadowColor = this.shadowColor;
        context.shadowBlur = this.shadowBlur;
        context.shadowOffsetX = this.shadowX;
        context.shadowOffsetY = this.shadowY;
        context.beginPath();
        context.arc(this.pieX, this.pieY, this.pieRadius + this.pieBorder, 0, Math.PI * 2, false);
        context.fill();
        context.closePath();
        context.restore();
    }
    drawSlices() {
        let context = this.context;
        context.save();
        let total = this.getTotalValue();
        let startAngle = 0;
        for (let n = 0; n < this.data.length; n++) {
            let slice = this.data[n];

            // draw slice
            let sliceAngle = 2 * Math.PI * slice.value / total;
            let endAngle = startAngle + sliceAngle;

            context.beginPath();
            context.moveTo(this.pieX, this.pieY);
            context.arc(this.pieX, this.pieY, this.pieRadius, startAngle, endAngle, false);
            context.fillStyle = slice.color;
            context.fill();
            context.closePath();
            startAngle = endAngle;
        }
        context.restore();
    }
    getTotalValue() {
        let data = this.data;
        let total = 0;

        for (let n = 0; n < data.length; n++) {
            total += data[n].value;
        }

        return total;
    }
    drawLegend() {
        let context = this.context;
        context.save();
        let labelX = this.legendX;
        let labelY = this.legendY;

        context.strokeStyle = "black";
        context.lineWidth = this.legendBorder;
        context.font = this.font;
        context.textBaseline = "middle";

        for (let n = 0; n < this.data.length; n++) {
            let slice = this.data[n];
            // draw legend label
            context.beginPath();
            context.rect(labelX, labelY, this.colorLabelSize, this.colorLabelSize);
            context.closePath();
            context.fillStyle = slice.color;
            context.fill();
            context.stroke();

            context.fillStyle = "black";
            context.fillText(slice.label, labelX + this.colorLabelSize + this.padding, labelY + this.colorLabelSize / 2);

            labelY += this.colorLabelSize + this.padding;
        }
        context.restore();
    }
    setData(d) {
        this.data = d;
        // relationships
        this.context = this.canvas.getContext("2d");
        this.legendWidth = this.getLegendWidth();
        this.legendX = this.canvas.width - this.legendWidth;
        this.legendY = this.padding;
        this.pieAreaWidth = (this.canvas.width - this.legendWidth);
        this.pieAreaHeight = this.canvas.height;
        this.pieX = this.pieAreaWidth / 2;
        this.pieY = this.pieAreaHeight / 2;
        this.pieRadius = (Math.min(this.pieAreaWidth, this.pieAreaHeight) / 2) - (this.padding);

    }
    draw() {
        this.drawPieBorder();
        this.drawSlices();
        this.drawLegend();

    }
}


window.onload = function() {
    let data = [{
        label: "SQL",
        value: 12,
        color: "red"
    }, {
        label: "C++",
        value: 8,
        color: "blue"
    }, {
        label: "Java",
        value: 8,
        color: "green"
    }, {
        label: "Javascript",
        value: 21,
        color: "yellow"
    }, {
        label: "C",
        value: 14,
        color: "pink"
    }];

    let chart = new PieChart("myCanvas");
    chart.setData(data);
    chart.draw();
};
        </script>
</head>
<body>
  <canvas id="myCanvas" width="600" height="300"
    style="border: 1px solid black;">
        </canvas>
</body>
</html>
HTML5 Game - Creating a pie chart

Introduction

Demo

Related Topic
