In this article, we will learn about how to create animated pie chart using css3 and simple jQuery with example and live demo.
The preview are shown as below-
To create animated pie chart write the code as shown below-
HTML:
Now save the file and run on browser to view the animated pie chart.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Animated Pie Chart Using CSS3 and Simple jQuery with Example | webcodelogics.com</title>
<!-- jQuery Library Link -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<style>
.circular_chart_main {
width: 330px;
margin: 100px auto;
border: 1px solid #ddd;
font-family: Arial;
padding: 15px;
}
.circular_chart_main h4.head {
border-left: medium none;
font-size: 12px;
font-weight: bold;
margin-bottom: 7px;
}
.circular_chart_main h4.head span {
float: right;
}
@keyframes bake-graph {
from {
transform: rotate(0deg) translate3d(0,0,0);
}
}
.chart {
display: inline-block;
vertical-align: middle;
}
.graph {
height: 150px;
width: 150px;
margin-right: 15px;
position: relative;
}
.graph::before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 70px;
height: 70px;
background: #EEE;
border-radius: 50%;
top: 40px;
left: 40px;
}
.slice {
position: absolute;
width: 150px;
height: 150px;
clip: rect(0px, 150px, 150px, 75px);
animation: bake-graph 1s;
color: #333;
}
.slice span {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 150px;
height: 150px;
border-radius: 50%;
clip: rect(0px, 150px, 150px, 75px);
}
.legend {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 13px;
width: 155px;
}
.legend li {
line-height: 12px;
height: 12px;
margin-bottom: 9px;
padding-left: 7px;
border-left: 12px solid #ddd;
}
.legend em {
font-style: normal;
}
.legend span {
float: right;
}
</style>
<script>
$(document).ready(function () {
createGraph(".circular_chart_main .chart .legend", ".circular_chart_main .chart.graph");
});
function createGraph(dataElement, graphElement) {
var listData = [];
$(dataElement + " span").each(function () {
listData.push(Number($(this).html()));
});
var listTotal = 0;
for (var i = 0; i < listData.length; i++) {
listTotal += listData[i];
}
var offset = 0;
var color = ["#FF6347", "#6495ED", "#FFA500", "#6B8E23", "#CA6FF8"];
for (var i = 0; i < listData.length; i++) {
var size = sliceSize(listData[i], listTotal);
iterateSlices(size, graphElement, offset, i, 0, color[i]);
$(dataElement + " li:nth-child(" + (i + 1) + ")").css("border-color", color[i]);
offset += size;
}
}
function sliceSize(dataNum, dataTotal) {
return (dataNum / dataTotal) * 360;
}
function addSlice(sliceSize, graphElement, offset, sliceID, color) {
$(graphElement).append("<div class='slice " + sliceID + "'><span></span></div>");
var offset = offset - 1;
var sizeRotation = -179 + sliceSize;
$(graphElement + " ." + sliceID).css({
"transform": "rotate(" + offset + "deg) translate3d(0,0,0)"
});
$(graphElement + " ." + sliceID + " span").css({
"transform": "rotate(" + sizeRotation + "deg) translate3d(0,0,0)",
"background-color": color
});
}
function iterateSlices(sliceSize, graphElement, offset, dataCount, sliceCount, color) {
var sliceID = "s" + dataCount + "-" + sliceCount;
var maxSize = 179;
if (sliceSize <= maxSize) {
addSlice(sliceSize, graphElement, offset, sliceID, color);
} else {
addSlice(maxSize, graphElement, offset, sliceID, color);
iterateSlices(sliceSize - maxSize, graphElement, offset + maxSize, dataCount, sliceCount + 1, color);
}
}
</script>
</head>
<body>
<div class="circular_chart_main">
<div class="chart graph"></div>
<div class="chart">
<h4 class="head">Total Vehicals <span>310</span></h4>
<ul class="legend">
<li><em>Cars </em><span>120</span></li>
<li><em>Motorbikes </em><span>75</span></li>
<li><em>Vans </em><span>45</span></li>
<li><em>Buses </em><span>60</span></li>
<li><em>Trains </em><span>10</span></li>
</ul>
</div>
</div>
</body>
</html>
Now save the file and run on browser to view the animated pie chart.
0 comments:
Post a Comment