Tutorial Library Chart : Penggunaan Library Chart.js Untuk Membuat Laporan Dalam Bentuk Diagram/grafik
 |
| Penggunaan Library Chart.js Untuk Membuat Laporan Dalam Bentuk Diagram/grafik |
Chart atau yang biasa kita sebut dengan istilah grafik merupakan kumpulan data dari beberapa table yang disajikan atau ditampilkan dalam bentuk gambar seperti persegi, lingkaran, tabung, garis, balok dan lain sebagainya agar informasi mengenai suatu data dapat diterima secara visual.
Chart.js
Chart.js adalah salah satu library yang mendukung grafik dengan ukuran yang ringan. Library ini sangat sederhana untuk menggambarkan grafik garis (line), batang (bar), area, bentuk donat (donut charts) dan lain sebagainya. Pada versi sebelumnya, library ini mudah di unduh dan langsung dapat digunakan, namun apabila anda menggunakan release versi 4 (terbaru), anda dapat menggunakan NPM maupun file dari CDN. Pada contoh disini nantinya kita akan menggunakan file yang di unduh dari CDN.
Penggunaan Chart.js
Sebelum menggunakan chart.js tentunya kita unduh terlebih dahulu library tersebut di chartjs.org kemudian klik tombol Documentation lalu pilih menu Getting Started -> Installation. Pada halaman Instalasi, karena kita akan menggunakan file dari CDN maka gulir mouse pada bagian CDN dan klik https://cdnjs.com/libraries/Chart.js maka anda akan di arahkan pada halaman yang berisi daftar javascript chart.js. Kemudian pilih dan copy link yang berisi chart.js yakni https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.js, buka pada tab baru di browser lalu unduh (ctrl+S) script tersebut dan buat folder chart kemudian simpan di dalam folder tersebut.
Kembali ke halaman utama chartjs.org kemudian pilih tombol Documentation lalu pilih menu Getting Started -> Getting Started. Pada halaman ini kita dapat melihat panduan bagaimana membuat grafik dari library chart.js. Anda dapat memulai dengan mengetikkan beberapa baris kode seperti di bawah ini lalu simpan dengan nama chart.html di dalam folder yang sama yang telah kita buat sebelumnya.
<html>
<head>
<title>chart</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
//background-color & border-color
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Dari syntax di atas, apabila di buka di browser maka hasilnya akan nampak seperti gambar di bawah.
Apabila anda ingin mengkreasikan menjadi berbagai warna pada tiap masing-masing batang grafik, maka anda dapat menambahkan script pada bagian //background-color & border-color dengan script seperti berikut
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
Sehingga secara keseluruhan syntaxnya menjadi seperti berikut
<html>
<head>
<title>chart</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Setelah kita mengetahui bagaimana cara menggunakan library chart.js ini, selanjutnya kita dapat implementasikan ke dalam project aplikasi kita.
Note :
Dalam beberapa hari terakhir ini, penulis mencoba tutorial ini dengan file rujukan yang bersumber dari https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.js akan tetapi nyatannya browser tidak menampilkan grafik, entah kemungkinan ada script yang hilang. Maka dari itu penulis membuka kembali dokumentasi dari chartjs.org dan disana terdapat file rujukan yakni https://cdn.jsdelivr.net/npm/chart.js, maka anda dapat menggunakan file js tersebut. Anda dapat menemukan file ini dari halaman https://www.chartjs.org/docs/latest/getting-started/.
