Creating A Flat Pie Chart with jQuery and CSS3 - piechart
| File Size: | 12.2KB |
|---|---|
| Views Total: | 12657 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











