Variable amount of slices : Pie Chart concept


This is my image sketch:

pie chart

Here is a jsfiddle to work on:

 <div id="a"></div>

the goal is to divide this circle into variable amount of slices.

for instance if i want 10 slices.. i can just change something to "10" and it will show me this ring that has been divided into 10 pieces.

or '20' or '50' or '100'.

in other words some way to avoid having to deal with each individual line.

being able to rotate would be a plus.

alternatively.. i also would like the version of this.. within which only the border is divided into X slices.

either would work fine for me.

Problem courtesy of: user3970891


So came up with a nice little script for you. Fairly straight forward, and should work on any size circle you throw at it.

Used minimalist HTML and took care of the rest using jQuery:


<div id="a" data-lines="8"></div>


    var numLines = parseInt($('#a').data('lines'));
    var theta = 180/(numLines/2);
    var center = $('#a').innerWidth()/2 - 1; /*-1 to account for the line width*/
    var currAngle = 0;

    for(var i = 0; i < numLines/2; i++){
        $('<div class="lines" style="' + setAngle(currAngle) +' top: ' + center + 'px;"></div>').appendTo('#a');
        currAngle += theta;

function setAngle(theta) {
    return '-ms-transform: rotate('+ theta +'deg); -webkit-transform: rotate('+ theta +'deg); transform: rotate('+ theta +'deg);';

Example Fiddle

--Just a side note... the more lines you add the cooler it looks

Also, just playing around and added a spin animation on hover...

Solution courtesy of: Adjit


Here you go .. extra compact Javascript, HTML and CSS code to represent Pie Chart.


<div id="a"></div>


#a{width:25em;height:25em;border:1em red solid;text-align:center;
.l{width:100%;border:1px solid black;position:absolute}


$(function () {
    for (var a = 0, c = 200; c--;) {
        var b = "transform: rotate(" + a + "deg)";
        $('<div class="l" style="'+ ("-ms-"+ b + ";
           -webkit-"+ b + ";" + b + ";") + 'top: 50%;"></div>').appendTo("#a");
        a += 194; // number of lines

Demo result

Discussion courtesy of: Sumer Kolcak

This recipe can be found in it's original form on Stack Over Flow.