Halo semuanya, kembali lagi di sahretech. 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.
|
| 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.
 |
| 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.
 |
| 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.
Assalamualaikum,mas ini blog nya bagus banget,tapi saya mau tanya kalo API nya beda sumber yang di ganti apa saja ya soalnya saya mau pake API lain hehe thanks
ReplyDeletewaalaikumsalam, terima kasih mas atas kunjugannya. klo beda api, pertama pastikan struktur jsonnya sama dengan api yang saya pake. yang kedua ganti keynya sesuai dengan api yang baru. jika masnya belum paham, bisa baca-baca lagi mengenai api, pengertian api, fungsi api, struktur api, dan cara mennggunakan api di internet.
Deleteterima kasih :)