<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<style>
  #chartContainer {
    position: relative;
    height: 670px; 
    max-width: 1520px; 
    margin: 0px auto;
  }
  #chartSubtitle {
    position: absolute;
    bottom: 30px; /* Naikkan sedikit dari bawah */
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold; /* Tambahkan gaya tebal */
    text-align: center;
  }
</style>
<script>
window.onload = function () {
    $.ajax({
        url: "countresult.php", // Ganti dengan path ke skrip PHP Anda
        method: "GET",
        dataType: "json",
        success: function(data) {
            // Buat dataPoints dengan nilai kuantitas yang sebenarnya
            var dataPoints = [
                { label: "Email Receiving", y: data.emailReceiving },
                { label: "Open Mail", y: data.openMail },
                { label: "Click Link", y: data.clickLink },
                { label: "Open Web", y: data.openWeb }
            ];

            var options = {
                animationEnabled: true,
                title: {
                    text: "Spam Interaction Analyzer"
                },
                data: [{
                    type: "doughnut",
                    innerRadius: "20%",
                    showInLegend: true,
                    legendText: "{label}",
                    indexLabel: "{label}: {y}",
                    dataPoints: dataPoints
                }]
            };
            $("#chartContainer").CanvasJSChart(options);
            
            // Tambahkan subtitle dengan posisi tengah bawah
            var subtitle = $('<div id="chartSubtitle">Target: 502 Emails</div>');
            $("#chartContainer").append(subtitle);
        },
        error: function(error) {
            console.log("Error: ", error);
        }
    });
}
</script>
</head>
<body>
<div id="chartContainer"></div>
</body>
</html>
