Spaces:
Running
Running
File size: 2,709 Bytes
cce2a89 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Font Awesome Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</head>
<body>
<div class="container">
<canvas id="paretoChart"></canvas>
</div>
</body>
<script>
// Sample data for the Pareto diagram
var data = {
labels: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E'],
datasets: [
{
label: 'Frequency',
data: [15, 10, 25, 5, 30],
backgroundColor: 'rgba(75, 192, 192, 0.7)',
yAxisID: 'primary',
},
],
};
// Calculate cumulative percentage
var cumulativePercentage = [0];
var total = data.datasets[0].data.reduce((acc, value) => acc + value, 0);
data.datasets[0].data.forEach(value => {
cumulativePercentage.push((cumulativePercentage[cumulativePercentage.length - 1] + value) / total * 100);
});
// Create the secondary dataset for the cumulative percentage line
data.datasets.push({
label: 'Cumulative Percentage',
data: cumulativePercentage,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
yAxisID: 'secondary',
type: 'line',
});
// Get the canvas context
var ctx = document.getElementById('paretoChart').getContext('2d');
// Create the multi-axis Pareto diagram with options
var paretoChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
display: true,
title: {
display: true,
text: 'Categories',
},
},
primary: {
type: 'linear',
position: 'left',
beginAtZero: true,
display: true,
title: {
display: true,
text: 'Frequency',
},
},
secondary: {
type: 'linear',
position: 'right',
beginAtZero: true,
display: true,
title: {
display: true,
text: 'Cumulative Percentage (%)',
},
grid: {
drawOnChartArea: false, // Hide grid lines for the secondary axis
},
},
},
plugins: {
legend: {
display: true,
},
},
},
});
</script>
</html>
|