Simple jQuery Plugin To Draw A SVG Pie Chart - Piechart
File Size: | 11.2 KB |
---|---|
Views Total: | 6080 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Piechart is a super tiny jQuery plugin used to create a SVG pie chart with a hover animation and percentage display.
How to use it:
1. Include the latest jQuery library and jQuery Piechart plugin in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="PieChart.js"></script>
2. Create an Html element where you want to render a pie chart.
<div id="target"> </div>
3. Create the data source using value
attribute.
<table id="source"> <thead> <tr> <th>Type</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td class="pieChart" value="220">Red</td> <td>220</td> </tr> <tr> <td class="pieChart" value="550">Blue</td> <td>550</td> </tr> <tr> <td class="pieChart" value="105">Green</td> <td>105</td> </tr> <tr> <td class="pieChart" value="300">Yellow</td> <td>300</td> </tr> </tbody> </table>
4. Call the plugin and done.
<script type="text/javascript"> $(function() { $('#source').pieChart('#target', 'Pie Chart Title'); }); </script>
5. The sample CSS to style the pies.
.caption { display: block; text-align: center; font-weight: bold; height: 40px; } .legend { background: #f0f0f0; border-radius: 4px; bottom: 0; position: relative; text-align: left; width: 100%; margin: 0; } .legend li { display: block; float: left; height: 20px; margin: 0; padding: 10px 20px; } .legend span.icon { background-position: 50% 0; border-radius: 2px; display: block; float: left; height: 16px; margin: 2px 10px 0 0; width: 16px; } .percentage { fill: white; stroke: none; font-size: 20px; z-index: 100; } .pieChart { stroke: black; stroke-width: 2; } .pie0 { fill: red; background-color: red; } .pie1 { fill: blue; background-color: blue; } .pie2 { fill: green; background-color: green; } .pie3 { fill: yellow; background-color: yellow; }
This awesome jQuery plugin is developed by hnvcam. For more Advanced Usages, please check the demo page or visit the official website.