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"]);
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"]);
Can you post a full HTML example? I'm not terrible with HTML/CSS but for some silly reason I can't get this example to work. Thank you.
ReplyDeleteI created an example HTML page that you can check here : http://csspie.alibassam.com/pieexample.html
DeleteKindly check the source code of this page.
Sorry for the late response.
You can also check the new official page of this script at :
http://csspie.alibassam.com
Any suggestions for how to label slices or have you considering including this as an option?
ReplyDeletehtmle xamples for webmasters
ReplyDeleteP paragraph tag font status-bar