Berawal dari proyek yang sedang saya kerjakan dan alhamdulillah sudah selesai. Ada salah satu permintaan dari client agar dibuatkan diagram batang untuk mengetahui perolehan suara agar terlihat lebih interaktif dan menarik dilihat.
Setelah saya pikir-pikir akhirnya saya putuskan untuk menggunakan HighCharts sebagai plugin untuk membuat diagram barang.(highcharts.com)
Kemudian saya lihat-lihat fitur yang ditawarkan oleh highcharts, karena gratis jadi pakai ini saja dan mudah menggunakannya. Sekilas tentang HighCharts adalah suatu plugin atau modul javascript yang digunakan untuk membuat diagram/ charts menggunakan javascript.
Banyak sebenarnya diluar sana plugin-plugin untuk membuat chart yang bisa teman-teman gunakan, sesuai dengan selera dan kebutuhan.
1. Tahap pertama pastinya teman-teman harus sudah mendownload highcharts, teman-teman bisa mendownload di www.highcharts.com/download
2. Kedua, buat folder di htdocs (jika menggunakan xampp/lampp) dan beri nama diagrambatang , buat folder assets didalam proyek kita. Kemudian buat folder highcharts didalam folder assets. Selanjutnya ekstrak highcharts.js exporting.js yang tadi teman-teman download.
3. Ketiga, setelah berhasil mendownload highcharts. Sekarang download jQuery di sini kemudian save page as dan letakan didalam folder assets.
4. Keempat, buat folder include didalam proyek kita. Dan buat file dengan nama connection.php . Selanjutnya buat file index.php di dalam proyek kita. F
Fungsi dari connection.php adalah untuk melakukan koneksi ke database sekaligus sebagai query ke database sebagai manipulasi data.
Fungsi dari index.php adalah untuk menampilkan Diagram Batang yang nanti kita buat.
5. Kelima, pastikan serice Apache dan MySQL sudah dalam kondisi running. Kemudian masuk ke phpmyadmin dan buat database dengan nama voting. Buat tabel hasilvoting sebagai menampung data pada voting dan masukan beberapa data sebagai contoh.
--
-- Table structure for table `hasilvoting`
--
CREATE TABLE IF NOT EXISTS `hasilvoting` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) NOT NULL,
`jumlah_suara` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
--
-- Dumping data for table `hasilvoting`
--
INSERT INTO `hasilvoting` (`id`, `nama`, `jumlah_suara`) VALUES
(1, 'John Doe', 5000),
(2, 'Juki Dasi', 6000),
(3, 'Pojika', 3400),
(4, 'Guha', 9000),
(5, 'Kuha', 6200);
6. Keenam, buka file connection.php dan masukan kode berikut untuk koneksi ke database dan query menampilkan data dari tabel hasilvoting
<?php
class Connection {
public function __construct() {
// melakukan koneksi ke database
$this->db = new PDO('mysql:host=localhost;dbname=tutorialblog','root','');
// urutannya adalah host;namadatabase;username;password
}
public function getHasilVoting() {
// menampilkan seluruh data pada tabel hasilvoting
$sql = "SELECT * FROM hasilvoting";
$query = $this->db->query($sql);
return $query;
}
}
?>
7. Ketujuh, buka file index.php sebagai penampil dari diagram batang yang kita buat, dan juga kita akan memasukan plugin highcharts didalamnya.
<!DOCTYPE html>
<html>
<head>
<title>Diagram Batang | HighCharts</title>
<!-- memasukan jquery sebagai plugin tambahan -->
<script type="text/javascript" src="assets/jquery.min.js"></script>
<!-- membuat fungsi untuk menampilkan diagram batang ke dalam <div id="suara"></div> -->
<script type="text/javascript">
$(document).ready(function() {
$('#suara').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Jumlah Perolehan Suara'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jumlah Suara'
]
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
<?php
// meng include file connection.php
require 'include/connection.php';
// meng extend class Connection()
$con = new Connection();
// mendapatkan seluruh data dari tabel hasilvoting kemudian di looping menggunakan while
$voting = $con->getHasilVoting();
// melakukan looping
while ($data = $voting->fetch(PDO::FETCH_OBJ)) {
echo "{ name: '".$data->nama."',data: [".$data->jumlah_suara."]},";
}
?>
]
});
});
</script>
</head>
<body>
<h2 align="center">Hasil Perolehan Suara Pemilihan Ketua RT Suka Maju</h2>
<!-- awal sebagai id untuk menampilkan diagram batang -->
<div id="suara"></div>
<!-- akhir -->
<footer>
<p align="center">By Maful Prayoga Arnandi visit <a href="http://mafulprayogaarnandi.blogspot.com/" target="_blank">blog</a></p>
</footer>
<!-- memasukan highcharts ke dalam proyek sebagai plugin utama -->
<script type="text/javascript" src="assets/highcharts/highcharts.js"></script>
<script type="text/javascript" src="assets/highcharts/exporting.js"></script>
<!-- akhir -->
</body>
</html>
8. Setelah semuanya selesai, sekarang coba kita akses proyek kita dan hasilnya akan seperti berikut
Jadi jika kita menggunakan HighCharts terdapat fitur yang tentu penting, yaitu exporting. Dengan adanya fitur ini kita bisa melakukan export ke pdf, svg, image png tanpa membuat syntax lagi.
Selesai sudah tutorial kali ini, semoga bermanfaat dan jika ada pertanyaan silahkan komen dibawah ini.
Jika ada pertanyaan lebih lanjut bisa hubungi saya di mafulprayoga@gmail.com atau ada kepentingan tentang pembuatan website atau aplikasi bisa langsung menghubungi saya.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
