Melanjutkan tutorial yang sebelumnya, pada tutorial sebelumnya kita membuat Diagram Batang menggunakan HighCharts. Pada kali ini kita akan bersama-sama membuat Diagram Lingkaran 3D menggunakan HighCharts juga. Kenapa HighCharts?
Karena selain gratis juga sangat mudah digunakan dan mempunyai dokumentasi yang baik dan mudah.
Baca juga: Membuat Diagram Batang dengan HighCharts1. Kita buat database bernama voting, kemudian buat tabel dengan nama hasilvoting 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);
2. Buat folder di htdocs jika teman-teman menggunakan LAMPP/XAMPP dengan nama diagram-highcharts, kemudian buat folder dengan nama include didalamnya. Buat file index.php di dalam folder diagram-highcharts kemudian masuk ke folder include dan buat file dengan nama connection.php
File connection.php digunakan untuk melakukan koneksi ke database sekaligus sebagai query yang dijalankan ke database.File index.php digunakan menampilkan diagram yang akan kita buat sekaligus menyisipkan plugin dari highcharts
3. Ada yang unik diagram yang kita buat ini. Apa? Jawabannya adalah diagram yang kita buat ini nantinya akan 3D (3 Dimensi) dan berbentuk seperti donat. Pastinya teman-teman tahu kan donat itu bentuknya seperti apa.
Oke silahkan downloadnya pluginnya di highcharts.com atau teman-teman bisa menggunakan CDN nya dari highcharts.
4. Kode, tahap ini kita akan menulis syntax php dan html. Buka file connection.php
<?php
class Connection {
public function __construct() {
// melakukan koneksi ke database
$this->db = new PDO('mysql:host=localhost;dbname=voting','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;
}
}
?>
Kemudian buka file index.php
<!DOCTYPE html>
<html>
<head>
<title>3D Pie Donut | HighCharts</title>
<!-- memasukan jquery sebagai plugin tambahan -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/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: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Jumlah Perolehan Suara'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Jumlah Perolehan Suara',
data: [
<?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 "[ '".$data->nama."', ".$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="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- akhir -->
</body>
</html>
5. Setelah itu silahkan akses folder proyek kita, defaultnya http://localhost/diagram-highcharts dan lihat apa yang terjadi. Mirip donat bukan? Ada lubang ditengahnya.
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 :
