CODEWITHSUNDEEP
javascriptjquerycss
user3970891
user3970891

Reputation:

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.

Upvotes: 0

Views: 222

Answers (2)

user4024071
user4024071

Reputation:

Here you go http://jsfiddle.net/bqah9jex/10/ .. extra compact Javascript, HTML and CSS code to represent Pie Chart.

HTML

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

CSS

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

Javascript

$(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

https://i.sstatic.net/gFQZ6.png

Upvotes: 1

Adjit
Adjit

Reputation: 10305

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:

HTML

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

jQuery

$(document).ready(function(){
    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... http://jsfiddle.net/bqah9jex/4/

Upvotes: 3

Related Questions