Skill Level
Beginner
Categories
Web Development
Reading Time
5 minutes, 54 seconds
Technology
JavaScript
Framework
No framework
Library
Chart.js
Tutorial Membuat Line Chart Dengan Chart.js

Sebelumnya, kami ingin mengucapkan selamat Hari Raya Idul Fitri 1439 H, mohon maaf lahir dan batin. Semoga kamu dalam keadaan sehat selalu ya, Jon.

Baik, mungkin kamu pernah dengar Chart.js atau belum sama sekali? Ok, tidak masalah. Chart.js merupakan salah satu library JavaScript untuk membuat berbagai macam chart berbasis HTML5. Jadi, dengan library ini kamu dapat membuat berbagai macam jenis chart hanya dengan library ini saja, tanpa harus meng-install library yang berbeda.

Cara kerja library ini adalah menggunakan HTML5 Canvas, chart yang kamu initialize pada JavaScript dengan library ini maka akan dimanipulasi ke dalam tag HTML5 Canvas, dalam kata lain, 1 tag HTML5 Canvas untuk 1 chart.

Chart.js memiliki beberapa macam jenis chart, diantaranya adalah:

  • Line
  • Bar
  • Radar
  • Doughnut and Pie
  • Polar Area
  • Bubble
  • Scatter
  • Area
  • Mixed

Kita akan coba implementasikan Chart.js untuk jenis line saja, karena jenis yang lain tidak beda jauh cara implementasinya.

Let’s go …

Memulai

Chart.js bisa kamu dapatkan di chartjs.org atau kamu dapat menggunakan Content Delivery Network (CDN) dari cdnjs.com. Dalam kasus ini saya akan menggunakan CDN agar lebih mudah dan saya akan menggunakan JSFiddle dalam implementasinya agar dapat dilihat langsung hasil jadinya.

Untuk memulai implementasi, silakan buat file HTML baru pada text editor favorit kamu, lalu sisipkan kode berikut sebelum tag </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

Maka untuk memulai membuat chart dengan jenis line, maka gunakan kode berikut.

<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<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: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
            borderWidth: 1
        }]
    }
});
</script>

Hasilnya akan seperti berikut,

Mari kita bahas kode-kode di atas, agar lebih jelas dan lebih paham lagi.

  1. Baris pertama terdapat kode <canvas id="myChart" width="400" height="200"></canvas>kode ini merupakan tag dari HTML5 dan nantinya akan dimanipulasi oleh Chart.js menjadi sebuah chart dengan tampilan yang sesuai dengan pada saat kita menginisialisasi chart tersebut.
  2. Lalu ada kode berikut var ctx = document.getElementById("myChart").getContext('2d');kode ini untuk mengidentifikasikan elemen canvas mana yang akan digunakan untuk menampilkan sebuah chart. .getContext()merupakan sebuah method yang memiliki return drawing context, dengan method ini nantinya Chart.js akan di-allow untuk menggambar chart yang sesuai dengan pada saat kita menginisialisasi chart tersebut.
  3. Lalu ada kode berikut var myChart = new Chart(ctx, {kode ini adalah class dari Chart.js untuk menginisialisasi chart. Pada kasus ini kita mengisinya dengan 2 parameter yaitu element dan object untuk mendefinisikan chart yang akan kita buat dan Chart.js akan menggambarkannya sesuai dengan object yang kita definisikan.
  4. Lalu ada kode type: 'line',kode ini untuk men-define jenis chart yang akan digambar oleh Chart.js.
  5. Lalu ada kode data: {kode ini untuk men-define data yang akan kita tampilkan pada chart dalam bentuk object.
  6. Di dalam key datamaka ada labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],kode ini merupakan key untuk men-set label untuk data dan dituliskan dalam array.
  7. Lalu ada kode datasets: [{kode ini untuk men-define data yang akan kita tampilkan pada chart.
  8. Di dalam kode datasets ada labelkode ini untuk memberikan keterangan pada data.
  9. Lalu ada kode data: [12, 19, 3, 5, 2, 3],kode tersebut untuk men-define jumlah data untuk setiap titik dan dituliskan dalam bentuk array. Terlihat dari kode tersebut, berarti kita memiliki 6 data, dalam kata lain kita memiliki 6 titik pada chart.
  10. Lalu ada kode backgroundColor: [kode ini untuk menentukan warna latar belakang pada chart.
  11. Lalu ada kode borderColor: [kode ini untuk menentukan warna dari garis data pada char.
  12. Lalu ada kode borderWidth: 1kode ini untuk menentukan ukuran dari garis.

Sebuah chart yang dibangun oleh Chart.js sudah pasti responsive, dalam artian ketika kamu buka pada perangkat yang berbeda ukuran maka ia akan menyesuaikan.

Banyak hal yang dapat kamu coba lagi pada Chart.js ini, untuk mempelajarinya kamu dapat mengunjungi dokumentasi resmi Chart.js.

 

Final Words

Untuk membuat chart dengan JavaScript tentu banyak sekali library yang dapat kamu gunakan, Chart.js ini hanyalah 1 dari sekian banyak library untuk membuat chart yang gratis. Semoga bermanfaat.

Baca juga post berikut

Freebies: CSS3 Login, Register and Forgo...

Menghilangkan Branding Pada Boxbilling V...

Muhamad Nauval Azhar
4 months ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

Pecinta Alam (Mbah dukun)

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!