Simple jQuery Plugin To Draw A SVG Pie Chart - Piechart

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.