Membuat Grafik Pie Berbasis Web dengan Highcharts
Pada postingan sebelumnya saya sudah sharing tentang bagaimana membuat grafik batang (column) berbasis web dengan Highcharts. Kali ini saya akan lanjutkan untuk membuat grafik pie atau grafik lingkaran berbasis web dengan highcharts. Bentuk grafik pie yang akan saya buat adalah seperti gambar berikut:
 |
| Grafik Pie dengan Highcharts |
Untuk membuat grafik pie kita akan menggunakan data pada tabel di bawah ini, namun kita akan konversi secara manual dengan memasukkan datanya ke dalam script program.
| Fakultas | Jumlah Mhs Baru |
| Ilmu Komputer | 540 |
| Ekonomi | 570 |
| Pertanian | 180 |
| Kesehatan | 350 |
| KIP | 280 |
Sekarang kita memulai membuat grafik pie-nya dengan mengikuti langkah-demi langkah berikut ini:
Pertama (1) - Buat file html dengan nama grafik_pie.html dan simpan pada folder "grafik" yang telah anda buat. Jika anda belum membuatnya silahkan pelajari dulu Cara membuat grafik batang dengan Highcharts.
Kedua (2) - Buat struktur html dasar, import library Highcharts seperti contoh kode di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grafik Pie Menggunakan Highcharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Menambahkan library Highcharts -->
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<script src="highcharts/modules/export-data.js"></script>
</head>
<body>
</body>
</html>
Sebenarnya untuk file "exporting.js" dan "export-data.js" tidak harus di import jika kita hanya ingin membuat grafik, kedua file ini digunakan untuk memberikan fitur export grafik menjadi PNG, JPEG, PDF, dan SVG.
Ketiga (3) - Buat div dengan id=grafik_pie sebagai area untuk menampilkan grafik, seperti contoh kode berikut ini:
<!-- Membuat area untuk menampilkan grafik -->
<div id="grafik_pie" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Keempat (4) - Di bawah area grafik, tambahkan kode javascript berikut ini untuk membuat grafik pie.
<script type="text/javascript">
Highcharts.chart('grafik_pie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Grafik Mahasiswa Baru Per Fakultas Tahun 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Fakultas',
colorByPoint: true,
data: [{
name: 'Ilmu Komputer',
y: 540,
sliced: true,
selected: true
}, {
name: 'Ekonomi',
y: 570
}, {
name: 'Pertanian',
y: 180
}, {
name: 'Kesehatan',
y: 350
}, {
name: 'KIP',
y: 280
}]
}]
});
</script>
Setelah selesai maka kode lengkapnya dapat dilihat di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grafik Pie Menggunakan Highcharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Menambahkan library Highcharts -->
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<script src="highcharts/modules/export-data.js"></script>
</head>
<body>
<!-- Membuat area untuk menampilkan grafik -->
<div id="grafik_pie" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('grafik_pie', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Grafik Mahasiswa Baru Per Fakultas Tahun 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} ({point.percentage:.1f}%)</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Fakultas',
colorByPoint: true,
data: [{
name: 'Ilmu Komputer',
y: 540,
sliced: true,
selected: true
}, {
name: 'Ekonomi',
y: 570
}, {
name: 'Pertanian',
y: 180
}, {
name: 'Kesehatan',
y: 350
}, {
name: 'KIP',
y: 280
}]
}]
});
</script>
</body>
</html>
Kelima (5) - Jalankan file grafik_pie.html melalui web browser anda. Jika script yang anda masukkan sudah benar, hasilnya akan terlihat seperti pada gambar berikut ini.
Sampai tahap ini pembuatan grafik pie berbasis web sudah selesai dan silahkan dicoba. Jika ada pertanyaan, silahkan kirimkan melalui kolom komentar di bawah postingan ini.
