Pie Chart

Developer
Anoop
Size
4,762 Kb
Views
44,528
  1. Pie Chart Previews
  2. Pie Chart HTML Codes
  3. Pie Chart CSS Codes
  4. Pie Chart JS Codes

How do I make an pie chart?

Pie Chart using css3. What is a pie chart? How do you make a pie chart? This script and codes were developed by Anoop on 06 September 2022, Tuesday.

Pie Chart Previews
IQ Test

Pie Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pie Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="menu menu1"> <li class="menu-item" data-title="NC" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. "><span>NC</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="CPA" data-name="Error illo facilis sunt? Inventore"><span>CPA</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Tool & Equip" data-name="animi doloribus? Accusamus sequi"><span>Tool & Equip</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Document Control" data-name="harum omnis quia quod, saepe voluptatum"><span>Document<br>Control</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Customer Service" data-name="quibusdam officia tenetur at possimus, ea incidunt!"><span>Customer<br>Service</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Key Indicators" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit. "><span>Key Indicators</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Trend Analysis" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit."><span>Trend<br>Analysis</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="Requests" data-name="quibusdam officia tenetur at possimus, ea incidunt"><span>Requests</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item" data-title="To-Do List" data-name="animi doloribus? Accusamus sequi"><span>To-Do List</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Inspection" data-name="Error illo facilis sunt? Inventore"><span>Inspection</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Auditing" data-name="harum omnis quia quod, saepe voluptatum"><span>Auditing</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Health & Safety" data-name="quibusdam officia tenetur at possimus, ea incidunt"><span>Health &<br>Safety</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Education & Training" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit."><span>Education<br>& Training</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Validation" data-name="animi doloribus? Accusamus sequi"><span>Validation</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Surveys" data-name="Error illo facilis sunt? Inventore"><span>Surveys</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt2"data-title="Supplier Mgmt" data-name="harum omnis quia quod, saepe voluptatum"><span>Supplier<br>Mgmt</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt3"data-title="uniPoint Mobile" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit."><span>uniPoint Mobile</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt3"data-title="Knowledge Base" data-name="Error illo facilis sunt? Inventore"><span>Knowledge<br>Base</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt3"data-title="Web Requests" data-name="harum omnis quia quod, saepe voluptatum"><span>Web<br>Requests</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt3"data-title="Web Doc Viewer" data-name="quibusdam officia tenetur at possimus, ea incidunt"><span>Web Doc<br>Viewer</span><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item mt3"data-title="Web Sign-Offs" data-name="Lorem ipsum dolor sit amet, consectetur adipisicing elit."><span>Web Sign-Offs</span><a class="menu-item-back" href="#menu"></a></li>
</ul>
<ul class="menu menu2"> <li class="menu-item item2"><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item item2"><a class="menu-item-back" href="#menu"></a></li> <li class="menu-item item2"><a class="menu-item-back" href="#menu"></a></li>
</ul>
<div class="mtxt mtxt1">Core Modules</div>
<div class="mtxt mtxt2">Add-On-Modules</div>
<div class="mtxt mtxt3">Web Modules</div>
<div class="center">Your <strong>ERP</strong> Data</div>
<div class="show-data">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://tympanus.net/Development/Arctext/js/jquery.arctext.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pie Chart - Script Codes CSS Codes

* { Box-sizing: Border-box;
}
html, body { background: #fff; overflow: hidden;
}
.menu { width: 550px; height: 550px; margin: -75px 0 0 -75px; border-radius: 500px; border-radius: 50%; position: absolute; left: 250px; top: 150px; list-style: none; font-size: 200%; overflow: hidden; border: 10px solid #dae7de;
}
.menu2 { width: 290px; height: 290px; top: 280px; left: 380px; border: 2px solid rgba(0, 0, 0, 0.1);
}
.menu-item .menu-item-back { background: #585858; width: 285px; height: 150px; position: absolute; transform-origin: 0px 150px; margin-top: -150px; left: 50%; top: 50%; border: 1px solid whitesmoke; transition: all .4s ease;
}
.menu-item-back:hover { background: #3f3f3f;
}
.menu-item:nth-child(-n+9) .menu-item-back { background: #4982ad;
}
.menu-item:nth-child(-n+9) .menu-item-back:hover { background: #3a6789;
}
.menu-item:nth-last-child(-n+5) .menu-item-back { background: #4c885d;
}
.menu-item:nth-last-child(-n+5) .menu-item-back:hover { background: #3a6747;
}
.menu-item span { width: 255px; cursor: default; padding-top: 7px; pointer-events: none; height: 52px; color: #fff; position: absolute; font-size: 14px; transform-origin: 0px 50px; margin-top: -51px; text-align: right; z-index: 10;
}
.menu-item { position: absolute; text-decoration: none; top: 50%; left: 50%; display: block;
}
.menu-item:nth-child(1) .menu-item-back { transform: rotate(-81.42857deg) skew(-72.85714deg);
}
.menu-item:nth-child(1) span { transform: rotate(-81.42857deg);
}
.menu-item:nth-child(2) .menu-item-back { transform: rotate(-64.28571deg) skew(-72.85714deg);
}
.menu-item:nth-child(2) span { transform: rotate(-64.28571deg);
}
.menu-item:nth-child(3) .menu-item-back { transform: rotate(-47.14286deg) skew(-72.85714deg);
}
.menu-item:nth-child(3) span { transform: rotate(-47.14286deg);
}
.menu-item:nth-child(4) .menu-item-back { transform: rotate(-30deg) skew(-72.85714deg);
}
.menu-item:nth-child(4) span { transform: rotate(-30deg);
}
.menu-item:nth-child(5) .menu-item-back { transform: rotate(-12.85714deg) skew(-72.85714deg);
}
.menu-item:nth-child(5) span { transform: rotate(-12.85714deg);
}
.menu-item:nth-child(6) .menu-item-back { transform: rotate(4.28571deg) skew(-72.85714deg);
}
.menu-item:nth-child(6) span { transform: rotate(4.28571deg);
}
.menu-item:nth-child(7) .menu-item-back { transform: rotate(21.42857deg) skew(-72.85714deg);
}
.menu-item:nth-child(7) span { transform: rotate(21.42857deg);
}
.menu-item:nth-child(8) .menu-item-back { transform: rotate(38.57143deg) skew(-72.85714deg);
}
.menu-item:nth-child(8) span { transform: rotate(38.57143deg);
}
.menu-item:nth-child(9) .menu-item-back { transform: rotate(55.71429deg) skew(-72.85714deg);
}
.menu-item:nth-child(9) span { transform: rotate(55.71429deg);
}
.menu-item:nth-child(10) .menu-item-back { transform: rotate(72.85714deg) skew(-72.85714deg);
}
.menu-item:nth-child(10) span { transform: rotate(72.85714deg);
}
.menu-item:nth-child(11) .menu-item-back { transform: rotate(90deg) skew(-72.85714deg);
}
.menu-item:nth-child(11) span { transform: rotate(90deg);
}
.menu-item:nth-child(12) .menu-item-back { transform: rotate(107.14286deg) skew(-72.85714deg);
}
.menu-item:nth-child(12) span { transform: rotate(107.14286deg);
}
.menu-item:nth-child(13) .menu-item-back { transform: rotate(124.28571deg) skew(-72.85714deg);
}
.menu-item:nth-child(13) span { transform: rotate(124.28571deg);
}
.menu-item:nth-child(14) .menu-item-back { transform: rotate(141.42857deg) skew(-72.85714deg);
}
.menu-item:nth-child(14) span { transform: rotate(141.42857deg);
}
.menu-item:nth-child(15) .menu-item-back { transform: rotate(158.57143deg) skew(-72.85714deg);
}
.menu-item:nth-child(15) span { transform: rotate(158.57143deg);
}
.menu-item:nth-child(16) .menu-item-back { transform: rotate(175.71429deg) skew(-72.85714deg);
}
.menu-item:nth-child(16) span { transform: rotate(175.71429deg);
}
.menu-item:nth-child(17) .menu-item-back { transform: rotate(192.85714deg) skew(-72.85714deg);
}
.menu-item:nth-child(17) span { transform: rotate(192.85714deg);
}
.menu-item:nth-child(18) .menu-item-back { transform: rotate(210deg) skew(-72.85714deg);
}
.menu-item:nth-child(18) span { transform: rotate(210deg);
}
.menu-item:nth-child(19) .menu-item-back { transform: rotate(227.14286deg) skew(-72.85714deg);
}
.menu-item:nth-child(19) span { transform: rotate(227.14286deg);
}
.menu-item:nth-child(20) .menu-item-back { transform: rotate(244.28571deg) skew(-72.85714deg);
}
.menu-item:nth-child(20) span { transform: rotate(244.28571deg);
}
.menu-item:nth-child(21) .menu-item-back { transform: rotate(261.42857deg) skew(-72.85714deg);
}
.menu-item:nth-child(21) span { transform: rotate(261.42857deg);
}
.item2 .menu-item-back { border: 0; width: 360px; cursor: default; pointer-events: none;
}
.item2:nth-child(1) .menu-item-back { transform: rotate(56deg) skew(65deg); background: #4378a0;
}
.item2:nth-child(1) .menu-item-back:hover { background: #4378a0;
}
.item2:nth-child(1) .menu-item-back.open { background: #345d7c;
}
.item2:nth-child(2) .menu-item-back { transform: rotate(176deg) skew(30deg); background: #3d3c3c;
}
.item2:nth-child(2) .menu-item-back:hover { background: #3d3c3c;
}
.item2:nth-child(2) .menu-item-back.open { background: #232323;
}
.item2:nth-child(3) .menu-item-back { transform: rotate(-98deg) skew(-4deg); background: #2d934a;
}
.item2:nth-child(3) .menu-item-back:hover { background: #2d934a;
}
.item2:nth-child(3) .menu-item-back.open { background: #216c36;
}
.item2 span { width: 200px; height: auto; transform-origin: 0px 150px;
}
.center { position: absolute; background: #fff; width: 185px; height: 185px; top: 256px; left: 358px; text-align: center; line-height: 185px; border-radius: 50%; font-size: 23px;
}
.show-data { margin-top: 650px; width: 500px; text-align: center; margin-left: 200px; color: #333;
}
h1 { font-size: 25px; color: #333; margin-bottom: 10px;
}
.mtxt { font-size: 20px; position: absolute; color: #fff; pointer-events: none;
}
.mtxt1 { left: 495px; top: 293px; transform: rotate(66deg);
}
.mtxt2 { left: 323px; top: 447px; transform: rotate(26deg);
}
.mtxt3 { left: 300px; top: 264px; transform: rotate(-53deg);
}

Pie Chart - Script Codes JS Codes

$('.menu1 li').hover(function(){ var act = $(this).attr('data-name'); var act2 = $(this).attr('data-title'); $('.show-data').append('<h1>'+act2+'</h1>'+'<div>'+act+'</div>');
},function(){ $('.show-data').children('div,h1').remove();
})
$('.menu-item:nth-child(-n+9) .menu-item-back').hover(function(){ $('.item2:nth-child(1) .menu-item-back').toggleClass('open')
})
$('.mt3 .menu-item-back').hover(function(){ $('.item2:nth-child(3) .menu-item-back').toggleClass('open')
})
$('.mt2 .menu-item-back').hover(function(){ $('.item2:nth-child(2) .menu-item-back').toggleClass('open')
})
$('.mtxt1').arctext({radius: 100});
$('.mtxt2').arctext({radius: 100,dir: -1});
$('.mtxt3').arctext({radius: 100});
Pie Chart - Script Codes
Pie Chart - Script Codes
Home Page Home
Developer Anoop
Username anoopjohn
Uploaded September 06, 2022
Rating 4.5
Size 4,762 Kb
Views 44,528
Do you need developer help for Pie Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anoop (anoopjohn) Script Codes
Name
Vue Web App
Vue App
A Pen by Anoop
Price Slider
Example
Simple jQuery accordion menu
Parallax Effect
Hide select arrow in Firefox
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!