Edit Slide - eShamba Presentation System

Edit Slide

Chapter

Title

Content

<h3 style="text-align: center; margin-bottom: 30px;">User Feedback from Farmers & Extension Officers</h3>

<div style="max-width: 500px; margin: 0 auto; padding: 20px;">
    <canvas id="satisfactionChart"></canvas>
</div>

<div style="text-align: center; margin-top: 30px; padding: 15px; background-color: rgba(27, 67, 50, 0.3); border-radius: 8px;">
    <p style="color: #95d5b2; font-size: 14px; margin: 5px 0;"><strong>Legend:</strong></p>
    <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
        <span style="color: #4bc0c0;">● Found it Useful (75%)</span>
        <span style="color: #36a2eb;">● Easy to Use (85%)</span>
        <span style="color: #4ade80;">● Would Recommend (90%)</span>
        <span style="color: #f87171;">● Needs Improvement (15%)</span>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById("satisfactionChart");
    new Chart(ctx, {
        type: "doughnut",
        data: {
            labels: ["Found it Useful", "Easy to Use", "Would Recommend", "Needs Improvement"],
            datasets: [{
                data: [75, 85, 90, 15],
                backgroundColor: [
                    "#4bc0c0",
                    "#36a2eb", 
                    "#4ade80",
                    "#f87171"
                ],
                borderWidth: 3,
                borderColor: "#1b4332"
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio: 1.5,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ": " + context.parsed + "%";
                        }
                    }
                }
            }
        }
    });
</script>

Footer

Order

Cancel