Tutorial Membuat Laporan Grafik Sederhana dengan Chart.js - Channel 19

Salah satu hal penting dalam suatu program adalah adanya laporan. Agar tampilan laporan tidak membosankan hanya berisi kumpulan-kumpulan angka saja, kita bisa membuat tampilan laporan menjadi lebih menarik dengan menggunakan grafik. Dalam  artikel kali ini akan dijelaskan bagaimana membuat laporan grafik dengan menggunakan bantuan Chart.js. Bersadarkan informasi dari website resminya di https://www.chartjs.org/. Chart.js memiliki 8 tipe grafik, menggunakan HTML5 Canvas dan juga yang tidak kalah pentingnya adalah sudah responsive.

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.