Cara Membuat Diagram Batang (Column Chart) dengan PHP

Dalam sebuah laporan terkadang kita menginginkan informasi dalam bentuk visual atau grafik. Laporan dalam bentuk grafik dapat dibuat dengan menggunakan macam - macam tools, misalnya: Microsoft Excel. Pada sesi kali ini, Saya akan membahas bagaimana membuat sebuah column chart atau diagram batang dengan menggunakan php mysql, serta menggunakan bantuan pihak ketiga seperti highcharts.

Jika Anda ingin melihat sampel diagram yang dapat dibuat oleh highchart secara lengkap, Anda dapat mengunjungi situs resminya dan download librarinya : Highcharts.com

Oke, langsung saja kita membahas bagaimana cara membuat diagram batang yang diintegrasikan dengan database Mysql, Dalam latihan ini, Kita akan membuat diagram jumlah mahasiswa per program studi dengan menggunakan diagram batang atau column charts, berikut langkah - langkahnya :

1. Membuat database baru. Anda dapat menngunakan Phpmyadmin, Sqlyog, atau Navicat (Sesuai selera). dalam contoh ini Saya menggunakan nama database batekom_db.
2. Membuat tabel baru dengan nama rekapmhs, tabel ini digunakan untuk menyimpan jumlah data mahasiswa per program studi. Berikut Saya sertakan query dalam pembuatan tabel rekapmhs.

   CREATE TABLE `rekapmhs` (
     `kode` varchar(5) DEFAULT NULL,
     `nmprogdi` varchar(50) DEFAULT NULL,
     `jmlmhs` int(5) DEFAULT NULL
   )
   

3. Isi tabel tersebut dengan data sampel (Susuai keinginan Anda). Berikut Saya sertakan query data sampel yang sudah saya buat.

   insert  into `rekapmhs`(`kode`,`nmprogdi`,`jmlmhs`) values 
   ('BT993','Teknik Informatika',455),('BT989','Sistem Informasi',344),
   ('BT929','Desain Komunikasi Visual',767),('BT990','Teknik Elektro',545),
   ('BT343','Teknik Industri',300),('BT783','Bahasa Inggris',545),
   ('BT878','Broadcasting',106);
   

4. Kemudian siapkan direktori baru pada folder htdocs (Jika Anda menggunakan xampp). Jika sudah, buat file koneksi.php untuk menghubungkan dengan database mysql.

   <?php
    mysql_connect("localhost","root","") or die ("Koneksi Gagal");
    mysql_select_db("batekom_db") or die ("Database Tidak Terakses");
   ?>
   

5. Selanjutnya membuat file utamanya, pada contoh ini saya gunakan nama column.php, agar proses berjalan dengan lancar, file ini membutuhkan 4 file lainya yang harus diinclude, yaitu: koneksi.php (yang sudah dibuat sebelumnya), jquery ( Download disini ), highchats.js dan exporting.js (Dapat didownload di situs resminya).

   <?php 
    //Include Koneksi
    include "koneksi.php";
   
    //Membuat Query
    $q=mysql_query("select * from rekapmhs");
   ?>
   
   <!-- File yang diperlukan dalam membuat chart -->
   <script src="js/jquery.min.js"></script>
   <script src="js/highcharts.js"></script>
   <script src="js/exporting.js"></script>
       
   <script type="text/javascript">
   $(function () {
       $('#view').highcharts({
           chart: {
               type: 'column'
           },
           title: {
               text: 'Jumlah Mahasiswa per Program Studi'
           },
           subtitle: {
               text: ''
           },
           xAxis: {
               categories: [
                   'Program Studi'
               ]
           },
           yAxis: {
               min: 0,
               title: {
                   text: 'Total'
               }
           },
           plotOptions: {
               column: {
                   pointPadding: 0.2,
                   borderWidth: 0
               }
           },
           series: [
     
     <?php
     while($r=mysql_fetch_array($q)){
       echo "{ name: '".$r["nmprogdi"]."',data: [".$r["jmlmhs"]."]},";
     }
     ?>
     
     ]
       });
   });
   </script>
   
   <div id="view" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   

6. Silahkan simpan dan mencoba. semoga berhasil.

Sekian tutorial dalam membuat diagram batang dengan php mysql dan bantuan highcharts. Jika ada pertanyaan, dapat ditulis melalui komentar dibawah.

Source Code : Download Disini