Membuat Grafik Batang pada Bootstrap menggunakan PHP MYSQL
Ada banyak pilihan ataupun cara membuat grafik yang datanya dipanggil dari database. Salah satunya dengan menggunakan bantuan PHP/SWF Charts yang dapat anda temukan dalam tutorial sebelumnya dengan judul : Membuat Grafik Pada Web.
Pada tutorial kali ini, kita akan menggunakan bantuan librari javascript Highchart. Highchart menawarkan kemudahan bagi para developer web dalam membuat grafik, dimana jenis-jenis grafik yang dapat kita buat seperti : grafik baris (line chart), grafik batang (bar chart), grafik lingkaran (pie chart), grafik kolom (column chart), grafik bidang (area chart) dan masih banyak jenis grafik lainnya.
Selain highchart dapat digunakan secara gratis, highchart kompatibel dengan semua browser, baik browser pada mobile maupun pada dekstop termasuk iPhone/iPad dan Internet Explorer versi 6 keatas. Highchart juga berjalan mulus pada platform Android dan iOS.
Kasus yang diangkat dalam pembuatan grafik pada tutorial kali ini adalah tentang statistik pengguna browser, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Seperti yang terlihat pada Gambar.1, grafik atau diagram yang ditampilkan merupakan perwakilan masing-masing untuk data browser : Chrome, Firefox, Safari dan Opera. Untuk interfacenya, disini kita menggunakan Bootstrap.
Langkah-langkahnya
1. Create DatabaseDisini kita berinama database dengan nama : dbgraph. Dimana dbgraph memiliki 3 field dan berisikan data-data seperti kode dibawah ini :
CREATE TABLE IF NOT EXISTS `browser` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`browsername` varchar(30) NOT NULL,
`total` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
INSERT INTO `browser` (`id`, `browsername`, `total`) VALUES
(1, 'Chrome', 700),
(2, 'Firefox', 450),
(3, 'Safari', 220),
(4, 'Opera', 180);
2. Create file connection.php
File ini untuk melakukan establishment terhadap database. Sesuaikan hostname, username dan password dari database anda.
<?php
$con=mysqli_connect("localhost","root","","dbgraph");
?>3. Memanggil librari highchart.js
Librari ini diasumsikan terletak pada folder assets/js/highchart.js, maka proses pemanggilannya pada file halaman web anda :
<script src="assets/js/highcharts.js"></script>4. Mendefinisikan properti untuk grafik dan proses retrieve data dari database
Pada langkah ke-4 ini, kita akan memberikan judul untuk grafik, id unique untuk dirender, label terhadap sumbu x (xAxis), label terhadap sumbu y (yAxis) dan type untuk menyatakan jenis grafik yang akan dibangun, selain itu dilakukan pemanggilan data dari database.
<script>
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'mygraph',
type: 'column'
},
title: {
text: 'Internet Browser Statistics '
},
xAxis: {
categories: ['Browser']
},
yAxis: {
title: {
text: 'Total Browser Usage'
}
},
series:
[
<?php
include "connection.php";
$sql = "SELECT browsername FROM browser";
$query = mysqli_query( $con, $sql ) or die(mysqli_error());
while( $temp = mysqli_fetch_array( $query ) )
{
$trendbrowser=$temp['browsername'];
$sql_total = "SELECT total FROM browser WHERE browsername='$trendbrowser'";
$query_total = mysqli_query($con,$sql_total ) or die(mysql_error());
while( $data = mysqli_fetch_array( $query_total ) )
{
$total = $data['total'];
}
?>
{
name: '<?php echo $trendbrowser; ?>',
data: [<?php echo $total; ?>]
},
<?php
} ?>
]
});
});
</script>5. Memanggil id unik untuk dirender
Tempatkan kode ini di dalam tag
<body></body>. Karena dalam contoh ini menggunakan Bootstrap dan kita ingin meletakkan visualisasi grafiknya pada bagian class panel di bootstrap. Maka id unik untuk dirender diletakkan dalam class panel.<div class="container" style="margin-top:20px">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">The Graph of Browser Trends January 2015</div>
<div class="panel-body">
<div id ="mygraph"></div>
</div>
</div>
</div>
</div><div id = "mygraph">, ini adalah id unique yang akan dirender (renderTo ) oleh kode pada langkah ke-4 diatas.Complete Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Bootstrap Graph Using Highcharts </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script src="assets/js/highcharts.js"></script>
<script>
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'mygraph',
type: 'column'
},
title: {
text: 'Internet Browser Statistics '
},
xAxis: {
categories: ['Browser']
},
yAxis: {
title: {
text: 'Total Browser Usage'
}
},
series:
[
<?php
include "connection.php";
$sql = "SELECT browsername FROM browser";
$query = mysqli_query( $con, $sql ) or die(mysqli_error());
while( $temp = mysqli_fetch_array( $query ) )
{
$trendbrowser=$temp['browsername'];
$sql_total = "SELECT total FROM browser WHERE browsername='$trendbrowser'";
$query_total = mysqli_query($con,$sql_total ) or die(mysql_error());
while( $data = mysqli_fetch_array( $query_total ) )
{
$total = $data['total'];
}
?>
{
name: '<?php echo $trendbrowser; ?>',
data: [<?php echo $total; ?>]
},
<?php
} ?>
]
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->
<div class="container" style="margin-top:20px">
<div class="col-md-7">
<div class="panel panel-primary">
<div class="panel-heading">The Graph of Browser Trends January 2015</div>
<div class="panel-body">
<div id ="mygraph"></div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom footer-bottom">
<div class="container text-center">
<p class="text-center">Copyright © 2016, DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
</div>
</div>
</body>
</html>
