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 |
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.