Pages

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
?
source code
01
02
03
04
05
06
07
08
09
10
11
12
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
?
source code
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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


Grafik penjualan smarphone menggunakan PHP, MySQ dan Highchart
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.



Sumber : Klik

0 komentar: