CSS 3/HTML 5 - pie chart questions and help

See the attached file. I have a simple pie chart on a canvas, but I can't seem to get the percentages (the ones in text) to appear correctly next to their respective "slices" of pie.

Also, I was hoping for some kind of "fill" effect or animation that fills each slice. Any suggestions or help here would be awesome, too. I'm still trying learn HTML5 and CSS3 and am stuck on this one.
piechart.html
saturationAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott FellDeveloper & EE ModeratorCommented:
Instead of reinventing the wheel, there are plenty of great js and jquery charting options that can get you going very quickly.

http://www.chartjs.org/

http://www.flotcharts.org/
http://www.flotcharts.org/flot/examples/series-pie/index.html

http://www.fusioncharts.com/
http://www.highcharts.com/

Would these make your life easier or do you want to continue on your current solution?
saturationAuthor Commented:
Was really wanting to create my own from scratch. Any help?
Scott FellDeveloper & EE ModeratorCommented:
I only use the chart libraries.  Others have made my life easier so I can concentrate on other aspects of my applications.    Let's see if there is any other input.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Robert SchuttSoftware EngineerCommented:
Here's a start:
<html>
<head>
<style>
body {
   background: #333;
}

#canvas {
   display: block;
   width: 600px;
   margin: 100px auto;
   background: #555555;
}

@font-face {
   font-family: "bebas";
   src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf");
}

</style>

<script>

var canvas, context, W, H;

   // Variables
   var degrees = 0;
   var new_degrees = 0;
   var color = "yellow";
   var bgcolor = "#222";

   var barfill = 0;
   var new_barfill = 0;

   var difference = 0;
   var text;
   var animation_loop_gauge, animation_loop_bar, redraw_loop;

   var data = [120, 100, 140];
   var labels = ["120", "100", "140"];
   var colors = ["pink", "orange", "skyblue"];
   var radius;


window.onload = function(){

   // Canvas initialization
   canvas = document.getElementById("canvas");
   //var ctx = canvas.getContext("2d"); // removed - not used

   // Dimensions
   W = canvas.width;
   H = canvas.height;

   // Start the drawing
   //drawGauge();

   /////////////////////////////////
   // PIE CHART FUNCTIONS
   ////////////////////////////////
   //canvas = document.getElementById("canvas"); // removed - duplicate
   context = canvas.getContext("2d");

   for (var i=0; i < data.length; i++) {
      drawSegment(canvas, context, i);
   }

   function degreesToRadians(degrees) {
     return (degrees * Math.PI)/180;
   }

   function sumTo(a, i) {
     var sum = 0;
     for (var j = 0; j < i; j++) {
       sum += a[j];
     }
     return sum;
   }

   function drawSegment(canvas, context, i) {
     context.save();
     var centerX = Math.floor(canvas.width / 2);
     var centerY = Math.floor(canvas.height / 2);
     radius = 50;

     var startingAngle = degreesToRadians(sumTo(data, i));
     var arcSize = degreesToRadians(data[i]);
     var endingAngle = startingAngle + arcSize;

     context.beginPath();
     context.moveTo(centerX, centerY);
       //ctx.arc(W-200, H-200, 40, 0, Math.PI*2, false);
     context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
     context.closePath();

     context.fillStyle = colors[i];
     context.fill();
     context.restore();

     drawSegmentLabel(canvas, context, i);
   }

   function drawSegmentLabel(canvas, context, i) {
      context.save();
      var x = Math.floor(canvas.width / 2);
      var y = Math.floor(canvas.height / 2);
      var angle = degreesToRadians(sumTo(data, i));

      context.translate(x, y);
      //context.rotate(angle);
      var dx = Math.cos(angle+degreesToRadians(data[i]/2)) * (radius + 30); // Math.floor(canvas.width * 0.1) - 5;
      var dy = Math.sin(angle+degreesToRadians(data[i]/2)) * (radius + 30); // Math.floor(canvas.height * 0.18);

      context.textAlign = "right";
      context.font = "20px bebas";
      context.fillStyle = colors[i];
      //context.fillText(labels[i] + "%", dx, dy);
      var labelval = String(Math.round(data[i]*100/sumTo(data, data.length)));
      context.fillText(labelval + "%", dx + 10 * labelval.length, dy + 10);
      context.restore();
   }
}

</script>

</head>

<body>

<canvas id="canvas" width="600" height="300">Your browser does not support the canvas element.</canvas>

</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
saturationAuthor Commented:
Awesome, Robert--that's looking good. I'll give you the points and ask about animation in a second question. Thanks!
saturationAuthor Commented:
Perfect.
Robert SchuttSoftware EngineerCommented:
Here's a version that does some animation.
<html>
<head>
<style>
body {
   background: #333;
}

#canvas {
   display: block;
   width: 600px;
   margin: 100px auto;
   background: #555555;
}

@font-face {
   font-family: "bebas";
   src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf");
}

</style>

<script>

var canvas, context, W, H, animSpeed = 50, animPerc = 0;

   // Variables
   var degrees = 0;
   var new_degrees = 0;
   var color = "yellow";
   var bgcolor = "#222";

   var barfill = 0;
   var new_barfill = 0;

   var difference = 0;
   var text;
   var animation_loop_gauge, animation_loop_bar, redraw_loop;

   var data = [120, 100, 140];
   var labels = ["120", "100", "140"];
   var colors = ["pink", "orange", "skyblue"];
   var radius;


window.onload = function(){

   // Canvas initialization
   canvas = document.getElementById("canvas");

   // Dimensions
   W = canvas.width;
   H = canvas.height;

   // Start the drawing
   //drawGauge();

   /////////////////////////////////
   // PIE CHART FUNCTIONS
   ////////////////////////////////
   context = canvas.getContext("2d");

   for (var i=0; i < data.length; i++) {
      drawSegment(canvas, context, i);
   }

   setTimeout(anim, animSpeed);
}

function degreesToRadians(degrees) {
  return (degrees * Math.PI)/180;
}

function sumTo(a, i) {
  var sum = 0;
  for (var j = 0; j < i; j++) {
    sum += a[j];
  }
  return sum;
}

function drawSegment(canvas, context, i) {
  context.save();
  var centerX = Math.floor(canvas.width / 2);
  var centerY = Math.floor(canvas.height / 2);
  radius = 50;

  var startingAngle = degreesToRadians(sumTo(data, i));
  var arcSize = degreesToRadians(data[i]);
  var endingAngle = startingAngle + arcSize * animPerc / 100;

  context.beginPath();
  context.moveTo(centerX, centerY);
  context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
  context.closePath();

  context.fillStyle = colors[i];
  context.fill();
  context.restore();

  drawSegmentLabel(canvas, context, i);
}

function drawSegmentLabel(canvas, context, i) {
   context.save();
   var x = Math.floor(canvas.width / 2);
   var y = Math.floor(canvas.height / 2);
   var angle = degreesToRadians(sumTo(data, i));

   context.translate(x, y);
   //context.rotate(angle);
   var dx = Math.cos(angle+degreesToRadians(data[i]/2)) * (radius + 30);
   var dy = Math.sin(angle+degreesToRadians(data[i]/2)) * (radius + 30);

   context.textAlign = "right";
   context.font = "20px bebas";
   context.fillStyle = colors[i];
   //context.fillText(labels[i] + "%", dx, dy);
   var labelval = String(Math.round(data[i]*100/sumTo(data, data.length)));
   context.fillText(labelval + "%", dx + 10 * labelval.length, dy + 10);
   context.restore();
}

function anim() {
   if (animPerc < 100) {
      animPerc += 5;
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i=0; i < data.length; i++) {
         drawSegment(canvas, context, i);
      }

      setTimeout(anim, animSpeed);
   }
}

</script>

</head>

<body>

<canvas id="canvas" width="600" height="300">Your browser does not support the canvas element.</canvas>

</body>
</html>

Open in new window

Robert SchuttSoftware EngineerCommented:
oops... I was already working on that, you had included that in your post so I thought I would add it ;-)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.