Membuat Grafik Scatter dengan Chart.js

Grafik scatter adalah salah satu jenis grafik yang paling umum digunakan untuk mewakili hubungan antara dua variabel. Dalam artikel ini, kita akan membahas cara membuat grafik scatter dengan menggunakan Chart.js.

Dataset Properties Namespaces

Sebelum kita mulai membuat grafik scatter, mari kita lihat beberapa properti dataset yang dapat digunakan:

data.datasets[index]: opsional untuk dataset yang sesuai
options.datasets.scatter: opsional untuk semua dataset scatter
options.elements.line: opsional untuk semua elemen garis
options.elements.point: opsional untuk semua elemen titik
responsive: opsional untuk menyesuaikan ukuran grafik dengan ukuran layar

Contoh Kode

Berikut adalah contoh kode yang dapat digunakan untuk membuat grafik scatter:

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 chart = new Chart('chart-line', {
 type: 'scatter',
 data: {
 datasets: [{
 data: test,
 label: 'buys',
 borderColor: "#3e95cd"
 }]
 },
 options: {
 responsive: false,
 scales: {
 x: { 
 type: 'time',
 time: {
 parser: 'YYYY-M-D',
 unit: 'day',
 displayFormats: {
 day: 'D MMM YYYY'
 },
 tooltipFormat: 'D MMM YYYY'
 }
 }
 }
 }
});

Menggunakan Chart.js-Adapter-Moment

Untuk membuat grafik scatter dengan waktu sebagai axis x, kita perlu menggunakan Chart.js-Adapter-Moment. Berikut adalah contoh kode yang dapat digunakan:

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 chart = new Chart('chart-line', {
 type: 'scatter',
 data: {
 datasets: [{
 data: test,
 label: 'buys',
 borderColor: "#3e95cd"
 }]
 },
 options: {
 responsive: false,
 scales: {
 x: { 
 type: 'time',
 time: {
 parser: 'YYYY-M-D',
 unit: 'day',
 displayFormats: {
 day: 'D MMM YYYY'
 },
 tooltipFormat: 'D MMM YYYY'
 }
 }
 }
 }
});

Contoh Kode Lengkap

Berikut adalah contoh kode yang dapat digunakan untuk membuat grafik scatter dengan waktu sebagai axis x:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart-line" height="200"></canvas>

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 chart = new Chart('chart-line', {
 type: 'scatter',
 data: {
 datasets: [{
 data: test,
 label: 'buys',
 borderColor: "#3e95cd"
 }]
 },
 options: {
 responsive: false,
 scales: {
 x: { 
 type: 'time',
 time: {
 parser: 'YYYY-M-D',
 unit: 'day',
 displayFormats: {
 day: 'D MMM YYYY'
 },
 tooltipFormat: 'D MMM YYYY'
 }
 }
 }
 }
});

Menggunakan Chart.js-Adapter-Moment dan Moment

Berikut adalah contoh kode yang dapat digunakan untuk membuat grafik scatter dengan waktu sebagai axis x, menggunakan Chart.js-Adapter-Moment dan Moment:

const data = {
 labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
 datasets: [{
 label: 'Dataset 1',
 data: [{x:1, y:12}, {x:2, y:3}, {x:3, y:2}, {x:4, y:4}, {x:5, y:5}]
 }]
};

const chart = new Chart('chart-line', {
 type: 'scatter',
 data,
 options: {
 responsive: true,
 scales: {
 x: { 
 type: 'time',
 time: {
 parser: 'YYYY-M-D',
 unit: 'day',
 displayFormats: {
 day: 'D MMM YYYY'
 },
 tooltipFormat: 'D MMM YYYY'
 }
 },
 y: {
 type: 'linear'
 }
 }
 }
});

Saya harap contoh kode di atas dapat membantu Anda dalam membuat grafik scatter dengan waktu sebagai axis x menggunakan Chart.js-Adapter-Moment dan Moment. Jika Anda memiliki pertanyaan atau keperluan lebih lanjut, silakan hubungi saya!

Membuat Grafik Scatter dengan Chart.js

Artikel Terkait