Grafik atau dalam bahasa inggris dikenal dengan Chart merupakan sebuah representasi data yang dapat kita gunakan untuk presentasi, memperoleh informasi, gambaran dan berbagai bentuk informasi lainnya yang mempermudah kita dalam mengambil keputusan. Penggunaan grafik pun tidak lepas dari yang namanya pengelolaan data perusahaan baik untuk keperluan rapat dan lain hal.
Penggunaan grafik juga sangat dibutuhkan terutama pada data yang berjumlah sangat besar. Dengan adanya grafik kita dapat melakukan rekapitulasi data, melakukan perbandingan, melakukan analisis dari waktu ke waktu (misal : kasus penjualan, keuntungan penjualan maupun kerugian penjualan). Grafik telah digunakan dari zaman dahulu hingga sekarang baik sebelum adanya teknologi komputer maupun sesudahnya.
Di era perkembangan teknologi database yang semakin maju sekarang ini. Banyak platform yang menyajikan fitur untuk mengolah dan memodifikasi data. Salah satunya adalah highchart. Highchart merupakan platform javascript yang memungkinkan kita menampilkan data dalam bentuk grafik melalui browser yang didukung dengan bahasa pemrograman HTML. Selain itu kita juga bisa mengintegrasikan bahasa pemrograman yang terkoneksi ke database seperti PHP.
Dengan menggunakan highchart yang merupakan grafik berbasis javascript, chart ini dapat dengan mudah digunakan dan disesuaikan dengan data yang ingin kita gunakan.
Adapun contoh tampilan chartnya adalah sebagai berikut :
Adapun script dari grafik di atas adalah sebagai berikut :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width:90%; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Statistik Golongan Pegawai Pemerintah'
},
subtitle: {
text: 'Sumber : Database'
},
xAxis: {
//INI ADALAH UNTUK KOLOM KETERANGAN
categories: [
'I/a',
'I/b',
'I/c',
'I/d',
'II/a',
'II/b',
'II/c',
'II/d',
'III/a',
'III/b',
'III/c',
'III/d',
'IV/a',
'IV/b',
'IV/c',
'IV/d',
'IV/e',
],
title: {
text: 'Golongan'
},
crosshair: true
},
yAxis: {
title: {
text: 'Jumlah'
}
},
tooltip: {
headerFormat: '<span style="font-size:8pt">{point.key}</span><table style="font-size:8pt">',
pointFormat: '<tr><td style="color:{series.color};padding:0">Jml.: </td>' +
'<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.,
borderWidth: 0
}
},
series: [{
colorByPoint: true,
showInLegend: false,
data: [15,18,87,55,558,408,366,331,522,659,475,597,397,74,31,0,0,] //INI ADALAH UNTUK JUMLAH
},
]
});
</script>
Script di atas dapat anda sesuaikan dengan bahasa pemrograman yang anda gunakan termasuk PHP. Nah ? Bagaimana ? Mudah bukan ?
Jangan lupa tinggalkan komentar..
