Cara Membuat Diagram Lingkaran ( Pie Diagram ) 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 pie chart atau diagram lingkaran 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 lingkaran yang diintegrasikan dengan database Mysql, Dalam latihan ini, Kita akan membuat diagram jumlah voting pada browser pilihan dengan menggunakan diagram lingkaran atau pie 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 voting, tabel ini digunakan untuk menyimpan jumlah data voting per browser. Berikut Saya sertakan query dalam pembuatan tabel voting.

   CREATE TABLE `voting` (
     `kode` int(2) NOT NULL AUTO_INCREMENT,
     `jenis` varchar(50) DEFAULT NULL,
     `jmlsuara` int(5) DEFAULT NULL,
     PRIMARY KEY (`kode`)
   ) ENGINE=InnoDB CHARSET=latin1;
   

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

   insert  into `voting`(`kode`,`jenis`,`jmlsuara`) values 
   (1,'Chrome',788),(2,'Firefox',545),(3,'Safari',434),
   (4,'Opera',233),(5,'Edge',400),(6,'Lainnya',100);
   

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 pie.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 voting");
   ?>
   
   <!-- 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 () {
   
       // Radialize the colors
       Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
           return {
               radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
               stops: [
                   [0, color],
                   [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
               ]
           };
       });
   
       // Build the chart
       $('#view').highcharts({
           chart: {
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false
           },
           title: {
               text: 'Voting Browser Pilihan Edisi Batekom.com th. 2015'
           },
           tooltip: {
               pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
           },
           plotOptions: {
               pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: true,
                       format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                       style: {
                           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                       },
                       connectorColor: 'silver'
                   }
               }
           },
           series: [{
               type: 'pie',
               name: 'Browser share',
               data: [
      <?php
     while($r=mysql_fetch_array($q)){
       echo "['".$r["jenis"]."',".$r["jmlsuara"]."],";
     }
     ?>
      ]
           }]
       });
   });
   </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 lingkaran dengan php mysql dan bantuan highcharts. Jika ada pertanyaan, dapat ditulis melalui komentar dibawah.

Source Code : Download Disini