Tutorial sebelumnya dalam seri ini berfokus pada pembuatan grafik baris dan batang dengan menggunakan Chart.js. Kedua grafik tersebut memiliki pilihan-pilihan konfigurasi sendiri yang dibahas secara terperinci dalam tutorial sebelumnya.

Di tutorial ini Anda akan belajar dua jenis grafik lainnya yang bisa dibuat dengan Chart.js: grafik radar dan polar area. Sebagaimana di tutorial sebelumnya, kita akan memulai dengan perkenalan singkat jenis grafik yang dimaksud dan dilanjutkan dengan pembahasan yang lebih terperinci.

Membuat Grafik Radar

Grafik baris dan batang akan bermanfaat ketika Anda hanya ingin membandingkan satu atau dua properti dari sejumlah besar objek—misalnya populasi semua negara di Asia atau jumlah beragam polutan di atmosfer.

Katakan saja Anda ingin membandingkan densitas, opacity, viskositas, indek refraksi, dan titik didih tiga cairan yang berbeda. Membuat grafik batang data semacam ini akan bermasalah karena Anda harus membuat lima kolom yang berbeda untuk masing-masing cairan. Sulit juga membandingkan properti yang sesuai dengan cairannya.

Dalam situasi ketika Anda diharuskan membandingkan banyak properti objek yang jumlahnya sedikit, membuat grafik radar adalah metode paling efisien untuk visualisasi dan perbandingan data. Grafik-grafik ini juga dikenal sebagai grafik jaring laba-laba.

Menurut Wikipedia, grafik radar adalah metode grafis untuk menampilkan data multivariat dalam bentuk grafik dua dimensi berisi tiga atau lebih variabel kuantitatif yang direpresentasikan pada sumbu yang dimulai dari titik yang sama. Posisi dan sudut relatif sumbu tersebut biasanya tidak informatif.

Mari membuat grafik radar pertama kita sekarang. Grafik radar dibuat dengan mengatur kunci type di Chart.js ke radar. Berikut adalah contoh yang sangat dasar.

var radarChart = new Chart(marksCanvas, {
    type: 'radar',
    data: marksData,
    options: chartOptions
});

Mari memasukkan nilai dua siswa suatu kelas dalam lima mata pelajaran yang berbeda. Berikut adalah kode untuk menyediakan data yang digunakan untuk membuat grafik.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "rgba(0,0,200,0.2)",
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData
});

Biasanya grafik pertama yang dibuat  tidak memiliki warna latar belakang yang ditetapkan secara khusus. Namun demikian, grafik radar bisa banyak tumpang tindihnya sehingga menyulitkan untuk mengidentifikasi dengan benar poin-poin data yang ada tanpa menulis kode warna apapun.

Untuk alasan ini, suatu warna telah diberikan ke tiap perangkat data dengan menggunakan kunci backgroundColor. Demo di bawah ini menunjukkan hasil akhir kode kita. Sebagaimana bisa Anda lihat, sekarang sangat mudah untuk membandingkan performa kedua siswa dalam beberapa mata pelajaran yang berbeda.

Selain warna latar belakang, Anda juga bisa mengubah warna bingkai dan lebar bingkai untuk grafik dengan menggunakan kunci borderColor dan borderWidth. Memungkinkan juga bagi Anda untuk membuat bingkai putus-putus, bukannya garis lurus, dengan menggunakan kunci borderDash. Kunci ini menerima array sebagai value-nya.

Elemen pertama array menentukan panjang tiap garis putus-putus, dan elemen kedua menentukan ruang antar garis putus-putusnya. Anda juga bisa memberikan nilai offset untuk menggambar garis putus-putus dengan menggunakan kunci borderDashOffset.

Anda juga bisa mengontrol warna dan lebar bingkai untuk titik yang diplot dengan menggunakan pointBorderColor dan pointBorderWidth. Dengan cara serupa, Anda juga bisa mengatur warna latar belakang untuk titik-titik yang berbeda dengan menggunakan kunci pointBackgroundColor. Ukuran titik yang diplot bisa ditetapkan dengan menggunakan kunci pointRadius. Anda juga bisa mengontrol jarak yang dari situ titik bisa mulai berinteraksi dengan mouse dengan menggunakan kunci pointHitRadius.

Anda juga bisa mengontrol tampilan titik yang diplot pada hover dengan menggunakan pointHoverBackgroundColor, pointHoverBorderColor dan pointHoverBorderWidthkeys. Satu hal yang perlu diingat adalah bahwa kunci-kunci hover itu tidak akan menunggu sampai Anda benar-benar melayangkan kursor pada elemen sampai bisa dimulai. Perubahannya akan terjadi begitu kursor Anda berada dalam radius yang ditetapkan sebelumnya.

Ada banyak bentuk yang tersedia untuk titik plot. Secara default bentuknya lingkaran. Namun demikian, Anda bisa mengubah bentuknya jadi triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, dan dash.

Mari menggunakan semua kunci itu untuk menggambar ulang grafik radar sebelumnya. Berikut adalah kode untuk memberikan opsi konfigurasi bagi dataset dan skalanya.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Student A",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var chartOptions = {
  scale: {
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18
    }
  },
  legend: {
    position: 'left'
  }
};

Di dalam objek chartOptions, nilai min dan max digunakan untuk menentukan nilai minimal dan maksimal bagi skalanya. Kunci stepSize bisa digunakan untuk memberitahu Chart.js tentang banyaknya langkah yang harus diambil untuk bergerak dari min ke max. Berikut adalah hasil akhir kode di atas.

Membuat Grafik Polar Area

Grafik polar area mirip dengan diagram lingkaran. Dua perbedaan utamanya adalah di grafik polar area semua sektor memiliki sudut yang setara dan jarak tiap sektor tergantung nilai yang diplot. Grafik-grafik tersebut digunakan untuk memplot fenomena siklis. Misalnya, Anda bisa menggunakannya untuk memplot jumlah burung spesies-spesies tertentu yang bermigrasi di wilayah Anda tiap musim dalam satu tahun.

Radius tiap sektor di grafik-grafik ini sama dengan akar kuadrat jumlah objek yang berkesesuaian. Dalam hal burung yang bermigrasi, radiusnya sama dengan akar kuadrat jumlah burung di wilayah Anda.

Anda bisa membuat grafik polar area di Chart.js dengan mengatur kunci type ke polarArea. Berikut adalah kode dasar yang Anda butuhkan untuk membuat suatu grafik polar.

var polarAreaChart = new Chart(birdsCanvas, {
    type: 'polarArea',
    data: birdsData,
    options: chartOptions
});

Berikut adalah kode untuk memplot jumlah burung yang bermigrasi pada grafik polar area. Saat ini satu-satunya data yang diberikan adalah jumlah burung dan warna latar belakang untuk musim-musim yang berbeda.

var birdsData = {
  labels: ["Spring","Summer","Fall","Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.5)",
      "rgba(100, 255, 0, 0.5)",
      "rgba(200, 50, 255, 0.5)",
      "rgba(0, 100, 255, 0.5)"
    ]
  }]
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData
});

Kode di atas akan membuat grafik polar area di bawah ini.

Grafik polar area menyediakan opsi biasanya untuk menentukan backgroundColor, borderWidth, borderColor, hoverBackgroundColor, hoverBorderWidth, dan hoverBorderColor. Ada juga beberapa kunci khusus grafik polar area yang bisa Anda gunakan untuk memodifikasi penampilannya.

Sebagai contoh, Anda bisa mengatur sudut awal nilai pertama dataset dengan  menggunakan kunci startAngle. Dengan cara serupa, kunci lineArc yang bisa ditemukan di bawah scale bisa digunakan untuk menentukan apakah garis yang digambar harus berbentuk lingkaran atau tidak dengan mengatur nilainya menjadi true atau false secara berturut-turut. 

Sektor-sektor yang digambar di grafik polar area diputar dan diskalakan secara default. Meskipun demikian, Anda bisa mencegah berubahnya skala animasi dengan mengatur nilai kunci animateScale menjadi false. Dengan cara yang sama, animasi berputar bisa dinonaktifkan dengan mengatur nilai kunci animateRotate ke false. Kedua kunci tersedia di bawah animation.

Kode di bawah ini mengubah nilai beberapa kunci untuk menjadikan grafiknya lebih menarik secara visual.

var birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

Selain memutar grafik dan menonaktifkan animasi perputaran, kita juga bisa menggerakkan legenda ke sebelah kiri grafik dengan mengatur nilai position jadi left. Ini akan menyisakan cukup ruang di atas grafik agar bisa ditampilkan dengan benar.

Pemikiran Akhir

Di tutorial ini, Anda telah belajar tentang penerapan grafik radar dan polar area. Selanjutnya Anda juga sudah belajar cara membuat grafik dasar dan memodifikasinya dengan berbagai pilihan konfigurasi yang tersedia di Chart.js. Anda akan belajar tentang grafik lingkaran dan gelembung di bagian selanjutnya dari seri ini.

Jika Anda bekerja dengan web, terutama front-end, JavaScript penting untuk diketahui. Tentu saja bukannya tanpa kurva pembelajarannya, dan masih banyak lagi framework dan library yang bisa membuat Anda tetap sibuk. Jika Anda mencari sumber-sumber tambahan untuk dipelajari atau digunakan dalam karya Anda, silakan lihat yang kami sediakan di Envato marketplace.

Jika ada pertanyaan tentang tutorial ini, silakan beritahu saya di komentar.