Posted by 
Yang pertama kali perlu anda lakukan adalah mendownload file Chart.bundle.js. File ini dapat anda download pada link berikut https://github.com/chartjs/Chart.js/releases. Dari percobaan yang saya lakukan hanya cukup diperlukan 1 file ini saja dalam pembuatan laporan nantinya. Setelah mendapatkan file tersebut, letakkan file tersebut pada direktori program anda dan jangan lupa untuk menginclude penggunaan js tersebut dalam file program yang anda buat seperti kode berikut
<script src="Chart.bundle.min.js"></script>
Sesuaikan path file js tersebut sesuai dengan path di mana anda meletakkan file ini dalam direktori program anda.
1.) Bar Chart
Langkah pertama dalam membuat chart adalah dengan menuliskan dahulu element canvas yang digunakan sebagai container untuk menampilkan grafik tersebut.
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
Anda tidak perlu meniru persis contoh kode di atas. Sesuaikan sendiri lebar dari chart maupun id pada canvas yang anda buat. Setelah membuat element container langkah berikutnya adalah menambahkan script seperti contoh kode di bawah ini.
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var 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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Hasil dari kode-kode di atas dapat anda lihat pada gambar di bawah ini
 |
| Bar Chart |
Penjelasan :
var ctx = document.getElementById("myChart").getContext('2d');
Variabel ctx ini digunakan untuk mendapatkan canvas yang tadi kita buat. Sesuaikan kode tersebut dengan id pada canvas yang anda buat jika anda tidak menggunakan id myChart seperti pada contoh.
type: 'bar'
Type digunakan untuk menentukan tipe chart yang anda buat dalam contoh ini adalah bar
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
labels untuk meberikan label pada sumbu X dari chart / grafik. Bisa anda lihat pada gambar di manakan labels ini dituliskan.
data: [12, 19, 3, 5, 2, 3],
data ini berisi angka-angka di mana angka-angka tersebut yang digunakan sebagai nilai dari grafik yang dibuat
backgroundColor:
perintah ini digunakan untuk memberikan warna background dari bar yang anda buat
borderColor:
memberikan warna pada border bar chart yang anda buat
beginAtZero:true
digunakan agar grafik yang anda buat dimulai dari angka 0 pada value di sumbu Y nya.
2.) Line Chart
Langkah pertama dalam membuat chart adalah dengan menuliskan dahulu element canvas yang digunakan sebagai container untuk menampilkan grafik tersebut.
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
Kemudian tambahkan script berikut ini
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
data: [12, 19, 3, 5, 2, 3],
fill: false,
}, {
label: 'My Second dataset',
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
data: [3, 2, 5, 3, 19, 12],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Hasil dari kode di atas akan tampil seperti gambar di bawah ini.
 |
| Line Chart |
Penjelasan :
type: 'line'
Type digunakan untuk menentukan tipe chart yang anda buat dalam contoh ini adalah line
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
labels untuk meberikan label pada sumbu X dari chart / grafik. Bisa anda lihat pada gambar di manakan labels ini dituliskan.
data: [12, 19, 3, 5, 2, 3],
data ini berisi angka-angka di mana angka-angka tersebut yang digunakan sebagai nilai dari grafik yang dibuat
backgroundColor:
perintah ini digunakan untuk memberikan warna background dari bar yang anda buat
borderColor:
memberikan warna pada border bar chart yang anda buat
fill:true
Jika perintah fill ini diisi true maka grafik yang ditampilkan akan diwarna penuh tidak hanya bagian border nya saja. Anda bisa membandingkan hasilnya pada gambar di atas
beginAtZero:true
digunakan agar grafik yang anda buat dimulai dari angka 0 pada value di sumbu Y nya.
Saya memberikan contoh 2 data pada grafik bebentuk Line ini. Cara ini dapat digunakan untuk membandingkan 2 data pada satu waktu. Namun jika anda hanya membutuhkan 1 line saja, silahkan hapus data pada datasets yang memuat My Second dataset.
3.) Doughnut & Pie
Penjelasan mengenai chart doughnut dan pie ini akan saja gabungkan menjadi 1 karena yang berbeda hanya pada type nya saja. Langkah pertama masih sama seperti chart sebelum-sebelumnya yaitu menyiapkan dahulu container untuk menampung grafik ini.
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
Sedangkan kode script yang perlu ditambahkan adalah sebagai berikut :
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [12, 19, 3, 5, 2],
backgroundColor: [
'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)'
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
</script>
Hasil dari keseluruhan kode akan menampilkan grafik seperti gambar di bawah ini
 |
| Doughnut Chart |
Penjelasan :
type: 'doughnut'
Type digunakan untuk menentukan tipe chart yang anda buat dalam contoh ini adalah doughnut. Untuk membuat pie chart gantilah bagian type ini dengan 'pie'.
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
labels untuk meberikan label pada chart / grafik. Bisa anda lihat pada gambar di manakan labels ini dituliskan.
data: [12, 19, 3, 5, 2],
data ini berisi angka-angka di mana angka-angka tersebut yang digunakan sebagai nilai dari grafik yang dibuat
backgroundColor:
perintah ini digunakan untuk memberikan warna background dari bar yang anda buat
Pada contoh ini terdapat beberapa options yang berbeda dari grafik-grafik sebelumnya. Anda bisa mencoba-coba sendiri dengan mengganti value dari options yang saya berikan untuk melihat perubahan-perubahan apa saja yang terjadi.
Berikut ini saya berikan kode lengkap dari keseluruhan file grafik ini sebagai referensi jika anda bingung di mana peletakan kode-kode di atas.
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div style="width:75%;">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [12, 19, 3, 5, 2],
backgroundColor: [
'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)'
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
</script>
</body>
</html>
Demikianlah penjelasan dari artikel Tutorial Membuat Laporan Grafik Sederhana dengan Chart.js ini. Disini saya hanya menjelaskan chart-chart yang pada umumnya cukup sering digunakan dalam membuat laporan saja. Untuk penjelasan lebih lengkapnya mengenai bentuk-bentuk chart yang lain dapat anda baca pada dokumentasi berikut http://www.chartjs.org/docs/latest/. Pada halaman dokumentasi tersebut sudah dijelaskan sangat lengkap mengenai penggunaan chart dan berbagai kode perintah yang disediakan. Namun dalam penggunaan sehari-hari, saya rasa penjelasan pada artikel ini sudah cukup memenuhi kebutuhan tersebut. Semoga penjelasan pada artikel ini cukup mudah dipahami dan selamat mencoba.
comment 0 komentar
more_vert