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 |
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.
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.
 |
| 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
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi