Membuat Grafik Batang Berbasis Web dengan HighCharts
Daftar Isi
Seperti yang sudah saya tulis pada postingan sebelumnya tentang membuat grafik line menggunakan highcharts, highcharts adalah library grafik yang ditulis dalam bahasa JavaScript murni. Highchart menawarkan cara mudah untuk menambahkan grafik yang interaktif ke dalam situs web atau aplikasi web. Highchart mendukung banyak format grafik atau tipe grafik diantaranya line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall dan polar.
Grafik batang atau dalam highcharts disebut grafik column adalah grafik yang penyajian datanya mengunakan batang atau persegi panjang. Grafik batang atau sering kita kenal dengan sebutan histogram. Grafik batang dipakai untuk memperlihatkan perbedaan tingkat nilai dari beberapa aspek pada suatu data. Grafik batang merupakan grafik yang paling sederhana diantara jenis-jenis grafik lainnya. Karena grafik ini sangat mudah untuk dipahami dan hanya menggambarkan data dalam bentuk batang/column.
Baik untuk membuat grafik batang/column, ikuti langkah-demi langkah berikut ini:
 |
| Grafik Batang |
Pertama (1) - Siapkan folder project anda, pada contoh ini saya akan membuat folder pada root folder web server "... /htdocs/lab/grafik".
 |
| Folder Project Grafik |
Kedua (2) - Download Library Highcharts di website resminya : https://www.highcharts.com
Ketiga (3) - Extract file hasil download kemudian pindahkan folder code ke dalam folder grafik yang telah disiapkan pada langkah Pertama (1), lalu rename folder menjadi "highcharts".
 |
| Persiapan Library Highcharts |
Keempat (4) - Buat file pada folder grafik dengan nama grafik_batang.html, kemudian siapkan struktur HTML seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grafik Batang dengan Highcharts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Kelima (5) - Pada baris ke-8 , tambahkan script untuk memanggil library highcharts seperti script/kode di bawah ini.
<!-- Menambahkan library Highcharts -->
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<script src="highcharts/modules/export-data.js"></script>
Keenam (6) - Pada bagian Body tambahkan area div dengan id="grafik_batang" untuk menampilkan grafik. Ketikkan kode di bawah ini.
<!-- Membuat area untuk menampilkan grafik -->
<div id="grafik_batang" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Ketujuh (7) - Tambahkan kode javascript di bawah ini untuk membuat grafik dan ditampilkan pada area grafik yang telah dibuat sebelumnya. Kode ini diletakkan di bawah "<div id="grafik_batang" ...."
<!-- Script untuk membuat grafik batang -->
<script type="text/javascript">
Highcharts.chart('grafik_batang', {
chart: {
type: 'column'
},
title: {
text: 'Grafik Mahasiswa Aktif'
},
subtitle: {
text: '3 Tahun Terakhir'
},
xAxis: {
categories: [
'2016',
'2017',
'2018'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Jumlah'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} Mhs Aktif</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Fakultas Ilmu Komputer',
data: [515,540,610]
}, {
name: 'Fakultas Ekonomi',
data: [530,567,613]
}, {
name: 'Fakultas Kesehatan',
data: [340,360,395]
}, {
name: 'Fakultas Pertanian',
data: [200,230,180]
}, {
name: 'Fakultas KIP',
data: [370,420,450]
}]
});
</script>
Setelah ditambahkan script-script di atas, maka script lengkapnya seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grafik Batang dengan 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_batang" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- Script untuk membuat grafik batang -->
<script type="text/javascript">
Highcharts.chart('grafik_batang', {
chart: {
type: 'column'
},
title: {
text: 'Grafik Mahasiswa Aktif'
},
subtitle: {
text: '3 Tahun Terakhir'
},
xAxis: {
categories: [
'2016',
'2017',
'2018'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Jumlah'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y} Mhs Aktif</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Fakultas Ilmu Komputer',
data: [515,540,610]
}, {
name: 'Fakultas Ekonomi',
data: [530,567,613]
}, {
name: 'Fakultas Kesehatan',
data: [340,360,395]
}, {
name: 'Fakultas Pertanian',
data: [200,230,180]
}, {
name: 'Fakultas KIP',
data: [370,420,450]
}]
});
</script>
</body>
</html>
Kedelapan (8) - Jalankan file grafik_batang.html melalui browser, jika kode yang anda ketikkan benar maka hasilnya seperti terlihat pada gambar berikut ini;
 |
| Grafik Batang Berbasis Web |
Seperti itulah kira-kira pembuatan grafik batang dengan highcharts. Mudah-mudahan bermanfaat.