Creating A Flat Pie Chart with jQuery and CSS3 - piechart

File Size: 12.2KB
Views Total: 12592
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Creating A Flat Pie Chart with jQuery and CSS3 - piechart

Piechart is a jQuery plugin that takes advantage of CSS3 and javascript to draw a flat style and responsive pie chart as a ring. Click the colored label to display more information about the sector.

How to use it:

1. Include the latest version of jQuery javascript library on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

2. Include jQuery piechart plugin on the web page

<link href="piechart.css" rel="stylesheet">
<script src="piechart.js"></script>

3. Create a container for the flat pie chart

<div id="content">
<div class="framework-container">
<div class="example" onpagenavigation id="demo"></div>
</div>
</div>

4. Change the data in the piechart.js

$(".example").piechart([
["Country", "M inhabitants"],
["China", 1360, 'blue'],
["India", 1234],
["USA", 316],
["Indonesia", 237],
["Brazil", 201]
]);

This awesome jQuery plugin is developed by ericwenn. For more Advanced Usages, please check the demo page or visit the official website.