--> Skip to main content
Home Bootstrap Jquery Pemrograman Web php Web Programming Membuat Grafik Line Chart dari Database Menggunakan PHP

Membuat Grafik Line Chart dari Database Menggunakan PHP


Dalam tutorial kali ini, kita akan mengdiskusikan tentang pembuatan sebuah grafik dengan tipe line chart dengan menggunakan librari Highchart.

Pernahkan anda mengunjungi situs-situs pemerintahan. Seringkali kita menjumpai informasi atau publikasi mengenai perkembangan harga sebuah komoditi dalam satu tahun terakhir, salah satunya adalah line chart (grafik baris).

Line chart merupakan salah satu jenis grafik yang tepat dalam memperlihatkan data secara terus menerus atau berkelanjutan selama periode atau kurun waktu tertentu. Sehingga grafik ini sangat ideal dalam menunjukkan tren data pada interval/rentang waktu yang sama.

Pada tutorial sebelumnya, kita telah membahas serta memberikan contoh pembuatan grafik :

Berikut ini adalah hasil akhir dari pembuatan line chart pada tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :



(Gambar.1)


Seperti yang ditunjukkan oleh Gambar.1, kita akan membuat line chart untuk menunjukkan perbandingan harga komoditas : Sugar (Gula), Rice (Beras) dan Wheat Flour (Tepung Terigu). Perbandingan harga untuk masing-masing komoditas tersebut ditunjukkan dalam rentang bulang Jan sampai Dec pada tahun 2008. Data-data harga yang disajikan dalam contoh ini hanya permisalan saja.

Langkah-langkahnya

1. Create Database

Disini kita akan membuat sebuah database yang diberinama : dbline. Kemudian kita membuat tabel yang bernama comodity yang berisikan lima(5) field : id, month, sugar, rice, wheat_flour. Field-field tersebut berisikan data seperti yang ditunjukkan oleh script SQL dibawah ini :
CREATE TABLE IF NOT EXISTS `comodity` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `month` varchar(20) NOT NULL,
  `sugar` int(11) NOT NULL,
  `rice` int(11) NOT NULL,
  `wheat_flour` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

INSERT INTO `comodity` (`id`, `month`, `sugar`, `rice`, `wheat_flour`) VALUES
(1, 'Jan', 6415, 5442, 6759),
(2, 'Feb', 6430, 5457, 7921),
(3, 'Mar', 6437, 5376, 7291),
(4, 'Apr', 6301, 5398, 7627),
(5, 'May', 6440, 5363, 7641),
(6, 'Jun', 6502, 5501, 7704),
(7, 'Jul', 6441, 5471, 7744),
(8, 'Aug', 6465, 5400, 7820),
(9, 'Sep', 6446, 5420, 7790),
(10, 'Oct', 6700, 5900, 7850),
(11, 'Nov', 6650, 5460, 7320),
(12, 'Dec', 6680, 5789, 7867);

2. Create file dataline.php

Dalam file ini kita membangun koneksi terhadap database, kemudian melakukan query ke masing-masing komiditi, yaitu query terhadap sugar, rice dan wheat_flour. Hasil query data tersebut akan diformat dalam bentuk JSON.
<?php
$con=mysqli_connect("localhost","root","","dbline");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

// Data for Sugar
$query = mysqli_query($con,"SELECT sugar FROM comodity");
$rows = array();
$rows['name'] = 'Sugar';
while($tmp= mysqli_fetch_array($query)) {
    $rows['data'][] = $tmp['sugar'];
}

// Data for Rice
$query = mysqli_query($con,"SELECT rice FROM comodity");
$rows1 = array();
$rows1['name'] = 'Rice';
while($tmp = mysqli_fetch_array($query)) {
    $rows1['data'][] = $tmp['rice'];
}

// Data for Wheat Flour
$query = mysqli_query($con,"SELECT wheat_flour FROM comodity");
$rows2 = array();
$rows2['name'] = 'Wheat Flour';
while($tmp = mysqli_fetch_array($query)) {
    $rows2['data'][] = $tmp['wheat_flour'];
}

$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);

print json_encode($result, JSON_NUMERIC_CHECK);

mysqli_close($con);
?>

3. Memangil data JSON dan membuat data properti line chart

Dalam langkah ke-3 ini, kita akan memangil data-data JSON dari file dataline.php. Selain itu kita akan mengeset tipe graph dengan line. Definisikan nama-nama bulan pada kode xAxis:{categories:[' '] dan harga pada kode yAxis:{ title: {text: 'Price (Rp)'}. Jika anda menampilkan legenda secara vertikal, lakukan pada kode legend: {layout: 'vertical'}, karena secara default kalau kita tidak membuat kode tersebut, maka legenda akan berada secara horizontal dengan posisi dibawah.
<script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                $.getJSON("dataline.php", function(json) {
                
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'mygraph',
                            type: 'line'
                            
                        },
                        title: {
                            text: 'Comparison of Sugar, Rice and Wheat Flour'
                            
                        },
                        subtitle: {
                            text: '(Price In 2008)'
                        
                        },
                        xAxis: {
                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                        },
                        yAxis: {
                            title: {
                                text: 'Price (Rp)'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            formatter: function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                    this.x +': '+ this.y;
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 120,
                            borderWidth: 0
                        },
                        series: json
                    });
                });
            
            });
            
        });
</script>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/exporting.js"></script>

Jangan lupa untuk memberikan nama pada bagian renderTo, misal dalam contoh ini kita memberinama mygraph pada bagian kode renderTo: 'mygraph' . Nama pada bagian renderTo ini menjadi id unique yang nantinya akan ditampilkan grafiknya dimana kita meletakkannya.

4. Memanggil id unique dengan div element

Tujuannya agar dirender untuk diterjemahkan dalam bentuk grafik. Dalam tutorial kali ini, kita meletakkannya pada class panel dalam framework Bootstrap : 


<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>

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 type="text/javascript">
		$(function () {
			var chart;
			$(document).ready(function() {
				$.getJSON("dataline.php", function(json) {
				
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'mygraph',
							type: 'line'
							
						},
						title: {
							text: 'Comparison of Sugar, Rice and Wheat Flour'
							
						},
						subtitle: {
							text: '(Price In 2008)'
						
						},
						xAxis: {
							categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
						},
						yAxis: {
							title: {
								text: 'Price (Rp)'
							},
							plotLines: [{
								value: 0,
								width: 1,
								color: '#808080'
							}]
						},
						tooltip: {
							formatter: function() {
									return '<b>'+ this.series.name +'</b><br/>'+
									this.x +': '+ this.y;
							}
						},
						legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'top',
							x: -10,
							y: 120,
							borderWidth: 0
						},
						series: json
					});
				});
			
			});
			
		});
		</script>
	<script src="assets/js/highcharts.js"></script>
	<script src="assets/js/exporting.js"></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-10">
		<div class="panel panel-primary">
			<div class="panel-heading">Commodity Price Graphs</div>
				<div class="panel-body">
					<div id ="mygraph"></div>
				</div>
		</div>
	</div>
</div>
<script src="assets/js/highcharts.js"></script>
<script src="assets/js/jquery-1.10.1.min.js"></script>
<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>

Live PreviewDownload

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar