Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Cara Membuat Grafik Batang dengan PHP dan Chart.js

Penggunaan grafik dalam suatu reporting merupakan hal yang sangat membantu sekali bagi para stakeholder dalam membuat keputusan. Data dalam suatu database, apabila tidak diolah dengan benar maka akan sangat sulit sekali data tersebut di analisis. perubahan data yang semula bersifat tabulasi atau dalam bentuk tabel tentu akan sangat membantu sekali apabila dikonversi kedalam bentuk grafik batang atau bar chart.

Untuk itu dalam pembelajaran kali ini kita akan mencoba untuk menggabungkan beberapa kode php dengan sourcode menampilkan barchart dari chart.js

Langkah pertama yang harus dilakukan adalah menyederhanakan sampel code yang diberikan oleh chart.js menjadi lebih sederhana dan mudah untuk dimodifikasi. Adapun kode yang telah disederhanakan tersebut adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Bar Chart</title>
 <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
 <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
 <style>
 canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
 }
 </style>
</head>

<body>
 <div id="container" style="width: 75%;">
  <canvas id="canvas"></canvas>
 </div>
 <script>
  var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var color = Chart.helpers.color;
  var barChartData = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
    label: 'Dealer 1',
    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
    borderColor: window.chartColors.red,
    borderWidth: 1,
    data: [
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001)     
    ]
   }, {
    label: 'Dealer 2',
    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
    borderColor: window.chartColors.blue,
    borderWidth: 1,
    data: [
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001),
     Math.floor(Math.random() * 1001)
    ]
   }]

  };

  window.onload = function() {
   var ctx = document.getElementById('canvas').getContext('2d');
   window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
     responsive: true,
     legend: {
      position: 'top',
     },
     title: {
      display: true,
      text: 'Grafik Target Penjualan'
     }
    }
   });

  };

 </script>
</body>

</html>

Simpanlah kode tersebut diatas dengan nama file contoh.php jika sudah selesai dibuat, maka sistem akan menampilkan output berikut ini.


jika telah berhasil, kemudian timbul pertanyaan bagaimana cara menggabungkan php di dalamnya? kita perlu mengetahui terlebih dahulu bahwa php adalah bahasa pemrograman serverside dimana outputnya adalah html. Maka kita bisa menggunakan hal tersebut untuk memodifikasi source diatas agar dapat bekerja dengan php. Misalnya kita membuat sebuah array yang mewakili dealer 1 dan 2 dimana data kita random dengan php dengan berbasis pada data array. hal ini kurang lebih sama jika kita menggunakan database. Mari kita kerjakan kode berikut ini


<?php 
//misal ada 3 dealer
$dealer = 3;
for($d=1;$d<=$dealer;$d++)
{
 //kemudian misal data dari bulan 1 hingga bulan 12
 for($b=1;$b<=12;$b++)
 {
  $data[$d][$b] = rand(0,999);
 }
}

function random_color()
{  
  return sprintf('#%06X', mt_rand(0, 0xFFFFFF));
}
?>

Kode diatas adalah generate random data dengan menggunakan for dan array. dalam hal ini kita membuat 3 dealer dengan data penjualan selama 12 bulan. dimana datanya kita random dari 0 hingga 999. Apakah dealernya bisa ditambah? ya bisa hanya tinggal mengganti angka 3 dengan jumlah yang diinginkan.

Kemudian terdapat function random_color() function ini digunakan untuk membuat warna grafik yang bervariasi dengan hasil random menggunakan warna dengan kode hex. Nantinya function ini akan digunakan pada bagian pewarnaan chart. Oke mari kita lanjutkan

var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var color = Chart.helpers.color;
var barChartData = {
 labels: MONTHS,
 datasets: [
 <?php 
 for($d=1;$d<=$dealer;$d++)
 {
  $color = random_color();
 ?>
  {
   label: '<?php echo "Dealer $d";?>',
   backgroundColor: color('<?php echo $color;?>').alpha(0.5).rgbString(),
   borderColor: '<?php echo $color;?>',
   borderWidth: 1,
   data: [
    <?php 
    for($b=1;$b<=12;$b++)
    {
     echo $data[$d][$b].",";
    }
    ?>     
   ]
  },
 <?php 
 }
 ?>
 ]

};

Script diatas adalah hasil modifikasi dari script yang sebelumnya dimana pertama kita mengubah label yang tadinya hanya 7 bulan menjadi 12 bulan dengan menggunakan variabel MONTHS pada javascript.
kemudian kurawal pertama pada dataset kita menggunakan perulangan for untuk dealer, yang kemudian diikuti dengan perulangan for untuk bulan dari 1 s/d 12. Di dalam for inilah kita modifikasi kode dengan mengganti warna secara random, kemudian penamaan serta data kita gunakan dari hasil generate sebelumnya.

oke full sourcecodenya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
 <title>Bar Chart</title>
 <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
 <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
 <style>
 canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
 }
 </style>
</head>

<body>
 <div id="container" style="width: 75%;">
  <canvas id="canvas"></canvas>
 </div>

 <?php 
 //misal ada 3 dealer
 $dealer = 3;
 for($d=1;$d<=$dealer;$d++)
 {
  //kemudian misal data dari bulan 1 hingga bulan 12
  for($b=1;$b<=12;$b++)
  {
   $data[$d][$b] = rand(0,999);
  }
 }

 function random_color()
 {  
   return sprintf('#%06X', mt_rand(0, 0xFFFFFF));
 }
 ?>

 <script>
  var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var color = Chart.helpers.color;
  var barChartData = {
   labels: MONTHS,
   datasets: [
   <?php 
   for($d=1;$d<=$dealer;$d++)
   {
    $color = random_color();
   ?>
    {
     label: '<?php echo "Dealer $d";?>',
     backgroundColor: color('<?php echo $color;?>').alpha(0.5).rgbString(),
     borderColor: '<?php echo $color;?>',
     borderWidth: 1,
     data: [
      <?php 
      for($b=1;$b<=12;$b++)
      {
       echo $data[$d][$b].",";
      }
      ?>     
     ]
    },
   <?php 
   }
   ?>
   ]

  };

  window.onload = function() {
   var ctx = document.getElementById('canvas').getContext('2d');
   window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
     responsive: true,
     legend: {
      position: 'top',
     },
     title: {
      display: true,
      text: 'Grafik Target Penjualan'
     }
    }
   });

  };

 </script>
</body>

</html>

Jika source code telah diketik dengan benar, maka akan menghasilkan output seperti dibawah ini.



Bagaimana? cukup mudah bukan, silahkan dicoba dan dapat dikreasikan sesuai kebutuhan ya. Selamat mengerjakan dan tunggu kembali artikel selanjutnya ya.
Labels: Aplikasi Web, chart.js, Tutorial

Terima kasih telah membaca Cara Membuat Grafik Batang dengan PHP dan Chart.js. Bila bermanfaat boleh di share yah :)

0 Comment for "Cara Membuat Grafik Batang dengan PHP dan Chart.js"

Back To Top