Grafik scatter adalah salah satu jenis grafik yang paling populer digunakan untuk menganalisis hubungan antara dua variabel. Dalam artikel ini, kita akan belajar cara mengplot grafik scatter menggunakan Chart.js.

Struktur Data

Sebelum kita mulai, mari kita bahas struktur data yang diperlukan untuk mengplot grafik scatter dengan Chart.js. Grafik scatter berbeda dengan grafik garis lainnya, karena hanya menerima data dalam format objek yang memiliki properti x dan y. Contoh struktur data sebagai berikut:

[
 { x: "2022-01-08", y: 950 },
 { x: "2022-01-09", y: 1100 },
 { x: "2022-01-10", y: 990 },
 { x: "2022-01-12", y: 1250 },
 { x: "2022-01-13", y: 1050 }
]

Mengplot Grafik Scatter

Sekarang, mari kita mulai mengplot grafik scatter dengan Chart.js. Kita perlu membuat objek Chart dan memberikan tipe "scatter" serta data yang kita inginkan. Berikut adalah contoh kode:

var test = [
 { x: "2022-1-8", y: 950 },
 { x: "2022-1-9", y: 1100 },
 { x: "2022-1-10", y: 990 },
 { x: "2022-1-12", y: 1250 },
 { x: "2022-1-13", y: 1050 }
];

var config = {
 type: 'scatter',
 data: {
 labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
 datasets: [{
 label: 'Dataset 1',
 data: test
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 }
};

var $canvas = document.getElementById('chart');
var chart = new Chart($canvas, config);

<div class="wrapper" style="width: 98vw; height:180px">
 <canvas id="chart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

Dalam kode di atas, kita membuat objek Chart dengan tipe "scatter" dan memberikan data yang kita inginkan. Kita juga menambahkan opsi responsive dan maintainAspectRatio untuk mengatur behavior grafik.

Mengaktifkan Axis Time

Sekarang, mari kita belajar cara mengaktifkan axis time pada grafik scatter. Untuk melakukan ini, kita perlu menentukan properti type dari axis x menjadi "time" dan menentukan properti parser menjadi "YYYY-M-D". Berikut adalah contoh kode:

var config = {
 type: 'scatter',
 data: test,
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 x: {
 type: 'time',
 time: {
 parser: 'YYYY-M-D'
 }
 }
 }
 }
};

Dalam kode di atas, kita menentukan properti type dari axis x menjadi "time" dan menentukan properti parser menjadi "YYYY-M-D". Kita juga menambahkan opsi scales untuk mengatur behavior axis.

Dalam artikel ini, kita telah belajar cara mengplot grafik scatter dengan Chart.js. Kita juga telah mempelajari cara mengaktifkan axis time pada grafik scatter. Dengan menggunakan Chart.js, kita dapat dengan mudah membuat berbagai jenis grafik dan menampilkan data dengan cara yang lebih interaktif.