Cara Membuat Grafik di PHP
Di sebuah aplikasi terutama berbasis web pasti menemukan adanya grafik untuk pelaporan. Lalu bagaimana cara membuat grafik menggunakan PHP ?
Mari kita pelajari sama sama
1. Pertama kita buat tabelnya seperti di bawah ini.
itu ada field id_lap_pelanggaran merupakan berelasi dengan tabel lain, untuk kasus ini saya menggunakan field tahun sebagai untuk acuan value nya untuk menampilkan grafiknya
2. Setelah itu masukkan kode di bawah ini.
<html>
<head>
<title>Chart Pelanggaran</title>
<script src="../js/jquery2.min.js" type="text/javascript"></script>
<script src="../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: '550',
height: '470',
type: 'column'
},
title: {
text: 'Grafik Pelanggaran Siswa'
},
xAxis: {
categories: ['Tahun Pelanggaran']
},
yAxis: {
title: {
text: 'Jumlah Pelanggaran',
},
tickInterval: 1
},
series:
[
<?php
include('include/config.php');
$sql = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun group by tahun") or die (mysql_error());
while ($data = mysql_fetch_array($sql))
{
$tahun = $data['tahun'];
$jmltahun = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun='$tahun' group by tahun")
or die (mysql_error());
while ($datajumlah = mysql_fetch_array($jmltahun)) {
$jumlah = $datajumlah['jumlah'];
}
?>
{
name: '<?php echo $tahun; ?>',
data: [<?php echo $jumlah; ?>]
},
<?php
}
?>
]
});
});
</script>
</head>
<body>
<center><div id='container'></div></center>
</body>
</html>
1. Pertama kita buat tabelnya seperti di bawah ini.
itu ada field id_lap_pelanggaran merupakan berelasi dengan tabel lain, untuk kasus ini saya menggunakan field tahun sebagai untuk acuan value nya untuk menampilkan grafiknya
2. Setelah itu masukkan kode di bawah ini.
<html>
<head>
<title>Chart Pelanggaran</title>
<script src="../js/jquery2.min.js" type="text/javascript"></script>
<script src="../js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: '550',
height: '470',
type: 'column'
},
title: {
text: 'Grafik Pelanggaran Siswa'
},
xAxis: {
categories: ['Tahun Pelanggaran']
},
yAxis: {
title: {
text: 'Jumlah Pelanggaran',
},
tickInterval: 1
},
series:
[
<?php
include('include/config.php');
$sql = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun group by tahun") or die (mysql_error());
while ($data = mysql_fetch_array($sql))
{
$tahun = $data['tahun'];
$jmltahun = mysql_query("SELECT tahun, count(tahun) as 'jumlah' FROM pelanggaran_siswa WHERE tahun='$tahun' group by tahun")
or die (mysql_error());
while ($datajumlah = mysql_fetch_array($jmltahun)) {
$jumlah = $datajumlah['jumlah'];
}
?>
{
name: '<?php echo $tahun; ?>',
data: [<?php echo $jumlah; ?>]
},
<?php
}
?>
]
});
});
</script>
</head>
<body>
<center><div id='container'></div></center>
</body>
</html>
//NB : Kode diatas saya menginclude kan file JS, untuk kasus ini saya menggunakan Highcharts sebagai pembuatan Chartnya.
3. Jika step-step yang dilakukan benar, maka akan muncul grafiknya seperti gambar di bawah ini
Sekian postingan saya , semoga bermanfaat bagi para pembacanya dan memiliki kasus yang sama :D
Enjoy your coding :D
Jika ada pertanyaan, silahkan bertanya di kolom komentar dengan sopan :)
0 comments:
Post a Comment