Membuat Grafik Chart menggunakan PHP + Highchart

Ini adalah tutorial keempat yang membahas materi highchart. perbedaan dengan tutorial sebelumnya, kali ini kita akan menggunakan data yang tersimpan didalam MySQL sebagai sumber data untuk grafik yang akan kita buat. Kalau direview ulang, data di tutorial sebelumnya diletakan manual di code javascriptnya. Nah, kali ini saya akan menunjukan cara membuat grafik berbasis web dengan data yang tersimpan di MySQL. Studi kasus untuk kasus se perti ini sangat banyak. Contoh kasus yang membutuhkan grafik misalkan grafik nilai mahasiswa, grafik penjualan, grafik pemasukan dan pengeluaran keuangan dan sebagainya.

Untuk kasus yang saya angkat adalah kasus membuat grafik penjualan smartphone di toko fiktif candraphone. Hal yang perlu diperhatikan, tidak semua code saya tuliskan, hanya code yang penting saja yang akan saya tunjukan. Kode lengkap bisa anda download dibagian bawah artikel ini.

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. Script PHP dan javascript untuk mengambil data dara database plus menampilkannya seagai grafik

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 
               //config.php adalah file koneksi database bagian ini dipakai 
               //untuk mengambil data dari mysql
        	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'];                 
                  }             
                  ?>
                 //data yang diambil dari database dimasukan ke variable nama dan data
                 //
                  {
                      name: '<?php echo $merek; ?>',
                      data: [<?php echo $jumlah; ?>]
                  },
                  <?php } ?>
            ]
      });
   });	

Hasil grafik

source code
Source code bisa anda download disini. Source code sudah termasuk file PHP lengkap, file koneksi, file javascript yang dibutuhkan dan file script sql.