Cara Membuat Diagram Garis (Line 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 line chart atau diagram garis 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 librarynya : Highcharts.com

Oke, langsung saja kita membahas bagaimana cara membuat diagram garis yang diintegrasikan dengan database Mysql, Dalam latihan ini, Kita akan membuat diagram penjualan per bulan dengan menggunakan diagram garis atau line 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 rekapjual, tabel ini digunakan untuk menyimpan jumlah pendapatan per bulan. Berikut Saya sertakan query dalam pembuatan tabel rekapjual.

   CREATE TABLE `rekapjual` (
     `kode` int(5) NOT NULL AUTO_INCREMENT,
     `tanggal` date DEFAULT NULL,
     `total` double DEFAULT NULL,
     PRIMARY KEY (`kode`)
   ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
   

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

   insert  into `rekapjual`(`kode`,`tanggal`,`total`) values 
   (1,'2015-01-28',2000000),(2,'2015-02-28',5000000),
   (3,'2015-03-28',5030000),(4,'2015-04-28',2350000),
   (5,'2015-05-28',5030000),(6,'2015-06-28',1320000),
   (7,'2015-07-28',7170000),(8,'2015-08-28',8130000),
   (9,'2015-09-28',5050000);
   

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 line.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
    $k=mysql_query("select * from rekapjual");
    $q=mysql_query("select date_format(tanggal,'%b') as bulan from rekapjual");
   ?>
   
   <!-- 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({
           title: {
               text: 'Data Penjualan per bulan',
               x: -20 //center
           },
           subtitle: {
               text: '',
               x: -20
           },
           xAxis: {
               categories: [<?php while($r=mysql_fetch_array($q)){ echo "'".$r["bulan"]."',";}?>]
           },
           yAxis: {
               title: {
                   text: 'Jumlah'
               },
               plotLines: [{
                   value: 0,
                   width: 1,
                   color: '#808080'
               }]
           },
           tooltip: {
               valueSuffix: ''
           },
           legend: {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
           },
           series: [{
               name: 'Jumlah ',
               data: [<?php while($t=mysql_fetch_array($k)){ echo $t["total"].",";}?>]
           }]
       });
   });
   </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 garis dengan php mysql dan bantuan highcharts. Jika ada pertanyaan, dapat ditulis melalui komentar dibawah.

Source Code : Download Disini