Not able to get multiple Canvas Pie Charts

I am trying to get multiple canvas pie charts by adding different ids in tag. But it is not working.

i am not able to get multiple canvas charts.

please suggest some edit or otherwise that can solve my problem.

I am attaching my code below :

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Canvas Test</title>
</head>

<body>
    <section>
        <div>
            <canvas id="canvas" width="400" height="300">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        </div>

        <script type="text/javascript">
            var myColor = ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"];
            var myData = [10, 30, 20, 60, 40];

            function getTotal() {
                var myTotal = 0;
                for (var j = 0; j < myData.length; j++) {
                    myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
                }
                return myTotal;
            }

            function plotData() {
                var canvas;
                var ctx;
                var lastend = 0;
                var myTotal = getTotal();

                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                for (var i = 0; i < myData.length; i++) {
                    ctx.fillStyle = myColor[i];
                    ctx.beginPath();
                    ctx.moveTo(200, 150);
                    ctx.arc(200, 150, 150, lastend, lastend +
                        (Math.PI * 2 * (myData[i] / myTotal)), false);
                    ctx.lineTo(200, 150);
                    ctx.fill();
                    lastend += Math.PI * 2 * (myData[i] / myTotal);
                }
            }

            plotData();
        </script>
    </section>
</body>

</html>

Solution

You can slightly modify your plotData function so that it allows arguments like colors and percentages but also x- and y-coordinates and pie chart radius. Then you can create two-dimensional arrays for your pie chart data and colors.

This allows you to decide where to place your pie charts and which data to use.

Pie Charts on the same canvas

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"],
              ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]];
            var myData = [[10, 30, 20, 60, 40],
                         [20, 5, 15, 50, 40]];

function getTotal(data) {
    var myTotal = 0;
    for (var j = 0; j < data.length; j++) {
        myTotal += (typeof data[j] == 'number') ? data[j] : 0;
    }
    return myTotal;
}

function plotData(x,y,r,data,colors) {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal(data);
    
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (var i = 0; i < data.length; i++) {
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, r, lastend, lastend +
                (Math.PI * 2 * (data[i] / myTotal)), false);
        ctx.lineTo(x, y);
        ctx.fill();
        lastend += Math.PI * 2 * (data[i] / myTotal);
    }
}

plotData(100,50,50,myData[0],myColor[0]);
plotData(100,180,80,myData[1],myColor[1]);

<canvas id="canvas" width="400" height="300">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>

Pie Charts on different canvases

To achieve this, simply add yet another argument to your plotData function, namely, the canvas id. See example below.

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"],
              ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]];
            var myData = [[10, 30, 20, 60, 40],
                         [20, 5, 15, 50, 40]];

function getTotal(data) {
    var myTotal = 0;
    for (var j = 0; j < data.length; j++) {
        myTotal += (typeof data[j] == 'number') ? data[j] : 0;
    }
    return myTotal;
}

function plotData(x,y,r,data,colors,c_id) {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal(data);
    
    canvas = document.getElementById(c_id);
    ctx = canvas.getContext("2d");
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (var i = 0; i < data.length; i++) {
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, r, lastend, lastend +
                (Math.PI * 2 * (data[i] / myTotal)), false);
        ctx.lineTo(x, y);
        ctx.fill();
        lastend += Math.PI * 2 * (data[i] / myTotal);
    }
}

plotData(75,50,50,myData[0],myColor[0],"canvas_1");
plotData(75,50,50,myData[1],myColor[1],"canvas_2");

canvas {
  border: 1px solid black;
  }

<canvas id="canvas_1" width="150" height="200"></canvas>
<canvas id="canvas_2" width="150" height="200"></canvas>