<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLT Simulator - Chart.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial; margin: 40px; }
#chart { width: 900px; height: 500px; }
</style>
</head>
<body>
<h1>Central Limit Theorem - Chart.js Demo</h1>
<p>Visualization of the distribution of means from a CLT simulation.</p>
<canvas id="chart"></canvas>
<script>
async function loadData() {
const response = await fetch('../web-demo.php?samples=10000&size=30');
const data = await response.json();
const means = data.means;
// ?????????? bins ??? histogram
const bins = {};
means.forEach(m => {
const key = m.toFixed(2);
bins[key] = (bins[key] || 0) + 1;
});
const labels = Object.keys(bins);
const values = Object.values(bins);
new Chart(document.getElementById('chart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Frequency',
data: values,
backgroundColor: 'rgba(0, 99, 255, 0.5)'
}]
},
options: {
scales: {
x: { title: { display: true, text: 'Sample Means' } },
y: { title: { display: true, text: 'Frequency' } }
}
}
});
}
loadData();
</script>
</body>
</html>
|
Download
