Menampilkan data ke dalam grafik di Fusion Chart menggunakan PHP, MySQLi dan Bootstrap 3
Wednesday 16 March 2016
Edit
Menampilkan data kedalam grafik tentu sangat diperlukan bila kita ingin melihat misalnya penjualan perbulan, dari data grafik tersebut kita bisa melihat perbandingan penjualan perproduknya dan dari data grafik tersebut kita bisa menganalisa produk mana yang laku paling banyak dan di bulan apa penjualan terbanyak juga kita bisa mengetahui produk mana yang penjualannya sedikit dan di bulan apa, hal ini tentunya berkaitan dengan masalah persediaan barang tersebut agar kita bisa memprediksi stock agar selalu tersedia dan dari data grafik juga anda bisa mengeliminasi atau meretur produk yang tidak laku sama sekali ke supplier tentunya hal ini sangat menguntungkan bagi anda dalam memanajemen stock barang, pada kesempatan kali ini saya akan memberikan tutrial menampilkan data ke dalam grafik menggunakan plugin fusion chart free license dengan PHP, MySQLi dan Bootstrap 3, saya juga akan memberikan source code lengkap sehingga anda bisa lebih mendalami dalam mempelajarinya, oke langsung ke pembahasan, yang perlu dilakukan adalah sebagai berikut :
- Download fusioan chart
- Download Bootstrap
- Download Xampp
- Buatlah database dengan nama mahasiswa kemudian dumping SQL code di bawah ini :
-- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Mar 15, 2016 at 08:48 AM -- Server version: 5.6.21 -- PHP Version: 5.5.19 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `mahasiswa` -- -- -------------------------------------------------------- -- -- Table structure for table `data` -- CREATE TABLE IF NOT EXISTS `data` ( `nim` int(6) NOT NULL, `nama` varchar(30) NOT NULL, `tempat_lahir` varchar(30) NOT NULL, `tanggal_lahir` date NOT NULL, `alamat` varchar(200) NOT NULL, `notelp` varchar(15) NOT NULL, `sks` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=latin1; -- -- Dumping data for table `data` -- INSERT INTO `data` (`nim`, `nama`, `tempat_lahir`, `tanggal_lahir`, `alamat`, `notelp`, `sks`) VALUES (2, 'Hakko Bio Richard', 'Cikarang', '1990-09-27', 'Perum BKI', '085694984803', '20'), (3, 'Andi Mardianto', 'Bekasi', '1990-03-20', 'Pilar - Cikarang', '08569897845', '15'), (4, 'Eko Harahap', 'Pilar Barat', '1995-12-12', 'Wangkal Asem', '085656451232', '10'), (5, 'Antonio Bonaparte', 'Cirebon', '1989-01-23', 'Walahir', '085694876532', '5'), (6, 'Deriz Ramadhan', 'Bekasi', '2016-07-20', 'Sempu - Jababeka', '8945675213', '30'), (7, 'Ujang Sarujang', 'Bekasi', '1988-12-30', 'Sukatani', '085698756432', '25'), (8, 'Patrio', 'Lemahabang', '1997-12-04', 'Cikarang', '08569865321478', '22'), (9, 'Syahril Ammar', 'Bekasi', '1989-01-23', 'Sukatani', '2859874521', '20'), (10, 'Syahrul', 'Cirebon', '1990-03-22', 'Bekasi', '085694876532', '8'), (11, 'Doni', 'Bekasi', '1995-12-12', 'Tambun', '085698756432', '12'), (12, 'Rombe', 'Cikarang', '1985-04-25', 'Perum PCH', '087854653212', '16'), (13, 'Dimas', 'Brebes', '1984-02-12', 'Perum BKI', '086598475213', '10'), (14, 'Paijo', 'Purwokerto', '1988-12-04', 'Perumahan Rakyat', '08569487521', '18'), (15, 'Paimin', 'Solo', '1985-06-20', 'Cikarang', '085698756432', '28'), (16, 'Sebas', 'Tambelang', '1989-01-23', 'Tambelang Indah', '089865321456', '26'), (17, 'Siffa', 'Bekasi', '1990-02-15', 'Cikarang', '02356487951', '25'), (18, 'Hendra', 'Bekasi', '1985-06-20', 'Perumahan Bersih', '085694878523', '23'), (19, 'Bani', 'Cikarang', '1984-02-12', 'Sukatani', '085694878523', '24'), (20, 'Boy', 'Cikarang', '1985-06-20', 'Buni Asih', '0854995293564', '14'), (21, 'Andri', 'Brebes', '1987-12-12', 'Cikarang Barat', '08569878545213', '6'), (22, 'Yusuf', 'Bekasi', '1983-02-01', 'Kaum Utara', '0859485126321', '9'); -- -- Indexes for dumped tables -- -- -- Indexes for table `data` -- ALTER TABLE `data` ADD PRIMARY KEY (`nim`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `data` -- ALTER TABLE `data` MODIFY `nim` int(6) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=23; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
- Kemudian copas code berikut dan simpan kedalam folder grafik (jadikan satu folder dengan plugin yang sudah di download tadi) dan beri nama index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Grafik Fusion">
<meta name="author" content="Hakko Bio Richard">
<link rel="icon" href="../../favicon.ico">
<title>Menampilkan data di fusion chart dengan PHP, MySQLi dan Bootstrap 3</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.hakkoblogs.com">Hakko Blog's</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.hakkoblogs.com">Tutorial</a></li>
<li><a href="http://www.hakkoblogs.com">PHP</a></li>
<li><a href="http://www.hakkoblogs.com">MySQLi</a></li>
<!-- <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li> -->
</ul>
<!-- <ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul> -->
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<center><h2>Grafik Mahasiswa</h2></center>
</div>
<?php
include "conn.php";
//$sql = mysqli_query($koneksi, "SELECT t_gr.f_grno, MONTH(t_gr.f_grdate) AS bulan, YEAR(t_gr.f_grdate) AS tahun, SUM(t_gr_detail.f_received_qty) AS total FROM t_gr, t_gr_detail WHERE t_gr.f_grno=t_gr_detail.f_grno AND t_gr_detail.f_partcode='$partcode' AND YEAR(t_gr.f_grdate)='$tahun' AND MONTH(t_gr.f_grdate)='1'");
$sql = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='1'");
$row = mysqli_fetch_array($sql);
$sql1 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='2'");
$row1 = mysqli_fetch_array($sql1);
$sql2 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='3'");
$row2 = mysqli_fetch_array($sql2);
$sql3 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='4'");
$row3 = mysqli_fetch_array($sql3);
$sql4 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='5'");
$row4 = mysqli_fetch_array($sql4);
$sql5 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='6'");
$row5 = mysqli_fetch_array($sql5);
$sql6 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='7'");
$row6 = mysqli_fetch_array($sql6);
$sql7 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='8'");
$row7 = mysqli_fetch_array($sql7);
$sql8 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='9'");
$row8 = mysqli_fetch_array($sql8);
$sql9 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='10'");
$row9 = mysqli_fetch_array($sql9);
$sql10 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='11'");
$row10 = mysqli_fetch_array($sql10);
$sql11 = mysqli_query($koneksi, "SELECT COUNT(tanggal_lahir) AS total FROM data WHERE MONTH(tanggal_lahir)='12'");
$row11 = mysqli_fetch_array($sql11);
?>
<table id="TableSiswa" class="table table-bordered" border="0" align="center" cellpadding="10">
<tr>
<th>Bulan</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>Mei</th>
<th>Jun</th>
<th>Jul</th>
<th>Ags</th>
<th>Sep</th>
<th>Okt</th>
<th>Nov</th>
<th>Des</th>
</tr>
<tr>
<td>Mahasiswa</td>
<td><?php echo $row['total'];?></td>
<td><?php echo $row1['total'];?></td>
<td><?php echo $row2['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
<td><?php echo $row3['total'];?></td>
</tr>
<?php
$sqlku = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='1'");
$rowku = mysqli_fetch_array($sqlku);
$sqlku1 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='2'");
$rowku1 = mysqli_fetch_array($sqlku1);
$sqlku2 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='3'");
$rowku2 = mysqli_fetch_array($sqlku2);
$sqlku3 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='4'");
$rowku3 = mysqli_fetch_array($sqlku3);
$sqlku4 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='5'");
$rowku4 = mysqli_fetch_array($sqlku4);
$sqlku5 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='6'");
$rowku5 = mysqli_fetch_array($sqlku5);
$sqlku6 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='7'");
$rowku6 = mysqli_fetch_array($sqlku6);
$sqlku7 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='8'");
$rowku7 = mysqli_fetch_array($sqlku7);
$sqlku8 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='9'");
$rowku8 = mysqli_fetch_array($sqlku8);
$sqlku9 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='10'");
$rowku9 = mysqli_fetch_array($sqlku9);
$sqlku10 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='11'");
$rowku10 = mysqli_fetch_array($sqlku10);
$sqlku11 = mysqli_query($koneksi, "SELECT SUM(sks) AS total1 FROM data WHERE MONTH(tanggal_lahir)='12'");
$rowku11 = mysqli_fetch_array($sqlku11);
?>
<tr>
<td>Out</td>
<td><?php echo $rowku['total1'];?></td>
<td><?php echo $rowku1['total1'];?></td>
<td><?php echo $rowku2['total1'];?></td>
<td><?php echo $rowku3['total1'];?></td>
<td><?php echo $rowku4['total1'];?></td>
<td><?php echo $rowku5['total1'];?></td>
<td><?php echo $rowku6['total1'];?></td>
<td><?php echo $rowku7['total1'];?></td>
<td><?php echo $rowku8['total1'];?></td>
<td><?php echo $rowku9['total1'];?></td>
<td><?php echo $rowku10['total1'];?></td>
<td><?php echo $rowku11['total1'];?></td>
</tr>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="dist/js/jquery-1.4.js"></script>
<!-- <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>-->
<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.fusioncharts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript" src="assets/js/ie10-viewport-bug-workaround.js"></script>
<!--LOAD HTML KE JQUERY FUSION CHART BERDASARKAN ID TABLE-->
<script>
$('#TableSiswa').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#TableSiswa",
width: "1050",
height: "350",
dataFormat: "HTMLTable",
renderAt: "chart-container",
dataOption:{
chartAttributes:{
caption: "Annual Stock Graph",
xAxisName: "Month",
yAxisName: "Qty Stock",
decimalPrecision: "0"
}
}
});
</script>
</body>
</html>
- Jangan Lupa membuat kode koneksi seperti di bawah ini
<?php
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "mahasiswa";
$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if(mysqli_connect_errno()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
?>
Pada dasarnya fusion chart hanya mengambil id dari name table HTML yang kita buat, sehingga kita bisa customize tampilan grafik fusion chart pada penggalan code java script di bawah ini :
<script>
$('#TableSiswa').convertToFusionCharts({
swfPath: "Charts/",
type: "MSColumn3D",
data: "#TableSiswa",
width: "1050",
height: "350",
dataFormat: "HTMLTable",
renderAt: "chart-container",
dataOption:{
chartAttributes:{
caption: "Annual Stock Graph",
xAxisName: "Month",
yAxisName: "Qty Stock",
decimalPrecision: "0"
}
}
});
</script>
Dari code di atas kita bisa mengcustumize tinggi maupun lebar dari tampilan grafik yang di inginkan dengan mengubah width dan height, untuk type chart anda juga bisa mengubahnya sesuai kebutuhan pada code type dari code javascript di atas dan fusion chart free menyediakan banyak jenis chart seperti pie, bar, coloumn, line dan lain lain, pada contoh kali ini saya menggunakan jenis chart Coloumn 3D seperti tampilan gambar dibawah ini :
Nah begitu kira kira tampilan chart yang saya buat pada tutorial kali ini, bagaimana.? mudah bukan.? untuk download source code lengkap anda bisa mengunjungi repository saya di Github :
Semuanya sudah saya berikan mulai dari tutorial dan source code langkap yang bisa anda download dan anda pelajari, semoga tutorial ini bermanfaat untuk semuanya, silahkan dipelajari dan dipraktekan.
Happy Coding & Programming