<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doughnut Chart Maker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js">
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
#chart-container {
max-width: 600px;
width: 100%;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="doughnut-chart"></canvas>
<button onclick="updateChart()">Update Chart</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="your_script.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function() {
// Initial data for the doughnut chart
var initialData = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
data: [30, 40, 30],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
};
// Create the doughnut chart
var ctx = document.getElementById('doughnut-chart').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: initialData,
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom'
}
}
});
// Function to update chart data
window.updateChart = function() {
var newData = {
labels: ['New Label 1', 'New Label 2', 'New Label 3'],
datasets: [{
data: [20, 50, 30],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
};
// Update chart data
myDoughnutChart.data = newData;
myDoughnutChart.update();
};
});