Pie Chart Maker Tool Script 100% Free To Download
100% Free To Download This Script.
100% Free With “Rana Bilal Rights”.
Sell These Tools S As Per Your Need Or Offer Free To Anyone Give Giveaway Also.
About : Free Tools.
License: Rana bilal Rights
Use In This Website Any Script Or Any Products You Will Download 100% Free To Use.
How To Use This Script
Use This Script WordPress Or Blogger Anyone You Choose Use This Script And Publish Your Online Tool And Make Passive Income.
Login Your WordPress Or Blogger Dashboard.
Copy This Code Or Download.
And Post Or Page.
Add HTML Widget.
Paste This Code And Publish.
After See The Result, Magic..
Demo
Script Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Maker</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
#container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
margin-bottom: 10px;
display: block;
}
input {
padding: 8px;
margin-bottom: 15px;
}
#drawButton {
padding: 10px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h2>Pie Chart Maker</h2>
<label for="dataInput">Enter Data (comma-separated values):</label>
<input type="text" id="dataInput" placeholder="e.g., 30, 40, 50">
<button onclick="drawPieChart()" id="drawButton">Draw Pie Chart</button>
<svg id="pieChart" width="300" height="300"></svg>
</div>
<script>
function drawPieChart() {
const dataInput = document.getElementById("dataInput").value;
const dataArray = dataInput.split(",").map(Number);
const total = dataArray.reduce((acc, curr) => acc + curr, 0);
let startAngle = 0;
const svg = document.getElementById("pieChart");
svg.innerHTML = "";
for (let i = 0; i < dataArray.length; i++) {
const sliceAngle = (dataArray[i] / total) * 360;
const endAngle = startAngle + sliceAngle;
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", describeArc(150, 150, 100, startAngle, endAngle));
path.setAttribute("fill", getRandomColor());
svg.appendChild(path);
startAngle = endAngle;
}
}
function describeArc(x, y, radius, startAngle, endAngle) {
const startRadians = (startAngle - 90) * Math.PI / 180;
const endRadians = (endAngle - 90) * Math.PI / 180;
const largeArcFlag = endRadians - startRadians <= Math.PI ? "0" : "1";
const x1 = x + radius * Math.cos(startRadians);
const y1 = y + radius * Math.sin(startRadians);
const x2 = x + radius * Math.cos(endRadians);
const y2 = y + radius * Math.sin(endRadians);
return [
"M", x, y,
"L", x1, y1,
"A", radius, radius, 0, largeArcFlag, 1, x2, y2,
"Z"
].join(" ");
}
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
