Menyajikan Data Dalam Bentuk Grafik di PHP dengan HIGHCHART

Unknown - 11.07
Grafik merupakan presentasi visual pada sebuah permukaan seperti dinding, kanvas, layar komputer, kertas, atau batu bertujuan untuk memberi tanda, informasi, ilustrasi, atau untuk hiburan ( http://id.wikipedia.org/wiki/Grafika ).
Yups betul jadi grafik adalah media untuk penyajian informasi berupa gambar atau grafis. kali ini saya akan memberikan trik untuk membuat grafik dan menyajikan nya dalam sebuah halaman website tentunya menggunakan bahasa pemrograman PHP dan menggunakan liblary gratis Highchart
siip langsung saja :
STEP 1 .
Kita buat sebuah database dengan nama penjualan 
CREATE DATABASE penjualan;
Setelah di buat databasenya selanjutnya kita buat tabel penjualan
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;

 STEP 2
Setelah database dan table terbentuk selanutnya kita buat koneksi untuk menghubungkan aplikasi dan database yang telah di buat sebelumnya :

<?php

define('db_host','localhost');
define('db_user','root');
define('db_pass','');
define('db_name','penjualan');
mysql_connect(db_host,db_user,db_pass);
mysql_select_db(db_name);
?>
Simpan file tersebut dengan nama koneksi.php

STEP 3
Setelah koneksi selesai di buat langkah berikutnya kita tampilkan data dalam bentuk grafik  dengan scrip dibawah ini :
<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('koneksi.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>
Ok jika sudah simpan dengan nama grafik.php
STEP 4.
Jika semua file selesai dibuat selanjutnya kita download liblary highchartnya  di SINI 

STEP 5.
Test running di localhost anda

Selamat mencoba dan berkarya...
Tags:

Posting Komentar

0 Komentar