Automatic SVG Pie-Charts

Developer
Nicolas Udy
Size
4,466 Kb
Views
32,384
  1. Automatic SVG Pie-Charts Previews
  2. Automatic SVG Pie-Charts HTML Codes
  3. Automatic SVG Pie-Charts CSS Codes
  4. Automatic SVG Pie-Charts JS Codes

How do I make an automatic svg pie-charts?

What is a automatic svg pie-charts? How do you make a automatic svg pie-charts? This script and codes were developed by Nicolas Udy on 10 August 2022, Wednesday.

Automatic SVG Pie-Charts Previews
IQ Test

Automatic SVG Pie-Charts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Automatic SVG Pie-Charts</title> <link rel='stylesheet prefetch' href='css/jwmbjg.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Scalable<br/>Responsive<br/>Customizable</h1>
<!-- init with class | % is switched to vw | portion for each slice | flavors in same order, any valid css color syntax/keyword will work -->
<div class="yum-pie" data-pie-size="20%" data-pies="5 35 30 30" data-flavors="#bada55 rgb(51,53,57) hsl(220,7%,35%) lightslategray"></div>
<h1>SVG Pie-Charts<br/>in your HTML</h1>
<h2></h2> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Automatic SVG Pie-Charts - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300);
body {	font-family: Lato-Light, sans-serif;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	color: #333539;	background: #D15E4F;	text-align: center;
}
div {	margin: 0 60px;
}

Automatic SVG Pie-Charts - Script Codes JS Codes

yumPie = {	bake: function() {	$('div.yum-pie').each(function() {	var cut = $(this).data('pie-size').split('');	if (cut[cut.length-1] === '%') cut[cut.length-1] = 'vw';	var size = cut.join([,]);	var pies = $(this).data('pies').split(' ');	var flavors = $(this).data('flavors').split(' ');	var lastpie = 0;	$(this).css({width: size, height: size});	$('body').prepend('<style>div.yum-pie{overflow:hidden;border-radius:50%;}svg.pie{position:absolute;top:0;left:0;transform:rotate(-90deg)scale(2);}</style>');	for (i = 0; i < pies.length; i++) {	var percent = parseFloat(pies[i])+lastpie;	var leftover = 100-percent;	var baked = percent + ' ' + leftover;	var svg = '<svg class="pie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="100%" height="100%"><g>';	var pie = '<circle cx="32" cy="32" r="16" fill="none" stroke="' + flavors[i] + '" stroke-width="32" stroke-dasharray="' + baked + '"/>';	var end = '</g></svg>'	$(this).prepend(svg+pie+end);	lastpie = percent;	}	});	}
}
yumPie.bake();
Automatic SVG Pie-Charts - Script Codes
Automatic SVG Pie-Charts - Script Codes
Home Page Home
Developer Nicolas Udy
Username udyux
Uploaded August 10, 2022
Rating 3
Size 4,466 Kb
Views 32,384
Do you need developer help for Automatic SVG Pie-Charts?

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!

Nicolas Udy (udyux) Script Codes
Name
Transforming hover buttons
SVG Draw-in effect
CSS only Select
Circle icons to text on hover
Simple Stopwatch
MiniMarkdown.JS
Snipcart CSS Animations
ES6 Game of Snek
CSSkateboard loading screen
SVG Analog Clock
Create amazing art & images 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!