0

I've created this pie chart with some help from another question, and everything works fine, except that no matter what I try, then I can't seem to figure out how to put the value inside each part of the Pie chart.

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

Do anyone know how I can put the values from numbers inside the pie chart?

3 Answers 3

3

This is where you realise that trigonometry is actually usefull. To get the xy of a angle of a circle, there is a simple formula:

x = radius *  cos(angle)
y = radius *  sin(angle)

Now all you need to do is find the angle of the center of each number. Since you already work with you lastend, I simply have to divise your current angle by 2

lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal));

With this, you'll get the x and y from the center. You then simply have to add the x,y of the center to get the position of your text.

Your snippet updated:

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice
var x, y;

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

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

  ctx.font = "12px Arial";
  ctx.fillStyle = "white";
  //I divided the width by 4 so that it is halfway to the middle
  x = (can.width / 4) * Math.cos(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  y = (can.height / 4) *  Math.sin(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  ctx.fillText(numbers[i], x+(can.width/2)  , y+(can.width/2));
 
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

0
+100

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [15, 90 ,15, 90, 60, 15, 120]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['black', 'magenta', 'red', 'purple', 'green', 'blue', 'pink']; // Colors of each slice
var x, y;

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

var fillText = [];
for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();

  ctx.font = "12px Arial";
  ctx.fillStyle = "white";

  // Calc by @Liora Haydont
  x = (can.width / 4) * Math.cos(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  y = (can.height / 4) *  Math.sin(lastend + (Math.PI * 2 * ((numbers[i]/2) / myTotal)));
  
  // set a slight offset for numbers so they are centered
  let tmp = [(numbers[i]), (x-8+(can.width/2)), (y+5+(can.width/2))]
  fillText.push(tmp);
  
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
}

// draw text afterwards so it doesnt get overpainted
for( let i = 0; i < fillText.length; i++ ) {
  ctx.fillText(fillText[i][0], fillText[i][1], fillText[i][2]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

0

I'm not sure where do you want to put the numbers, but check this example, you must use HTML Canvas Text, and some properties like font, fillStyle and fillText

var can = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var lastend = 0;
var numbers = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice

for (var e = 0; e < numbers.length; e++) {
  myTotal += numbers[e];
}

for (var i = 0; i < numbers.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(can.width / 2, can.height / 2);
  ctx.arc(can.width / 2, can.height / 2, can.height / 2, lastend, lastend + (Math.PI * 2 * (numbers[i] / myTotal)), false);
  ctx.lineTo(can.width / 2, can.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (numbers[i] / myTotal);
      }
  
  ctx.font = "12px Arial";
  ctx.fillStyle = "white";
  ctx.fillText(numbers[0] , 50 , 50); // Adjust the x and y here
  ctx.fillText(numbers[1] , 100 , 50);
  ctx.fillText(numbers[2] , 180 , 90);
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200" />

See this tutorial on HTML Canvas Text

3
  • I like the answer, but is there a way to make the text placement more dynamic, Since [200, 60, 15] is just fictive numbers for the example.
    – user7255640
    Commented Jul 16, 2018 at 16:47
  • It depends on what type of dynamic text you want Commented Jul 16, 2018 at 16:48
  • As you can see it would make sense that 200 is located somewhat close to the middle of the red part and so on, just like the 15 inside the blue, just dynamic. Because with the numbers coming from a database I can't know how big each part of the pie chart will be-
    – user7255640
    Commented Jul 16, 2018 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.