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