.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Membuat Grafik Batang pada Bootstrap menggunakan PHP MYSQL

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

Sebuah webiste yang sering melakukan polling ataupun survery sering menyajikan data kumulatif dalam bentuk grafik yang menunjukkan jumlah atau persentase dari data yang telah masuk. Data-data tersebut disimpan dalam database, kemudian dipanggil dan disajikan dalam bentuk grafik, salah satunya grafik Batang.

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 :
Gambar.1

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 Database
Disini 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 <bod></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>
Perhatikan bagian kode <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 &copy; 2016, DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
</div>
</div>
</body>
</html>



  • DEMO
  •                                
  • DOWNLOAD


Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

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 :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Membuat Grafik Batang pada Bootstrap menggunakan PHP MYSQL, Diterbitkan oleh scodeaplikasi pada Senin, 30 Mei 2016. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to