Demohighcharts: Membuat Grafik Scatter dengan Garis Trend

Dalam artikel ini, kita akan membuat grafik scatter yang menampilkan data statistik dan garis trend yang melalui data tersebut. Kami akan menggunakan library Highcharts untuk membuat grafik tersebut.

Data Statistik

Kita memiliki dataset berikut:

const dataset = [
 [1.4, 0.4],
 [2.4, 5.3],
 [2.9, 4.9],
 [5, 2.3],
 [3.6, 1.9],
 [5.1, 6.1],
 [2, 4],
 [2, 5.6],
 [-0.2, 6.3],
 [1.2, 6.3]
];

Fungsi untuk Menghitung Garis Trend

Kita akan membuat fungsi getTrendLine yang digunakan untuk menghitung garis trend dari dataset tersebut. Fungsi ini menggunakan metode Least Squares (LS) untuk menghitung slope dan intercept dari garis trend.

function getTrendLine(data) {
 const n = data.length;

 let sumX = 0,
 sumY = 0,
 sumXY = 0,
 sumX2 = 0;

 for (let i = 0; i < n; i++) {
 const [x, y] = data[i];
 sumX += x;
 sumY += y;
 sumXY += x * y;
 sumX2 += x ** 2;
 }

 const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX ** 2);

 const intercept = (sumY - slope * sumX) / n;

 const trendline = []; 

 const minX = Math.min(...data.map(([x]) => x));
 const maxX = Math.max(...data.map(([x]) => x));

 trendline.push([minX, minX * slope + intercept]);
 trendline.push([maxX, maxX * slope + intercept]);

 return trendline;
}

Membuat Grafik dengan Highcharts

Kita akan membuat grafik scatter dengan garis trend menggunakan library Highcharts. Kami akan membuat dua seri: seri pertama adalah garis trend, dan seri kedua adalah scatter plot dari dataset.

Highcharts.chart('container', {
 title: {
 text: 'Scatter plot with trend line'
 },
 xAxis: {
 min: -0.5,
 max: 5.5
 },
 yAxis: {
 min: 0
 },
 series: [{
 type: 'line',
 name: 'Trend Line',
 data: getTrendLine(dataset),
 marker: {
 enabled: false
 },
 states: {
 hover: {
 lineWidth: 0
 }
 },
 enableMouseTracking: false
 }, {
 type: 'scatter',
 name: 'Observations',
 data: dataset,
 marker: {
 radius: 4
 }
 }]
});

Installasi Highcharts dengan NPM

Untuk menggunakan Highcharts dalam proyek, Anda dapat menginstallkan library tersebut menggunakan NPM. Caranya adalah dengan menjalankan perintah berikut:

npm install highcharts --save

Setelah instalasi selesai, Anda dapat menggunakan Highcharts dalam proyek Anda.

Download dan Beli Lisensi

Highcharts juga tersedia dalam bentuk archive zip yang berisi file-file JavaScript dan contoh-contoh penggunaan. Anda dapat mengunduh archive tersebut dan membuka file index.html dalam browser untuk melihat contoh-contoh penggunaan.

Jika proyek Anda siap diluncurkan, Anda dapat membeli lisensi komersial dari Highcharts. Harga lisensi dapat dilihat pada halaman resmi Highcharts.

Blog