<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Doughnut Chart Maker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
width: 80%;
margin: 0 auto;
text-align: center;
}
.form-container {
width: 80%;
margin: 0 auto;
text-align: center;
}
canvas {
max-width: 100%;
}
</style>
</head>
<body>
<div class="chart-container">
<canvas id="doughnut-chart"></canvas>
</div>
<div class="form-container">
<form>
<label for="chart-title">Chart Title:</label>
<input type="text" id="chart-title" name="chart-title">
<br>
<label for="chart-labels">Chart Labels:</label>
<input type="text" id="chart-labels" name="chart-labels">
<br>
<label for="chart-data">Chart Data:</label>
<input type="text" id="chart-data" name="chart-data">
<br>
<button type="button" id="create-chart">Create Chart</button>
</form>
</div>
<script>
// Get the canvas element and initialize the Chart object
var canvas = document.getElementById('doughnut-chart');
var ctx = canvas.getContext('2d');
var chart;
// Add event listener to create chart button
var createChartBtn = document.getElementById('create-chart');
createChartBtn.addEventListener('click', function() {
// Get chart data from form inputs
var chartTitle = document.getElementById('chart-title').value;
var chartLabels = document.getElementById('chart-labels').value.split(',');
var chartData = document.getElementById('chart-data').value.split(',');
// Create the chart
if (chart) {
chart.destroy();
}
chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: chartLabels,
datasets: [{
label: chartTitle,
data: chartData,
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#4BC0C0',
'#9966FF',
'#FF66CC',
'#C9CBCF',
'#666699',
'#FF9900',
'#33CC99'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
});
</script>
</body>
</html>
No comments:
Post a Comment