Pie Chart Javascript Library

The JS Library is now on GitHub! Download it, Fork it, Add some spices to make it more delicious!

I noticed that the Pie Chart Generator is being used a lot, so I decided to improve the way we can create this pie, using the generator you can only create static pies, but what if we need to create a pie based on numbers from a database?



You can now download and use the Javascript library that will create your pie anywhere on your webpage.


STEP 1

Download the Javascript file from Google Code.
Here's the link.
https://css-pie.googlecode.com/files/CSSpie.js

STEP 2 

Include the Javascript file into your webpage.

<head>
      <script src="CSSpie.js">
      </script>
</head>


STEP 3

Create the pie using the following line of code.

<script>
       createPie(name, size, baseColor, numberOfSlices, Percentages, Colors);
</script>

name: This is the name that distinguishes each pie, the name will actually be the ID of the created pie.

size: This is the size of the pie in pixels.

baseColor: This is the background color of the pie, you can use HEX or RGB or color names.

numberOfSlices: This is the number of slices that you want in this pie.

Percentages: This is an array of percentages, the number of elements must be the same as the number of slices.

Colors: This is an array of colors.

STEP 4

Now we must place the pie, the createPie function returns an HTML Div Element, so we just need to assign it to a variable, then append it to another element.

<script>
    var Pie = createPie(name, size, baseColor, numberOfSlices, Percentages, Colors);
    document.getElementById("MyDiv").appendChild(Pie);
</script>

And That's it!

Examples:

createPie("workers","200px","white",5,[10,45,22,11,12],["#FF00FF","#336699","#66CC00","#CC6633","#FFFF99"]);





createPie("students","300px","white",3,[55,12,33],["#CCFFFF","#CCFF66","#003333"]);





No comments:

Post a Comment