Halo semuanya, kembali lagi di tulisan saya. Baiklah pada kesempatan kali ini kita akan belajar cara membuat bar chart atau diagram batang dengan menggunakan bahasa pemrograman php dan data api corona Indonesia. Penasaran?, ayo ikuti selengkapnya berikut ini.



Pada artikel tutorial kali ini kita akan membuat sebuah diagram batang yang datanya bersumber dari data.covid19.go.id. Data covid ini aktual dan terpercaya, karena sumbernya dari pemerintah langsung. Di dalam diagram batang nanti kita akan menampilkan sebaran corona di Indonesia berdasarkan masing-masing provinsi. Untuk hasilnya, bisa kalian lihat langsung di akhir artikel tutorial ini.

Berikut ini adalah tampilan data api yang kita ambil dari https://data.covid19.go.id/public/api/prov.json, data yang kita butuhkan adalah data provinsi yang nantinya akan menjadi label dan data jumlah kasus yang nantinya akan dipresentasikan sebagai bar atau batang.

membuat chart js dengan php
Data covid di Indonesia


Data yang terlihat pada gambar di atas adalah data yang sudah diformat menggunakan chrome extension yang bernama JSON Viewer. Jadi jika hasil data api yang tampak di google chrome kalian berantakan silahkan install chrome extension yang saya rekomendasikan di atas agar tampilannya lebih rapih dan mudah dibaca.

Baca Artikel Lain ✨
📰 1. Study Case : Membuat Website Berita dengan menggunakan NewsAPI dan Bootstrap read more
📰 2. Cara Memuat Website Pencarian Trending dengan Google Trends dan Php read more
📰 3. Apa itu Brute Force Attack dan Berikut Tips Manjur Untuk Mencegahnya Komputer read more


Cara Membuat Diagram Batang dengan Chart Js dan Bahasan Php

1. Buatlah sebuah folder baru dengan nama diagram_corona di dalam folder htdocs. Lalu buat file dengan nama index.php di dalamnya. Silahkan copy script di bawah ini dan paste ke dalam file terebut.


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-4">
        <nav class="navbar navbar-light bg-light mb-4">
            <span class="navbar-brand mb-0 h1"> Grafik Corona</span>
        </nav>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <!-- diagram batang akan kita tampilkan disini, untuk detail kodigannya ada di bagian bawah -->
                        <canvas id="myChart2"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        //mebuat chart
        var myChart2 = new Chart(
            //masukan chart ke element canvas dengan id myChart2
            document.getElementById('myChart2'),
            {
                //tipe chart yg digunakan adalah bar chart
                type: 'bar',
                data: {
                    //data labels akan diganti dengan data api nanti
                    labels: ['label 1', 'label 2'],
                    datasets: [{
                        label: 'Jumlah Sebaran Corona Per-Provinsi',
                        //data akan diganti dengan data api nanti
                        data: [10, 20],
                        //semua bar akan diwarnai dengan warna merah
                        backgroundColor: [
                        'rgb(255, 99, 132)',
                        ],
                        hoverOffset: 4
                    }]
                }
            }
        );
    </script>
</body>

</html>

Jika kalian jalankan, maka hasilnya akan tampak seperti gambar di bawah ini.Yaitu tampilan sederhana dengan header 'grafik corona' lalu di bawahnya terdapat diagram batang.

membuat diagram chart js dan php
Contoh diagram dengan data dummy



Data yang tampak pada gambar di atas adalah data dummy, nantinya akan kita ganti dengan data api yang sebenarnya. Bar atau batang pada gambar di atas akan kita ganti menjadi total kasus, sedangkan label yang berada di bawah batang tersebut akan kita ganti dengan nama-nama provinsi.

2. Tambahkan script php di bawah ini di bawah tag <body>. Script ini berfungsi untuk mengambil data json yang nantinya siap digunakan ke dalam grafik.


<?php
    //inisialisai curl untuk digunakan
    $curl = curl_init();
    //set URL
    curl_setopt($curl, CURLOPT_URL, "https://data.covid19.go.id/public/api/prov.json");
    //kembalikan nilai menjadi string
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    //eksekusi curl dan masukan data ke dalam variabel output
    $output = curl_exec($curl);

    curl_close($curl);

    //simpan output ke dalam variabel data
    $data = json_decode($output, true);
?>

Untuk penjelasannya sudah saya sertakan pada script di atas. Tapi jika kalian merasa kurang paham, silahkan tanya langsung di kolom komentar di bawah ini.


3. Langkah selanjutnya adalah menampilkan data provinsi dan jumlah kasus ke dalam chart. Silahkan copy script di bawah ini dan replace script labels: ['label 1', 'label 2'],


labels: [
    <?php
        //melakukan perulangan data provinsi
        //data provinsi digunakan sebagai label
        foreach($data['list_data'] as $provinsi){
            echo '"'.$provinsi['key'].'",';
        }

    ?>
],

4. Langkah selanjtunya adalah menampilkan jumlah kasus di tiap provinsi. Silahkan copy script di bawah ini dan replace script data: [10, 20],


data: [
    <?php
        //melakukan looping data jumlah kasus tiap provinsinya
        //data kasus digunakan sebagai bar atau batang nantinya
        foreach($data['list_data'] as $kasus){
            echo '"'.$kasus['jumlah_kasus'].'",';
        }
    ?>
],


Sekarang jalankan project kalian, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
membuat chart js dan php
Hasil Akhir



Bagi yang kesulitan mengikuti tahapan di atas, saya sediakan script lengkapnya di bawah ini. 


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>

<body>
    <?php
        //inisialisai curl untuk digunakan
        $curl = curl_init();
        //set URL
        curl_setopt($curl, CURLOPT_URL, "https://data.covid19.go.id/public/api/prov.json");
        //kembalikan nilai menjadi string
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        //eksekusi curl dan masukan data ke dalam variabel output
        $output = curl_exec($curl);

        curl_close($curl);

        //simpan output ke dalam variabel data
        $data = json_decode($output, true);
    
    ?>
    <div class="container mt-4">
        <nav class="navbar navbar-light bg-light mb-4">
            <span class="navbar-brand mb-0 h1"> Grafik Corona</span>
        </nav>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <!-- diagram batang akan kita tampilkan disini, untuk detail kodigannya ada di bagian bawah -->
                        <canvas id="myChart2"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //mebuat chart
        var myChart2 = new Chart(
            //masukan chart ke element canvas dengan id myChart2
            document.getElementById('myChart2'),
            {
                //tipe chart yg digunakan adalah bar chart
                type: 'bar',
                data: {
                    //data labels akan diganti dengan data api pada script berikutnya
                    labels: [
                        <?php
                            //melakukan perulangan data provinsi
                            //data provinsi digunakan sebagai label
                            foreach($data['list_data'] as $provinsi){
                                echo '"'.$provinsi['key'].'",';
                            }

                        ?>
                    ],
                    datasets: [{
                        label: 'Jumlah Sebaran Corona Per-Provinsi',
                        //data akan diganti dengan data api pada script berikutnya
                        data: [
                            <?php
                                //melakukan looping data jumlah kasus tiap provinsinya
                                //data kasus digunakan sebagai bar atau batang nantinya
                                foreach($data['list_data'] as $kasus){
                                    echo '"'.$kasus['jumlah_kasus'].'",';
                                }
                            ?>
                        ],
                        //semua bar akan diwarnai dengan warna merah
                        backgroundColor: [
                        'rgb(255, 99, 132)',
                        ],
                        hoverOffset: 4
                    }]
                }
            }
        );
    </script>
</body>

</html>


Sekian tutorial cara membuat diagram batang chart js, php dan data api corona Indonesia. Semoga tutorial ini bermanfaat. Jika ada yang ingin ditanyakan silahkan tanya langsung di kolom komentar di bawah ini. Sampai jumpa di tutorial menarik lainnya.


Tags

Post a Comment

Posting Komentar

Lebih baru Lebih lama