<?php
session_start();
require 'header.php';
?>
<!DOCTYPE html>
<html>

<head>
    <title>GRAFIK</title>
    <script type="text/javascript" src="chartjs/Chart.js"></script>
</head>

<body>
    <style type="text/css">
        body {
            font-family: roboto;
        }

        table {
            margin: 0px auto;
            width: 500px;

        }
    </style>


    <center>
        <h2>GRAFIK KESELURUHAN KELUHAN YANG DIBERIKAN USER</h2>
    </center>


    <div style="width: 800px;margin: 0px auto;">
        <canvas id="myChart"></canvas>
    </div>

    <br />
    <br />

    <table border="1">
        <thead>
            <tr>
                <th>No</th>
                <th>Jenis Keluhan</th>
                <th>Jumlah Keluhan</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $no = 1;
            $data = mysqli_query($conn, "select * from keluhan");
            ?>
            <?php
            $jenis = query("SELECT * FROM jeniskeluhan");
            ?>
            <?php foreach ($jenis as $key) : ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td><?php echo $key['jenis']; ?></td>
                    <td><?php
                        $d = mysqli_fetch_array($data);
                        $a = $key['id_jenis'];
                        $jumlah = mysqli_query($conn, "select * from keluhan where id_jenis=  $a ");
                        echo mysqli_num_rows($jumlah);
                        ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            <?php
            ?>
        </tbody>
    </table>


    <script>
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Bantuan Masyarakat", "Insfrastruktur Buruk", "Layanan Kesehatan", "Pemungutan Liar", "Petugas tidak ramah", "Tindakan KKN"],
                datasets: [{
                    label: '',
                    data: [
                        <?php
                        $jumlah_1 = mysqli_query($conn, "select * from keluhan where id_jenis= 1 ");
                        echo mysqli_num_rows($jumlah_1);
                        ?>,
                        <?php
                        $jumlah_2 = mysqli_query($conn, "select * from keluhan where id_jenis= 2 ");
                        echo mysqli_num_rows($jumlah_2);
                        ?>,
                        <?php
                        $jumlah_3 = mysqli_query($conn, "select * from keluhan where id_jenis= 3 ");
                        echo mysqli_num_rows($jumlah_3);
                        ?>,
                        <?php
                        $jumlah_4 = mysqli_query($conn, "select * from keluhan where id_jenis= 4 ");
                        echo mysqli_num_rows($jumlah_4);
                        ?>,
                        <?php
                        $jumlah_5 = mysqli_query($conn, "select * from keluhan where id_jenis= 5 ");
                        echo mysqli_num_rows($jumlah_5);
                        ?>,
                        <?php
                        $jumlah_6 = mysqli_query($conn, "select * from keluhan where id_jenis= 6 ");
                        echo mysqli_num_rows($jumlah_6);
                        ?>
                    ],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(75, 92, 192, 0.2)',
                        'rgba(75, 195, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
</body>

</html>

</html>

<?php
require 'footer.php';
?>