<!DOCTYPE html>
<html>
<head>
<title>Pie Chart Maker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Pie Chart Maker</h1>
<canvas id="pieChart" width="400" height="400"></canvas>
<form>
<label for="data">Enter Data (comma separated)</label>
<input type="text" id="data" placeholder="e.g. 10, 20, 30, 40">
<button type="button" onclick="drawChart()">Draw Chart</button>
</form>
</div>
<script>
function drawChart() {
var canvas = document.getElementById("pieChart");
var dataInput = document.getElementById("data");
var data = dataInput.value.split(",").map(function(item) {
return parseInt(item);
});
var total = data.reduce(function(sum, value) {
return sum + value;
}, 0);
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#f1c40f", "#e67e22", "#e74c3c"];
var startAngle = 0;
var endAngle = 0;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < data.length; i++) {
endAngle = startAngle + (data[i] / total) * 2 * Math.PI;
ctx.fillStyle = colors[i % colors.length];
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, endAngle);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.fill();
startAngle = endAngle;
}
}
</script>
</body>
</html>
No comments:
Post a Comment