Cara Membuat Line Chart dengan php dan Data Covid 19

Share:
Cara Membuat Line Chart dengan php dan Data Covid 19
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara menggunakna line charrt chartjs dengan menggunakan data json corona resmi dari pemerintah. Penasaran?, ayo ikuti selengkpannya berikut ini.


Tutorial yang saya tulis kali ini mirip dengan tutorial yang pernah saya tulis di link ini https://www.sahretech.com/2021/08/membuat-diagram-batang-chart-js-php-dan.html. Perbedaannya, pada tutorial kali ini kita akan menggunakan diagram garis atau line chart dari chartjs. Selain chartnya yang berbeda, struktur data json yang kita olah juga sedikit berbeda. 

Jadi mudah-mudahan tutorial kali ini bisa memberikan gambaran kepada kalian bagaimana mengolah data json dengan format yang berbeda jika kalian nantinya bekerja dengan data json yang lebih kompleks.

Baca Artikel Lain ✨
📰 1. Cara Mudah Membuat File Manager pada Laravel read more
📰 2. Cara Upload Website ke Hosting Gratis dengan Github Pages read more
📰 3. Aplikasi LMS Terbaik dan Terpopuler Buat Belajar Online Sekolah dan Kampus read more



Cara Membuat Line Chart dengan Data Covid 19.

1. Silahkan buat sebuah file baru di dalam folder htdocs dengan nama index.php lalu ikuti scriptnya seperti 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> <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> <!-- diagram garis akan kita tampilkan disini --> <canvas id="myChart2"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <script> //mebuat chart var myChart2 = new Chart( //masukan chart ke element canvas dengan id myChart2 document.getElementById('myChart2'), { //tipe chart yg digunakan adalah line chart atau diagram garis type: 'line', data: { //data labels akan diganti dengan data api pada step berikutnya labels: [ "1-12-2021", "2-12-2021", "3-12-2021", "4-12-2021", "5-12-2021", "6-12-2021", "7-12-2021", "8-12-2021", "9-12-2021", "10-12-2021" ], datasets: [{ label: 'Jumlah Sebaran Corona Setiap Hari', //data akan diganti dengan data api pada step berikutnya data: [ 100,200,300,400,500,600,700,800,900,1000 ], //line akan diwarnai dengan warna merah backgroundColor: [ 'rgb(255, 99, 132)', ], hoverOffset: 4 }] } } ); </script> </body> </html>


Ok, selanjutnya save dan jalankan di browser kalian. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
Tampilan Line Chart Js
Tampilan Line Chart
Gambar di atas adalah contoh diagram garis dengan menggunakan data dummy. Di tahap selanjutnya kita perlu merubah data dummy tersebut dengan data yang sesungguhnya.


2. copy script di bawah ini dan paste tepat di bawah tag <body>. Script di bawah ini berfungsi untuk menangkap data json, dan mengkonversi data json ke data objek php. Untuk penjelasan lengkapnya saya tulis di setiap baris pada script di bawah ini.
    

<?php //inisialisai curl untuk digunakan $curl = curl_init(); //set URL curl_setopt($curl, CURLOPT_URL, "https://data.covid19.go.id/public/api/update.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); ?>



3. Ok, selanjutnya kita perlu mengganti data dan label yang ada di dalam script chart jsnya. Amati dan tiru apa yang harus dirubah dari script sebelumnya dengan script yang ada di bawah ini. Untuk penjelasan sudah saya tulis di setiap baris script di bawah.
    

<script> //mebuat chart var myChart2 = new Chart( //masukan chart ke element canvas dengan id myChart2 document.getElementById('myChart2'), { //tipe chart yg digunakan adalah line chart atau diagram garis type: 'line', data: { //data labels akan diganti dengan data api pada script berikutnya labels: [ <?php //melakukan perulangan data tanggal //data tanggal digunakan sebagai label //menggunakan strtotime untuk menghapus jam dan mengambil tanggalnya saja foreach($data['update']['harian'] as $value){ echo '"'.date('d-m-Y', strtotime($value['key_as_string'])).'",'; } ?> ], datasets: [{ label: 'Jumlah Sebaran Corona Setiap Hari', //data akan diganti dengan data api pada script berikutnya data: [ <?php //melakukan looping data jumlah kasus positif setiap hari //data kasus positif digunakan sebagai garis atau line nantinya foreach($data['update']['harian'] as $kasus){ echo '"'.$kasus['jumlah_positif']['value'].'",'; } ?> ], //line akan diwarnai dengan warna merah backgroundColor: [ 'rgb(255, 99, 132)', ], hoverOffset: 4 }] } } ); </script>



4. Jika kalian merasa kesulitan mengikuti step demi step yang ada di atas. Saya sediakan script lengkapnya di bawah ini. Silahkan copy dan paste.

    

<!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/update.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> <!-- diagram garis akan kita tampilkan disini, untuk detail kodigannya ada di bagian bawah --> <canvas id="myChart2"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <script> //mebuat chart var myChart2 = new Chart( //masukan chart ke element canvas dengan id myChart2 document.getElementById('myChart2'), { //tipe chart yg digunakan adalah line chart atau diagram garis type: 'line', data: { //data labels akan diganti dengan data api pada script berikutnya labels: [ <?php //melakukan perulangan data tanggal //data tanggal digunakan sebagai label //menggunakan strtotime untuk menghapus jam dan mengambil tanggalnya saja foreach($data['update']['harian'] as $provinsi){ echo '"'.date('d-m-Y', strtotime($provinsi['key_as_string'])).'",'; } ?> ], datasets: [{ label: 'Jumlah Sebaran Corona Setiap Hari', //data akan diganti dengan data api pada script berikutnya data: [ <?php //melakukan looping data jumlah kasus positif setiap hari //data kasus positif digunakan sebagai garis atau line nantinya foreach($data['update']['harian'] as $kasus){ echo '"'.$kasus['jumlah_positif']['value'].'",'; } ?> ], //line akan diwarnai dengan warna merah backgroundColor: [ 'rgb(255, 99, 132)', ], hoverOffset: 4 }] } } ); </script> </body> </html>




Ok sampai disini semua step sudah kita lalui, tiba saatnya melakukan uji coba. SIlahkan jalankan project ini dengan browser kesayangan kalian. Jika berhasil maka tampilannya akan tampak seperti di bawah ini.
Cara membuat line chart dengan data covid 19
Hasil Akhir Line Chart




Gimana mudah atau susah guys?. Sekian tutorial kali ini tentang bagaimana cara menggunakan line chart dengan php dan data covid 19. Semoga bermanfaat. Jika ada kesulitan silahkan tanya di kolom komentar di bawah ini atau langsung tanya di fanspage sahretech. Sekian dan sampai jumpa.


No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik