Mudah Membuat chart dengan PHP MySQL dan Highchart - Selamat malam sahabat belajar koding. Pada kesempatan kali ini saya akan berbagi tutorial bagaimana membuat sebuah chart berupa grafik diagram batang dengan menggunakan php dengan bantuan javascript. chart atau grafik merupakan sebuah tampilan grafis dari hasil generate data yang ada di database. dengan bantuan chart/grafik inilah data yang dihasilkan akan lebih mudah dipahami dan lebih menarik untuk dilihat. dengan bantuan plugin javascipt bernama highchart maka membuat chart jadi tidak sesulit yang dibayangkan. langkah-langkah untuk membuat chart adalah sebagai berikut:
- siapkan komponen pendukung exporting.js highcharts.js, jquery.min.js semua bisa didapatkan di highchart.com
- buat sebuah database dengan nama db_chart dan buat sebuah tabel dengan nama data penduduk, isi seperti pada gambar berikut :
3. buat sebuah file index dengan struktur file seperti ini:
4. berikut isi dari file index tersebut.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Grafik Penduduk Indonesia</title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Data Penduduk Provinsi Indonesia '
},
xAxis: {
categories: ['Provinsi']
},
yAxis: {
title: {
text: 'Jumlah Penduduk'
}
},
series:
[
<?php
// file koneksi php
$server = "localhost";
$username = "root";
$password = "";
$database = "db_chart";
$koneksi= mysqli_connect($server,$username,$password,$database) or die("Koneksi gagal");
if(mysqli_connect_errno()){
echo'gagal terhubung';
}
$sql = "SELECT * from datapenduduk"; // file untuk mengakses ke tabel database
$query = mysqli_query( $koneksi,$sql ) or die(mysqli_error());
while($ambil = mysqli_fetch_array($query)){
$provinsi=$ambil['provinsi'];
$sql_jumlah = "SELECT * from datapenduduk where provinsi='$provinsi'";
$query_jumlah = mysqli_query( $koneksi,$sql_jumlah ) or die(mysqli_error());
while( $data = mysqli_fetch_array( $query_jumlah ) ){
$jumlahx = $data['jumlah'];
}
?>
{
name: '<?php echo $provinsi; ?>',
data: [<?php echo $jumlahx; ?>]
},
<?php } ?>
]
});
});
</script>
</head>
<body>
<!-- fungsi yang di tampilkan dibrowser -->
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Pada kode diatas yang perlu teman teman perhatikan adalah kita perlu mengubah deskripsi title, kategori, dan nama bagan di fungsi javacsript untuk higchart yang ada dibagian atas,
kemudian membuat koneksi databasae, serta gunakan perintah select untuk mengambil data dari database. kemudian data hasil select tersebut didisimpan data bentuk json setelah dilooping sebelumnya menggunakan while dengan nama key 'name' dan 'data'. setelah itu coba dijalankan..
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Grafik Penduduk Indonesia</title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Data Penduduk Provinsi Indonesia '
},
xAxis: {
categories: ['Provinsi']
},
yAxis: {
title: {
text: 'Jumlah Penduduk'
}
},
series:
[
<?php
// file koneksi php
$server = "localhost";
$username = "root";
$password = "";
$database = "db_chart";
$koneksi= mysqli_connect($server,$username,$password,$database) or die("Koneksi gagal");
if(mysqli_connect_errno()){
echo'gagal terhubung';
}
$sql = "SELECT * from datapenduduk"; // file untuk mengakses ke tabel database
$query = mysqli_query( $koneksi,$sql ) or die(mysqli_error());
while($ambil = mysqli_fetch_array($query)){
$provinsi=$ambil['provinsi'];
$sql_jumlah = "SELECT * from datapenduduk where provinsi='$provinsi'";
$query_jumlah = mysqli_query( $koneksi,$sql_jumlah ) or die(mysqli_error());
while( $data = mysqli_fetch_array( $query_jumlah ) ){
$jumlahx = $data['jumlah'];
}
?>
{
name: '<?php echo $provinsi; ?>',
data: [<?php echo $jumlahx; ?>]
},
<?php } ?>
]
});
});
</script>
</head>
<body>
<!-- fungsi yang di tampilkan dibrowser -->
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Pada kode diatas yang perlu teman teman perhatikan adalah kita perlu mengubah deskripsi title, kategori, dan nama bagan di fungsi javacsript untuk higchart yang ada dibagian atas,
kemudian membuat koneksi databasae, serta gunakan perintah select untuk mengambil data dari database. kemudian data hasil select tersebut didisimpan data bentuk json setelah dilooping sebelumnya menggunakan while dengan nama key 'name' dan 'data'. setelah itu coba dijalankan..
Comments
Post a Comment