Membuat Grafik Menggunakan PHP dan MySQL






pada tutorial kali ini kita akan membahas mengenai cara bagaimana membuat grafik menggunakan Google Chart yang data nya akan kita ambil dari database. langkah pertama yang kita lakukkan adalah membuat database baru, buat database baru dengan nama iyangoding dan buat tabel dengan nama data, dan isilah dengan beberapa data.


langkah selanjutnya kita membuat koneksi ke database, buatlah sebuah file dengan nama config.php

<?php

$host='localhost';
$user='root';
$pass='';
$db ='iyangoding';

mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());



?>

sesuaikan nama database yang kalian miliki, dan tuliskan di variabel $db di dalam file config, selanjutnya kita membuat file index.php

<!DOCTYPE html>
<html>
<head>
<title>Membuat Grafik </title>
</head>
<body>
  <!-- 
======================================================================================================
Create : M.Fahrial Agustian
web    : www.iniilmu.com
======================================================================================================
  -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<?php
include 'config.php';
$tgl = date('m');

$grafik = mysql_query("SELECT count(tgl_lahir) as tgl , month(tgl_lahir)  As bulan from data group by month(tgl_lahir)  ") or die(mysql_error());
?>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          <?php
            $row = mysql_fetch_assoc($grafik);
            echo "['Data Tanggal', 'Banyak Bulan Yang sama'],";

            while ($row=mysql_fetch_assoc($grafik)) {
              
             echo "['".$row['bulan']."',".$row['tgl']." ],";

            }


          ?>
          
        
        ]);

        var options = {
          chart: {
            title: 'Data Tanggal Lahir',
            subtitle: 'Bersarkan Bulan',
          },
          bars: 'vartical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

penjelasan mengenai source code diatas,
var data = google.visualization.arrayToDataTable([
          <?php
            $row = mysql_fetch_assoc($grafik);
            echo "['Data Tanggal', 'Banyak Bulan Yang sama'],";

            while ($row=mysql_fetch_assoc($grafik)) {
              
             echo "['".$row['bulan']."',".$row['tgl']." ],";

            }


          ?>
          
        
        ]);

source code diatas berfungsi untuk mengambil data di database dan membutnya menjadi sebuah grafik, $row['bulan'] bisa disesuaikan dengan apa yang kita panggil saat melakukan query, fungsi dari data bulan tersebut ada untuk menampilkan data bulan yang ada di dalam database, kemudian $row['tgl'] berfungsi untuk menampilkan jumlah data tanggal lahir berdasarkan bulan yang sama.

var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

<div id="barchart_material" style="width: 900px; height: 500px;"></div>

variabel chart diatas memiliki fungsi untuk menampilkan atau menyajikan data yang tersimpan pada variabel data, yang perlu di perhatikan adalah tulisan yang berwarna merah, itu harus sesuai dengan nama id pada div dimana tempat grafik akan di tampilkan, setelah berhasil silahkan buka di browser kalian maka akan tampil seperti gambar dibawah ini



You might also like

0 Comments


EmoticonEmoticon

About