Membuat Grafik Chart menggunakan PHP + Highchart
Ini adalah tutorial yang membahas materi highchart. kali
ini saya akan menunjukan cara membuat grafik berbasis web dengan data yang
tersimpan di MySQL. Studi kasus untuk kasus seperti ini sangat banyak. Contoh
kasus yang membutuhkan grafik misalkan grafik nilai mahasiswa, grafik
penjualan, grafik pemasukan dan pengeluaran keuangan dan sebagainya.
Dalam kasus ini penulis mengambil contoh Grafik
penjualan Handphone. Untuk sourcodenya dapat di download di bagian bawah.
1. 1. Membuat Script SQL
CREATE TABLE IF NOT EXISTS `penjualan` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`merek` varchar(30) NOT NULL,
`jumlah` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
INSERT INTO `penjualan` (`id`,
`merek`, `jumlah`) VALUES
(1, 'Samsung', 80),
(2, 'Nokia', 20),
(3, 'Blackberry', 40),
(4, 'Apple', 60);
2. 2. Script PHP dan javascript untuk
mengambil data dara database plus menampilkannya seagai grafik
<html>
<head>
<script
src="js/jquery.min.js"
type="text/javascript"></script>
<script
src="js/highcharts.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: 'Grafik Penjualan '
},
xAxis: {
categories: ['merek']
},
yAxis: {
title: {
text: 'Jumlah terjual'
}
},
series:
[
<?php
include('config.php');
$sql = "SELECT merek FROM penjualan";
$query = mysql_query( $sql ) or die(mysql_error());
while( $ret = mysql_fetch_array(
$query ) ){
$merek=$ret['merek'];
$sql_jumlah = "SELECT jumlah FROM penjualan WHERE
merek='$merek'";
$query_jumlah = mysql_query(
$sql_jumlah ) or die(mysql_error());
while( $data =
mysql_fetch_array( $query_jumlah ) ){
$jumlah =
$data['jumlah'];
}
?>
{
name: '<?php echo
$merek; ?>',
data: [<?php echo
$jumlah; ?>]
},
<?php } ?>
]
});
});
</script>
</head>
<body>
<div
id='container'></div>
</body>
</html>
Hasilnya Seperti ini :
0 Response to "Membuat Grafik Chart menggunakan PHP + Highchart"
Post a Comment
Terima kasih atas kunjungannya semoga bermanfaat. Silahkan tinggalkan komentar, mohon jangan mencantumkan link live atau spam ! Berkomentarlah dengan bahasa yang santun !
Untuk Anda yang tidak memiliki blog dapat berkomentar dengan FACEBOOK atau TWITTER dengan cara :
1. Pilih Name/URL
2. Lalu masukan nama dan URL (link) facebook atau twitter sobat
3. Lalu tekan LANJUTKAN dan berkomentarlah !