Halo semuanya, kembali lagi di tulisan saya. 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.fromsunda.eu.org/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 tulisan saya. 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 tulisan saya. Sekian dan sampai jumpa.
Posting Komentar