ChartJs Dengan Data JSON Ajax CodeIgniter

Jadi untuk Statistik penggunaan Chart pada web, sebaiknya menggunakan data dengan format JavaScript Object Nation (JSON) karena memang format bawaan asli dari library ChartJS untuk memuat data adalah dengan format JSON, ya walaupun dengan PHP juga bisa, tetapi alangkah lebih jika penggunaanya realtime karena kita butuh data yang cepat dan efisien apalagi untuk yang sifatnya statistik ya.

Ruang Lingkup Tools yang digunakan dalam contoh ini:

  • Data dengan format JSON
  • Chart dengan library ChartJS
  • Ajax JQuery versi 3.4.1
  • CodeIgniter 3 Stable

Inisialisasi Penggunaan:

Kita punya data dari database misal dengan table tb_peraturan dan dengan column:

  • id
  • judul
  • jenis
  • tahun

dengan data:

  • 1 | Kejaksaan Negri | Perda | 2018
  • 2 | Aturan Pemerintah | Perda | 2018
  • 3 | Kebijakan Tanah | Pergub | 2019
  • 4 | Izin Tugas | Perda | 2019

Kasus: Menampilakn data Chart type bar dengan label tahun dan ada berapa jumlah berdasarkan jenis perda atau pergub?

Kita gunakan query berikut:

SELECT DISTINCT(tahun), COUNT(id) as jumlahdata FROM tb_peraturan WHERE jenis= "perda" GROUP BY tahun

Query tersebut akan menghasilkan data:

Tahun 2018 Jumlahdata 2
Tahun 2019 Jumlahdata 1 

Lalu data tersebut kita ubah dalam Format JSON:

[{"thntetap":"2018","jumlahdata":"2"},{"thntetap":"2019","jumlahdata":"1"}]

Pastikan data JSON tersebut dapat dipanggil di URL khusus yang memang sudah kita buat untuk menampilkan data dari query SQL tadi yang kemudian di Encode kedalam bentuk JSON, karena url ini akan digunakan pada atribut URL pada ajax untuk mendapatkan datanya.

Berikutnya adalah code program html, ChartJS dan juga AJAX JQuerynya.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>

    <h4>Grafik Perkembangan Jumlah Perda & Pergub Pertahun</h4>
    <div>
        <canvas id="perda"></canvas>
    </div>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: "http://localhost/jdih_webservice/Api/jumlahperda",
                method: "GET",
                success: function(data) {
                    console.log(data);
                    var label = [];
                    var value = [];
                    for (var i in data) {
                        label.push(data[i].tahun);
                        value.push(data[i].jumlahdata);
                    }
                    var ctx = document.getElementById('perda').getContext('2d');
                    var chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: label,
                            datasets: [{
                                label: 'Jumlah Peraturan Daerah',
                                backgroundColor: 'rgb(252, 116, 101)',
                                borderColor: 'rgb(255, 255, 255)',
                                data: value
                            }]
                        },
                        options: {}
                    });
                }
            });
        });
    </script>

</body>

</html>

Nah Hasilnya kurang lebihnya seperti ini:

Data Tahunnya Lebih banyak sesuai data

Untuk dokumentasi:

ChartJS

Leave a Reply

Your email address will not be published. Required fields are marked *